This tutorial shows you how to create the building blocks of a login screen such as input forms. We'll also set a variable to check whether the user has logged in, and only show sensitive information once they have.

We'll assume you know how to make custom components and hooks in React Native. We'll also assume you already have a multi-screen app whose initial screen is WelcomeScreen.js.

Note: this draft presents only a rudimentary synopsis of this tutorial. Please watch the video for details.

Create login components

Let's say you have a simple WelcomeScreen.js with a simple button users can click to proceed, but you want them to log in first to ensure user privacy or accountability. We're going to create a <LoginForm> component to stand in its place until the user has logged in.

We'll build our login form from a series of nested components, including input fields and a submit button. We'll make these as generic as possible so we can re-use them for other screens or apps.

1. SubmitButton.js

This will be just a re-usable button that looks a little better than the one that comes by default with React Native.

• We'll make it from a <Text> component wrapped in a <TouchableOpacity> component, which blinks when tapped--so import those.

import { Text, TouchableOpacity } from "react-native";

• <TouchableOpacity> has a built-in onPress listener that can trigger a function when the button is tapped. For now, we'll just set that listener to a property we'll call props.whenPressed.
• Later, when we add <SubmitButton> to its parent, we'll specify what should happen when it's pressed.

<TouchableOpacity onPress={ props.whenPressed }>
</TouchableOpacity>

• We'll also pass a children parameter to stand for whatever is written between the <SubmitButton> tags. This will become what's written on the button.

<TouchableOpacity onPress={ props.whenPressed }>
  <Text>{ props.children }</Text>
</TouchableOpacity>

• Finally, we'll style the button with a rounded border and some spacing, so the entire SubmitButton.js component looks like this.

import React from "react";
import { Text, TouchableOpacity } from "react-native";
const SubmitButton = props => {
  return (
    <TouchableOpacity onPress={ props.whenPressed } style={ styles.button }>
      <Text style={ styles.buttonText }>{ props.children }</Text>
    </TouchableOpacity>
  );
};
export default SubmitButton;
const styles = {
  button: {
    height: 40,
    marginVertical: 5,
    borderColor: "teal",
    borderWidth: 2,
    borderRadius: 8,
    paddingVertical: 4,
    paddingHorizontal: 10
  },
  buttonText: {
    alignSelf: "center",
    color: "teal",
    fontSize: 20,
    fontWeight: "bold"
  }
};

• The result is a simple button you can use in various contexts.

2. Input.js

Next we'll make a simple <Input> component with a label and input field.

• We'll build this from React Native's default <View>, <Text>, and <TextInput> components.

import { View, Text, TextInput } from "react-native";

• Let's add a <Text> field for the label and a <TextInput> for the field. Wrapping them in <View> tags may seem unnecessary, but it will make styling easier later.

const Input = () => (
  <View>
    <View>
      <Text>Label</Text>
    </View>
    <View>
      <TextInput/>
    </View>
  </View>
);

• Of course, adding the word "Label" is kind of pointless; let's pass that text as a parameter with props so it can say something more specific later, like "Login" or "Password."

<Text style={ styles.label }>{ props.label }</Text>

