🌴 Kimeowgee🌴

"we can do it your way right now"

Mobile Application, React Native

React Native User Login & Sign Up Example Tutorial


React Native is a framework of building native mobile apps using javascript and react. It let’s you create both ios and android project at the same time. Today we will build a login and sign up project. If you came here this far you are interested making one. Let’s dive now to the project.

Project Description

We will build a simple android project user registration and login using email and password. In this project we need two pages or activities. One is Login Page and Second is the Sign up Page. The user need to sign up a valid email address and password and then will use it to login to the application. For the database part we will use the local database of the app which is the SQLite.

“SQLite is an in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. The code for SQLite is in the public domain and is thus free for use for any purpose, commercial or private. SQLite is the most widely deployed database in the world with more applications than we can count, including several high-profile projects” – SQLite.org

In making my react native projects I am using Visual Studio Code. There’s a lot of text editor in the market now including Sublime, Atom, Notepad++ and more. It’s up to you what to choose. I love using VSCode as it is free and available for almost all platforms – Linux, macOS, and Windows. We also need Node.js for the backend part.

Process of the project:

1. Create a fresh react native project. If you’re new in making React Native projects you need to run Node.js command prompt and paste the code below. Choose the folder you want to save your project.

If you’re successful making the project you will see something like this in the command prompt.

2. Let’s start now and open your text editor. Under your project, create a new folder ‘src‘ for source. And under ‘src‘, let’s create another folder for ‘pages‘ where we will put our js files. Create a Login.js and Signup.js files under ‘pages‘. I also create a ‘components‘ folder under source since i will use one file for login and sign up page then create the Form.js file under components. And lastly i create Routes.js file for navigation under ‘src‘.

3. Head on to Form Acitivity. Now add AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity, AsyncStorage and Keyboard component in import block.

4. We need Navigator for redirection to other screens. I use React native Router Flux. Just run it again in the Node.js command prompt.

5. Create a class activity for Form
As i mentioned above i will use one js file for login and sign up.

6. Creating constructor with props in Form class

7. Create SaveData function in Form Activity
We need to get the input email and password from textInput using state. And then use the details to save upon signing up.

8. Create ShowData function to show registered email and password.

9. Add render’s return block in your Form Activity. Set a Container View, inside that Container view place two TextInput and one TouchableOpacity component. Calling the SaveData function on touchableOpacity onPress. Passing props (property) will determine if you click Sign up or Login button.

10. Add CSS Styling.

11. Complete source code of Form Activity

We have now a Form Activity where we can call for Login and Sign up pages. This the best and clean way for me since i can just reuse the activity and call it for both pages. Click here for the continuation…

2 Comments

  1. Jushcare

    Hello…

    This tutorial couldn’t work in my window environment. using the latest version of React-Native

  2. Raj

    Great Post! Thanks a lot!
    Question: Can I follow the same blog for creating a login and registration screen for iOS as well?

    Thanks!

Leave a Reply

Theme by Anders Norén