How to build a React Native App using Firebase. (Part 3)
Updated Oct 25: Switched from using “Callbacks” to “Promises — ( validate.js, routes.js and Step 6e updated)
Please note that this tutorial assumes you have some JavaScript or React Native experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.
In Part 2, we created the app’s directory, redux actions, reducers and api. In this tutorial, we will create our scenes and inject the Redux store into the app.
Now, that we have gotten that out of the way, LET THE CODING BEGIN!
Step 6: Frontend (Components, Utils, Scenes and Styles)
Step 6a: Fonts
Fonts
For this app, we will be using the Roboto fonts which can be downloaded from Google Fonts. In the app folder create a new directory titled ‘assets’, in that directory, create a fonts folder and move the downloaded fonts into it.
Step 6b: Styles
Theme
Before we begin creating our scenes, we will create the theme file, in this file we will declare our font sizes, colors, font family and more. In the styles folder, create the theme.js file and paste the code below.
Step 6c: Utils
Validate
In the auth module directory, create the validate.js file in the utils folder and paste the code below. This file has functions that validates the users data, it makes sure each field is not empty, validates the email address and password. After validation, it returns the success variable and the error object.
Step 6d: Components
AuthTextInput
In the auth/components directory, create the AuthTextInput folder and create index.js and styles.js file in that folder and paste the code below. This file creates a view that contains a label, TextInput and an error message label. The Form elements used in this view are from the React Native Elements package.
Form
In the auth/components directory, create the Form directory and create index.js and styles.js file in that directory and paste the code below. This file creates a Form component that accepts an array of fields and creates the TextInput for each field, renders a button and also in charge of validating the data and extracting the data to be passed to the API.
The important things to focus on in this file is the way the state variable is been created in the constructor function and the extracting of the field value in the extractData function.
Splash
Our Splash scene consists of a View and an Activity Indicator to indicate that the app is loading, this view is visible while our app checks if the user is logged in or not. In the app/components directory, create the Splash directory and create index.js and styles.js files in that folder and paste the code below.
Step 6e: Scenes
In the auth/scenes directory, create the Auth directory and create Welcome.js, Register.js, Login.js, ForgotPassword.js and styles.js files in that folder.
Welcome
Our Welcome scene consists of a View with 2 buttons, login and register.
Register
In this scene we are using our Form component, we pass it the onSubmit function which calls the register function in our actions file.
If the function returns successfully, the app navigates to the Main scene.
If the function returns an error, our onError function is in charge of displaying an error message.
Login
This file works just like the Register file but calls the login function in our actions file instead and if the function returns successfully, the app either navigates the user to the CompleteProfile scene or the Main scene.
Forgot Password
Complete Profile
In the auth/scenes folder, create the CompleteProfile folder and create CompleteProfile.js and index.js file in that folder and paste the code below.
Home
In the home/scenes directory, create the Home directory and create Home.js, index.js and styles.js files in that folder and paste the code below.
In this scene we are adding a log out button.
Step 7: Wrap Up
Routes
In the app/config folder, create the routes.js file. In this file we will set up our Router and Scenes, check React Native Router repo for more information about the basic setup.
The first thing we will do is import our scenes and components.
The second thing we will do is import our store and the checkLoginStatus action from our auth actions file to check if the user is logged in or not.
Code Breakdown
In our constructor, we set up two state variables, isReady and isLoggedIn both with a default value of false.
In our componentDidMount, we call the checkLoginStatus function located in our auth module actions file, this function will return a boolean value. If a true value is returned, indicating the user is logged in, we update the isReady and isLoggedIn state variable values to true.
If a false value is returned, indicating no user is currently logged in, we update the isReady state variable value to true and the isLoggedIn state variable value to false.
Our render function renders the Splash scene while the isReady state variable is false, this scene consists of a View and and ActivityIndicator, this scene remains visible until the isReady state variable changes to true, then our Router is rendered, the isLoggedIn state variable is used to determine which scene is to be set as the initial scene.
If the user is logged in (isLoggedIn = true), the Main scene is rendered else if the user is not logged in (isLoggedIn = false), the Auth scene is rendered.
Update App.js
The App.js file is the entry point into our app. In this file, we import our routes and store. We then connect our provider to our store which will let our app scenes access our app’s state and then wrap our app’s Router with our Provider. We will also load and cache our custom fonts.
In Part 4, we will add Facebook login functionality.
Thats all folks!
Related Tutorials
- Tutorial 1: React Native Redux Boilerplate
- Tutorial 2: React Native Redux with CRUD operations
- How to build a React Native App using Firebase. (Part 1) (Setup)
- How to build a React Native App using Firebase. (Part 2) (Backend)
- How to build a React Native App using Firebase. (Part 4)(Facebook Login)
- How to build a React Native App using Firebase. (Part 5)(CRUD)
Other Tutorials
- Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
- Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
- Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package
Change log
- Oct 25: Switched from using “Callbacks” to “Promises” — ( validate.js, routes.js, and Step 6e updated)
- May 11: Added Step 5 (CRUD) and updated Register View.
- March 12: Refactored code and removed AuthContainer component.
- Feb 28: Added Home Scene and updated routes.js file [Step 6 and 7]