• We can also pass parameters with props to specify the behavior of the <TextInput> field.
• autoCorrect fixes spelling; set this to false for the funky spelling in email addresses or passwords.
• secureTextEntry replaces typed characters with bullets; set this to true for sensitive information like passwords.
• placeholder is text that will appear in the field before you type, and can be a useful guide to the expected format (eg, mary@example.com for an email field). Note the word placeholder is not camelCase.
• value is the current content of the field as registered in JavaScript (not necessarily what's visible at first, which could be the placeholder text).
• Apart from these formatting props, there is a special listener we will add to capture the value of the field.
• onChangeText can be set to a function that acts whenever the user types in a field. We can use this to store the value in a JavaScript variable for future use.
• Let's put all these <TextInput> props together.

import React from "react";
import { View, Text, TextInput } from "react-native";
const Input = props => (
  <View>
    <View>
      <Text>{props.label}</Text>
    </View>
    <View>
      <TextInput
        autoCorrect={false}
        secureTextEntry={props.secureTextEntry}
        placeholder={props.placeholder}
        value={props.value}
        onChangeText={props.onChangeText}
      />
    </View>
  </View>
);
export default Input;

• Now we'll add styles, including a flexDirection: row to the containing <View> so the label sits on the left and field on the right. This will make rows of inputs easier to stack, which can be useful for complicated forms.

import React from "react";
import { View, Text, TextInput } from "react-native";
const Input = props => (
  <View style={styles.inputRow}>
    <View>
      <Text style={styles.label}>{props.label}</Text>
    </View>
    <View>
      <TextInput
        style={styles.input}
        autoCorrect={false}
        secureTextEntry={props.secureTextEntry}
        placeholder={props.placeholder}
        value={props.value}
        onChangeText={props.onChangeText}
      />
    </View>
  </View>
);
export default Input;
const styles = {
  inputRow: {
    flexDirection: "row",
    height: 40,
    width: 320,
    marginBottom: 4,
    justifyContent: "space-between",
    alignItems: "center"
  },
  label: {
    fontSize: 18,
    alignSelf: "flex-start",
    color: "teal"
  },
  input: {
    color: "black",
    paddingHorizontal: 5,
    fontSize: 18,
    alignSelf: "flex-end",
    height: 24,
    width: 230,
    backgroundColor: "azure"
  }
};

3. LoginForm.js

Now we'll combine these to make a form to enter the user's credentials.

• Import your new SubmitButton and Input components.

import SubmitButton from "./SubmitButton";
import Input from "./Input";

• useState hooks will help us keep track of the two items gathered in our form, namely the user's email and password. We'll import useState from the React library.

import React, { useState } from "react";

• The syntax for hooks is weird, but essentially we invent variables for email and password, and set them initially to empty strings.

LoginForm = props => {
  const [ email, setEmail ] = useState( "" );
  const [ password, setPassword ] = useState( "" );

• Let's add a different <Input> component for login and password, customizing the properties for each.

<Input
    label="Email"
    value={ email }
    placeholder="mary@example.com"
/>
<Input
    label="Password"
    value={ password }
    placeholder="******"
    secureTextEntry={ true }
/>

• Let's also add an onSubmit function to the <SubmitButton>, on the assumption that we'll need to do something when the form is completed. We're making this a prop so it can be customized in the parent WelcomeScreen.js.

<SubmitButton whenPressed={ props.onSubmit }>
	Login or Register!
</SubmitButton>

• We'll add one more property to each input: onChangeText. Setting this to our useState functions will guarantee that the email and password variables will update anytime the user types in those fields.
• ⚠️ Note that these are wrapped in anonymous arrow functions, so they don't trigger immediately.

onChangeText={  email => setEmail( email )  }
...
onChangeText={  password => setPassword( password )  }

• Now we'll put it all together in our LoginForm.js. We don't need any styles because we already baked them into our <SubmitButton> and <Input> components 🙂

import React, { useState } from "react";
import { View, Text } from "react-native";
import SubmitButton from "./SubmitButton";
import Input from "./Input";
LoginForm = props => {
  const [ email, setEmail ] = useState( "" );
  const [ password, setPassword ] = useState( "" );
  return (
    <View>
		<Input
		    label="Email"
		    value={ email }
		    placeholder="mary@example.com"
		    onChangeText={ email => setEmail( email )}
		/>
		<Input
		    label="Password"
		    value={ password }
		    placeholder="******"
		    secureTextEntry={ true }
		    onChangeText={ password => setPassword( password )}
		/>
		<SubmitButton whenPressed={ props.onSubmit }>
			Login or Register!
		</SubmitButton>
    </View>
  );
};
export default LoginForm;

Add the login form to your welcome screen

Let's make the login form the first thing users see when opening the app.

• In WelcomeScreen.js, import the <LoginForm>.
• 🎗Remember to add two periods in the ../ path if you are going from a screens directory up to root and back down to a components directory.

import LoginForm from "../components/LoginForm";

• Now that we have a nice <SubmitButton>, let's import another one of those too; we'll use it to help users navigate past the Welcome screen.

import SubmitButton from "../components/SubmitButton";

• Now we have a conundrum: we want our welcome screen to show the login form if the user is new:

const WelcomeScreen = () => {
  return (
	<View}>
		<LoginForm />
	</View>;
  )
};

• But we want to give the user a chance to view the rest of the app--in this case, a list of lost pets--if she's already logged in.

const WelcomeScreen = ({ navigation }) => {
  return (
    <SubmitButton 
		whenPressed={
			() => navigation.navigate( "Pets" )
		}
	>
	    See lost pets
    </SubmitButton>
  );
} ; 

Show a different welcome screen if the user is logged in

We'll do this by writing an if statement in our JavaScript. It will test for a variable we'll call isLoggedIn that we'll change from false to true when the user logs in.

• ℹ️ All the user has to do to log in at this point is submit her email and password. To make the conditional code easier to understand, we'll forego an actual authentication process.
• We'll need useState to keep track for whether a user is logged in, so import that.

import React, { useState } from "react";

• Let's create conditional JSX to put different content on the screen depending on the value of isLoggedIn.
• ⚠️ You can't put normal conditionals in JSX, so we'll put the if statement above the return command.

const WelcomeScreen = ({ navigation }) => {
	if ( !isLoggedIn ) { // If the user isn't logged in.
		return <LoginForm />;
	}
	else { // If the user is logged in.
		return (
		    <SubmitButton 
				whenPressed={
					() => navigation.navigate( "Pets" )
				}
			>
		    	See lost pets
		    </SubmitButton>
		);
	};
};

But we still need to determine the value of isLoggedIn in WelcomeScreen.js even though it's set in the child component LoginForm.js. How do we pass information from a child component to its parent?

Pass the "logged in" state to the parent component

As we know from previous tutorials, you can pass data down to child component by writing custom properties, or "props," as attributes into the tag in the parent.

However, you can also pass data upwards, from the child to the parent, if one of those attributes is a function called in the child but defined in the parent. This is called "lifting the state up."

Fortunately, we can use the onSubmit listener we already built into <LoginForm> to trigger the change in LoginForm.js and have it percolate back to WelcomeScreen.js.

• We'll start by putting the isLoggedIn state variable at the highest level it will be needed, in this case WelcomeScreen.js.

const [ isLoggedIn, setIsLoggedIn ] = useState( false );

• Then we'll define a function called logInUser to set our variable to true.

const logInUser = () => {
	setIsLoggedIn( true ) ;
};

• Then, still inside WelcomeScreen.js, we'll pass that function to <LoginForm>, where it can be triggered when the user submits her credentials.

return <LoginForm onSubmit={ logInUser } /> ;

• Putting it all together and adding some style, our WelcomeScreen.js now defines the variable (isLoggedIn), then defines a function to set it to true (logInUser), then returns different JSX content depending on its state.

import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { View, StyleSheet } from "react-native";
import LoginForm from "../components/LoginForm";
import SubmitButton from "../components/SubmitButton";
const WelcomeScreen = ({ navigation }) => {
	const [ isLoggedIn, setIsLoggedIn ] = useState( false );
	const logInUser = () => {
		setIsLoggedIn( true );
	};
	if (!isLoggedIn ) {
		return <LoginForm onSubmit={ logInUser } />;
	} else {
		return (
		    <SubmitButton whenPressed={() => navigation.navigate( "Pets" )}>
		      See lost pets
		    </SubmitButton>
		);
	}
};
export default WelcomeScreen;
const styles = StyleSheet.create({
  welcomeContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "paleturquoise"
  }
});