Technology

Responsive Advertisement

React native building login UI


 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
  }
});

Post a Comment

0 Comments