How to build a React Native App using Firebase. (Part 2)

Updated Oct 25: Switched from using “Callbacks” to “Promises” — ( Folder structure changed, api.js file deleted, actions.js and reducer.js 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 1, we registered our app with Firebase and Facebook and also created our app and installed the required dependencies. In this tutorial, we will create the app’s directory, redux actions, reducers and api.

Now, that we have gotten that out of the way, LET THE CODING BEGIN!

Step 3: Create Folder Structure

In your project root create an app folder. For this project, I will be organizing the directory by feature/module instead of by type. To find out more about organising by feature/module, read this article or this or this or this to get a better understanding and see the advantages of organizing your project this way.

Setup the app folder with folders and files just like the image below.

Before we continue, we need to update the index file in our auth and home modules.

Update both index files with the code below.

modules/module_name/index.js

Step 4: Setup

In this step, we will set up the back bone of our app

Configuration
In the config folder, create the constants.js file and populate it with your Firebase app config information and your Facebook app id.

config/constants.js

Firebase
In the app/config folder, create a firebase.js file. In this file we will create a firebase singleton by creating an instance of the Firebase SDK and configure it with our firebase app config info so we can import it from anywhere in our app.

app/config/firebase.js

Reducer
The reducers are the in charge of updating the state of our app. In the redux folder, create the rootReducer.js file. In this file, we will import the reducers from our modules and use redux combineReducers function to merge them together into a single state object that we will later use to create our redux store.

app/redux/rootReducer.js

Store
In the redux folder, create the store.js file. In this file we will create our redux store by importing our root reducer and injecting our store enhancers, i.e. Redux Thunk.

app/redux/store.js

Step 5: Backend ( Actions and Reducer)

Actions
Before we create our actions, we will declare the action types to be used, in the auth module folder, update actionTypes.js file.

modules/auth/actionTypes.js

In the auth module folder, update actions.js file. Each function in our actions file is in charge of calling the appropriate Firebase API function and carrying out the right action based on the response returned.

The register function takes in the users data and a callback function as parameter, it extracts the email password and username from the data object and calls Firebase createUserWithEmailAndPassword function to create a new user. If successful, the username and the uid for the newly created user is passed to the createUser function in order to create the user object in the Realtime Database.

The login function is similar to the register function but it calls Firebase signInWithEmailAndPassword function to log the user in. If successful, the user object is returned. The user object is then passed to the getUser function in order to retrieve the user object form the Realtime Database.

modules/auth/actions.js

Reducer
In the auth module folder, update reducer.js file. Our reducer will be responding to 2 different action types, LOGIN_SUCCESS, LOGGED_OUT. It’s up to the reducer to decide if it needs to modify the app state or not based on the action type.

LOGGED_IN
For this action type, the reducer sets the isLoggedIn state variable to true, sets the user state variable and stores the user object in the AsyncStorage.

LOGGED_OUT
The reducer sets the isLoggedIn state to false, sets the user state variable to null and removes the user object from the AsyncStorage.

modules/auth/reducer.js

In Part 3, we will create our scenes and inject the Redux store into the app.

Thats all folks!

Related Tutorials

1. Tutorial 1: React Native Redux Boilerplate
2. Tutorial 2: React Native Redux with CRUD operations
3. How to build a React Native App using Firebase. (Part 1) (Setup)
4. How to build a React Native App using Firebase. (Part 3) (Frontend)
5. How to build a React Native App using Firebase. (Part 4)(Facebook Login)
6. How to build a React Native App using Firebase. (Part 5)(CRUD)

Other Tutorials

1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package

Change log

1. Oct 25: Switched from using “Callbacks” to “Promises” — ( Folder structure changed, api.js file deleted, actions.js and reducer.js updated)
2. May 11: Added Step 5 (CRUD)
3. May 9: Updated ‘createUserWithEmailAndPassword’ and ‘login’ functions in api.js file. (This fixes Firebase 5.0 breaking change and immediately calls the createUser function instead of redirecting to the CompleteProfile View)