Installing libraries

To begin, create a new React Native project and install the necessary libraries as described in the following steps. You’re going to need to open a terminal window for this process.

After installing the dependencies, please make sure to follow instructions given in their official documentation to configure the native binaries to make them work with React Native.

These instructions may change in the future, so it’s better to follow the official documentation.

iOS users, make sure to install pods via cocoapods wherever necessary.

Creating reusable form elements

In this section, let’s create some reusable form components such as FormInput and FormButton . These UI components are going to be used in two screens: Login and Signup.

These reusable form components will provide the advantage of allowing us to not have to write the same common code again and again for both screen components.

At the root of this React Native app, create a new directory called src/ and inside it create a new directory called components/ .

Inside this directory, create a new file called FormInput.js . This component is going to provide a text input field for the screen components to use, and for the user to enter the credentials.

Start by importing the following statements:

Dimensions , from the React Native core API, provides a way to get the screen width and height. Instead of giving a fixed width and height for a text input field, we can let this API calculate it for us. You can get the application's screen width and height by adding the following snippet:

Next, export the default function FormInput that’s going to have some props:

The ...rest prop must be the last prop passed as a parameter; otherwise, you’re going to get an error. The purpose of passing this prop is to allow the component to have other props values.

Lastly, define the corresponding styles for this reusable component:

The next reusable component is going to be in a separate file called FormButton.js . It’s similar to FormInput , except that this component is going to be used to display a button on the screen.

It’s also going to use the width and height of the screen using Dimensions from React Native.

Here’s the complete code snippet:

The react-native-paper UI library has three modes to display a button:

text : a flat button without background or outline

: a flat button without background or outline outlined : a button with an outline

: a button with an outline contained : a button with background color and elevation shadow

For different purposes, you’re going to make use of these different button modes. You’ll see them in screen components later. That’s why it’s better to accept the value as a prop (as mentioned in the above snippet: modeValue ).

Create a login screen

To being implementing screens in the current app, start by creating the most essential screen—the LoginScreen . This is going to be the initial route a user will take when authorizing their credentials to enter the app and use its features.

Here’s a demo of the screen you’re going to achieve in this section.

Inside src/ , create another directory called screens/ . In this directory, we’re going to store all screen components. Inside it, also create a LoginScreen.js file.

The login screen is going to have four main UI elements:

two text input fields for a user’s email and password

one login button and one button to navigate to the sign up screen (in case the end-user is not yet registered to use the app)

Start by importing the following statements:

Inside the LoginScreen functional component, define two state variables:

email

password

Both of these variables are going to be used with the FormInput component to obtain the value of the user credentials. By default, they’re going to have an empty string as its value.

Do note that each of the FormInput elements has different props being passed. For example, the email component has autoCaptialize set to none . The password component has secureTextEntry set to boolean true. Including others, this is where ...rest becomes helpful (as you have seen in the previous section).

The onChangeText prop accepts a callback that’s invoked whenever the text of the input field changes.

Lastly, here are the styles:

Do notice that you’re using a JavaScript object to define styles for each component so far. StyleSheet in React Native provides an API to create styles inside the component file. It takes a JavaScript object as it does above and returns a new StyleSheet object from it. There are no classes or ids in React Native like in web development. To create a new style object, you can use StyleSheet.create() method.

The way you’ve defined styles by creating an object is the preferred way. Not only does it help you organize styles and keep them separate, but these styles when defined in this manner are also sent through the native render bridge only once (unlike inline styles).