How to create login screen in react native
Step: 1 First you have to import React from react library and also import following elements from react native library.
import React from 'react'; import { StyleSheet, Text, View,TextInput,TouchableOpacity } from 'react-native';
Step: 2 Copy all the code and paste in class component
export default class App extends React.Component {
state={
email:"",
password:""
}
render(){
return (
MyApp
this.setState({email:text})}>
this.setState({email:text})}>
Forgot Password?
LOGIN
Signup
);
}
}
Step: 3 Copy all style css and paste in the below of component
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'pink', alignItems: 'center', justifyContent: 'center', }, logo:{ fontWeight:"bold", fontSize:50, color:"#003f5c", marginBottom:40 }, inputView:{ width:"80%", backgroundColor:"#465881", borderRadius:25, height:50, marginBottom:20, justifyContent:"center", padding:20, }, inputText:{ height:50, color:"white" }, loginBtn:{ width:"80%", backgroundColor:"#465881", borderRadius:25, height:50, alignItems:"center", justifyContent:"center", marginTop:40, marginBottom:10 }, signupText:{ color:"#003f5c" }, forgot:{ color:"#003f5c", fontSize:11 } });
0 Comments