Name: Create A Login Screen in React Native
Uploaded: 2016-12-15T21:28:52-06:00
Description: In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

https://app.egghead.io/api/v1/lessons/react-create-a-login-screen-in-react-native/subtitles

Create A Login Screen in React Native

[00:00] We'll start by importing Image, TextInput, and TouchableOpacity, from react-native. We'll scroll down to our style sheet, and we'll create a background style. We'll set width to null and height to null so that we can use flexbox to style our background. Now, we'll scroll up here. Instead of a View, we'll change this to an Image.

[00:20] We'll move these under separate lines so that we can see. We'll add our styles.background, as well as our source we'll be our background image that we've imported here, and then finally, we'll add resizeMode="cover." Now when we refresh, we can see that our background image is covering the entire screen.

[00:43] Next thing we'll do is we'll open up our Image and we'll re-close it, and we'll create three views. Our first one will be a View with a style={styles.container}, which we'll apply a flex 1. We'll then add another View, which we'll keep open to add our content inside, and then additionally, we'll add another View style={styles.container}.

[01:07] What this will do is create two spacings, and then this will automatically center. Now, we'll create another View which will give style={styles.inputWrap}. This will wrap our TextInput, which will give a placeholder of "Username," as well as style={styles.input}, which we also haven't created yet, and then underlineColorAndroid="transparent," which will hide the default underline on inputs for Android.

[01:38] Now, we'll go create our styles. We'll say inputWrap, which we'll say flexDirection "row," because our input is going to go across the screen rather than in a column fashion. A marginVertical of 10, a height of 40, and a backgroundColor of "transparent." Finally, we'll create our input style.

[02:03] We'll just say a flex 1 to say take up all available space, a paddingHorizontal inside of our input of 10, and backgroundColor of white. If we refresh our emulator, we can see that we have a white input spread across the screen. Now, we'll go up and we'll create our password input, which will be an exact replica of that.

[02:28] We'll just copy and paste that. Rather than placeholder, we'll say "Password," and then we'll say secureTextEntry, which will turn it into a password input. Now if I refresh, you can see that we have two spaced-out inputs. Our text inputs are going all the way to the edge of the screen.

[02:45] What we'll do is we'll go create a wrapper style, and say paddingHorizantal of 15. Now, we'll apply that to our wrapping View. We'll say style={styles.wrapper}. Now when we refresh, we have some spacing around it. Now, we'll add in our icon. We'll say View styles={styles.iconWrap}, we can style the wrapper container later.

[03:10] We'll then add an Image. We'll add a source={personIcon} which we imported, style={styles.icon}. In addition, we'll add resizeMode="contain," because we're going to set the dimensions different than the actual dimensions of the image.We'll do the same for our password field.

[03:32] We'll copy this, we'll paste this down here, and then instead of personIcon, we'll use lockIcon. Now, add our style to our styles sheet. We'll come down here and add iconWrap. We'll then say paddingHorizontal of 7 to add 7 on both sides. We'll add alignItems "center" and justifycontent "center" to center our icon in the middle of our box.

[03:59] We'll say backgroundColor, think with a "#d73352". We'll then add our icon style of width of 20 and height of 20. Now, when we refresh, we can see that we have icons to the left of our inputs that are centered inside of their boxes. Now, we'll create our Sign In button.

[04:21] We'll come up here, and inside of our wrapper, we'll create a TouchableOpacity with an activeOpacity of {.5}. Inside of this, we'll create a View with a style={styles.button}, we can style our button. Inside of this, we'll say Text. The style={styles.buttonText}, and our Text will say Sign In.

[04:49] Now, we'll go create our styles. We'll create a button style which will have a backgroundColor of the same as our icon, "#d73352," a paddingVertical of 15, a marginVertical of 15. We'll then also use alignItems "center" and justifyContent "center," to align our Text to the middle of the button.

[05:15] We'll then add a buttonText which will be a color of white, and a fontSize of 18. Now when we refresh, we have a big button that when pressed goes to {.5} Opacity. We'll add one more button. We'll come up here. We'll add another TouchableOpacity below, with an active Opacity of {.5}, as well.

[05:41] Inside of here we'll say View, and then add Text with a style={styles.forgotPasswordText}. Inside there we'll say Forgot Password.

[05:52] Now, we'll go create our Forgot Password style text. ForgotpasswordText style with a color of white, a backgroundColor of transparent, and finally, textAlign "center" to center our text in the middle of the screen because it's taking up the full width.

[06:14] Now when we refresh, we can see we have Forgot Password that when pressed is {.5} Opacity, as well.

Create A Login Screen in React Native

Share this video with your friends