Creating a Login Screen Component

First of all, we need to create a Login.js file in our screens folder. Then, we can get started with coding the Login.js component with the general starter code shown in the code snippet below:

Here, different React Native components and modules are imported from the package as well as a color CSS file for styling. The Text component with login is wrapped around the ScrollView and ViewComponents . Some styles are also added to the wrapper.

Next, we need to include Login.js in App.js by replacing the LoggedOut component. To do that, we need to first import the Login component and add it to our render function, as shown in the code snippet below:

As a result, we’ll see the following screen in our emulator:

Next, we need to bootstrap the screen wrapper with the KeyboardAvoidingView and ScrollView components to handle the form that makes the screen flexible with a virtual keyboard:

We also need to add some styles to our components:

We’re adding CSS styles to following components in the view:

wrapper : A global wrapper that contains and integrates styles in all children components.

: A global wrapper that contains and integrates styles in all children components. scrollViewWrapper : Adding some margin to make space between the screen and device by integrating styles to scrollViewWrapper .

: Adding some margin to make space between the screen and device by integrating styles to . avoidView : Making space between the left, right, and top device borders by integrating styles to avoidView .

: Making space between the left, right, and top device borders by integrating styles to . loginHeader : Adding some font styles like weight, size, and color to the loginHeader component.

As a result, we get the following screen in the emulator: