Creating Login Screen in React Native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

In this article, we will show you how to create a Login Screen using React-Native that will work for both iOS and Android Platform.

Software Prerequisites

This example is developed in MacOS. Before you begin, make sure you have all the software prerequisites are installed on your development machine.

You need ‘Homebrew’ package management software to get all other dependency packages. Usually all modern macOS are preinstalled with home-brew. By any chance, if you don’t have it on your machine, install it using following command. Learn more from official Homebrew website here.

Command Code . should open the project in VS code, if it’s not opening we need to configure the Path as below:

Launch VS Code.

Open the Command Palette (⇧⌘P) and type shell command to find the Shell Command: Install ‘code’ command in PATH command.

Restart the terminal for the new $PATH value to take effect. You’ll be able to type code . in any folder to start editing files in that folder.

Open index.ios.js delete all the code inside render function, and also remove the snippet inside the const styles. Anyways we are going to create everything form scratch.

Now let’s create a proper folder structure by creating new folder’s of required components, as of now we need a Login component and logo image to display on login screen src -> components -> images and Login as shown below.

Creating Login Component

Let’s create Login Component by creating new file inside Login Folder which we have created and name it as Login.js. Open Login.js and press Command Palette (⇧⌘P) and type ‘Change Language Mode’ and press 'enter', next type 'JavaScript React'

And type rnc for creating ‘React Native Class Component Template’

Replace 'MyClass' with 'Login' and save the file.

Next, Let’s import logo image to the ‘images’ folder which we created initially, You can just right click and Reveal in finder, Copy Paste the logo image. In this article we are using our StackTip logo. the final UI should look similar to the below image:

Let’s start creating UI of the LoginScreen, open 'Login.js' inside container view tag let’s add two more view containers and name them as 'loginContainer' and 'formContainer' and also set the styles as shown below

To compile via VS Code Editor, open debug editor(⇧⌘D) and select Debug iOS in dropdown and click on run. If it compile successfully you should find something like

Next let’s create a form component for LoginScreen which contains two textfield(Email and Password) and Login Button. Create new file inside Login folder and name it as LoginForm.js and follow the same steps for creating component which we did for Login Component above and type rnc, replace MyClass with LoginForm.

Let’s create a TextFiled’s for Email and Password and a LoginButton, we should import TextInput inside and TouchableOpacity for LoginButton inside react-native.

Inside View container tag paste the following snippet, which contains properties for Textfield like keyboardType, returnKeyType, placeholder, placeholderTextColor ,onSubmitEditing, secureTextEntry for secure password. For Login button we can use either react-native Button component or TouchableOpacity, we will use TouchableOpacity in this article.

Now we will import this Loginform component in Login.js, open Login.js file and paste the following line above class Login extends Component

import LoginForm from './LoginForm';

And initialise Loginform inside view formContainer tag,

<View style={styles.formContainer}>
<LoginForm />
</View>

Compile and check everything is working fine as expected, and should look like

One thing we haven’t taken care is when you tap on Email or Password, the keyboard will overlay on the TextField as below

People who are form iOS background will know the pain to handle this use case in Native UITextfield, this can be achieved easily in react native by KeyboardAvoidingView. Let’s replace the view tag of container with keyboardavoidingview and set the behaviors as 'Padding' as shown below

I am a self-driven software professional from Bangalore who live with a desire to set new examples, something that can create a unique signature of my own. I am a very friendly, fun loving person. I love to interact with people and make new friends who can bring difference in my life. I strive to become a better programmer.

Discussions

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.

500

8Comment threads

0Thread replies

0Followers

Most reacted comment

Hottest comment thread

500

newestoldestmost voted

Emircan Arıkök

lot of bugs….

Vote Up10Vote Down Reply

Jan 1, 2018 8:15 PM

nbcvnxcmnvb

heh!

Vote Up0Vote Down Reply

Apr 16, 2019 11:11 AM

Fongoh Tayong

Link to source code on github will be appreciated.

Vote Up0Vote Down Reply

Jan 30, 2019 3:53 AM

Pmr

Thank you !!!!

Vote Up0Vote Down Reply

Dec 12, 2018 10:27 PM

Adrian Albu

do you test the steps you propose? :)

Vote Up0Vote Down Reply

Sep 27, 2018 1:30 PM

Hiral Kahar

Yes, i also didn’t get login form. I am new in react native. So please help to out of it

Vote Up0Vote Down Reply

Jan 22, 2018 1:57 PM

Code Monkey

I’m completely new to React (and honestly to JS for the most part as well) so there’s a couple of bugs, that I’m not sure are attributable to versioning changes. 1) The most noticeable one is that there is no formContainer Style which is referenced in Login.js – either add… Read more »

Vote Up0Vote Down Reply

Jan 20, 2018 9:59 AM

Yasir

why did you use StatusBar ? also how to get the values from input when button clicked