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