Adding a form section

Next, we’re going to add a form that includes a single email input field. For that, we’re going to use the InputField component from the react-native package. The InputField component will contain several props for labels, color, border, etc., as shown in the snippet below:

A quick glance at what this looks like:

Adding a submit button

In this step, we’re going to add a ‘submit’ button to the ForgotPassword.js screen in order to submit our email address. For that, we’re going to make use of the NextArrowButton component that we implemented in earlier tutorial parts. We need to add the NextArrowbutton component to the bottom of the screen:

<NextArrowButton handelPress={this.submitEmail} disabled={false} />

</KeyboardAvoidingView>

Here the submit button implemented from NextArrowButton component is set with two props. One is handlePress , set to the submitEmail function. When handlePress is triggered by the child component, the submitEmail function will be triggered in the parent component. The second prop is a disabled prop, which is set to false in order to enable the button.

Here’s what this will look like:

Configuring the form submission

Now we’re going to configure the form submission after pressing the submit button. For that, we’re first going to define an emailAddress state variable that handles the input from the InputField that we added earlier. The emailAddress state is defined as shown in the code snippet below:

Now we need to create a function to handle the change of the input variable when something is entered in the InputField component. For that, we’re going to create a function called handleEmailChange , which takes in a parameter called email and sets the emailAddress state value to whatever a user types in the email InputField component. The function is provided in the code snippet below:

Now we need to add the handleEmailChange function to the onChangeText event of the InputField component: