Login Screen in React Native

Step1: Creating a background image

Creating a background image with component ImageBackground and if providing the path of url use uri: 'path' else can take the image from asset and provide the style with flex:1 and resizeMode cover to fit in the complete space.

Step2: Creating semi transparent TextInput Username with icon within

Creating username with View with background white and opacity .2 provided in background color, placed a vector icon and textinput inside View and inorder to provide them in horizontal we need to add flexDirection: 'row' the View component.

In order to use the vector icons we need to install the vector icon package and import it to use with the below commands

npm install react-native-vector-icons --save
react-native link react-native-vector-icons

<View style={{ width: "90%", flexDirection: 'row',
                  height: 40, borderColor: 'black', borderRadius: 25,
                  backgroundColor: 'rgba(255,255,255,.2)',
                  padding: 10, paddingLeft: 10, margin: 10, 
 }}>
 <Icon  alignItems="left" name="user" size={20} color="#000" />
 <TextInput style={{ fontSize: 16, color: '#fff', alignSelf: "center", alignItems: "center", marginLeft: 10,}} placeholder="Enter name"/>
 </View>

Step3: Creating semi transparent TextInput Password with icon within

Creating username with View with background white and opacity .2 provided in background color, placed a vector icon and textinput with securetextentry for password inside View and inorder to provide them in horizontal we need to add flexDirection: 'row' the View component.

Step4: Creating login

Step5: Creating Create Account and ForgotPassword to corners horizontally

Creating two text components in a view at each corners placed horizontally we need to create a View with flexDirection: 'row' and place both the text components in this view adding flex:1 to each component such that both the text component equally occupy the space in row and use justifyContent to place the text as needed in the space occupied.

Creating a Login Screen in React Native

Try this example on Snack

Output:

You can find the complete code here

Stay tuned to my posts and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope you liked it :)

Followers

Login Screen in React Native