Contents

1. Introduction ............................................................................................................................................ 2
Special features: .................................................................................................................................... 2

2. Installation of the app ......................................................................................................................... 3

Environment setup ............................................................................................................................... 3

3. Firebase Environment settings .......................................................................................................... 4

Step 1. Create Firebase account ........................................................................................................ 4

Create Firebase Project.................................................................................................................... 5

Step 2. Enable Phone Authentication .............................................................................................. 6

Step 3. Create IOS & Android project in FIREBASE console....................................................... 7

Step 4. Add google-services.json to project ................................................................................. 11

Step 5. Enable Storage for upload and store images .................................................................12

Step 6. Create Database .....................................................................................................................13

4. Screenshots app ...................................................................................................................................15

Splash screen.........................................................................................................................................15

Walkthrought ........................................................................................................................................16

Phone screen ......................................................................................................................................... 17

VerificationCode Screen .....................................................................................................................18

DisplayName screen ............................................................................................................................19

Image screen ........................................................................................................................................ 20

Birthday screen .....................................................................................................................................21

Home Screen ........................................................................................................................................ 22

Network popup ................................................................................................................................... 23

5. Features ................................................................................................................................................. 24
Multi Languages:................................................................................................................................. 24

Made with ❤ by HappyifyThemes

1. Introduction
You are developers who want to develop an IOS & Android app and don’t want to waste
your time building full flow Registration, Login & Sign-out for your customer, and still
save all your data in your firebase database, so this app is for you. The app consists of
mobx (state management) that makes state management simple and also has an option
to show the screen you just visited when you close the app with this awesome library with
persistence.

Special features:
• Multi languages
• Network connection info
• Mobx – persist data, state management

This is a fully functional app that you can publish on Google Play and App Store the same
day. All the configuration is in only one file.

The app includes 9 screens:

1. Splash screen
2. Walkthrough
a. 3 design screen with icons and titles
3. Phone Screen
a. Authenticate with firebase with phone number (sign in & sign up)
b. Country choice modal
c. Auto verified sign in
4. Verification Screen
a. friendly confirmation code
b. resend SMS
5. DisplayName Screen
a. Write you display name
6. Image Screen
a. Image choice
b. Select photos from gallery
c. Take photos from camera
d. Upload image to firebase storage
7. Birthday Screen
a. Choose your birthday from native date choice
8. Home Screen
a. Show all user details with awesome design
9. Network Connection popup
a. Listen to network changes. If network is offline show offline with error

Made with ❤ by HappyifyThemes

2. Installation of the app

Environment setup

You can install npm or yarn, whatever you prefer using.

For NPM:

Install node and npm. Download it from here.

To verify your installation run

• Node –version
• Npm –version

For Yarn

Install yarn. Download it from here.

To verify your installation run

• Yarn –version

Next, place the downloaded code from codecanyon in some place on your computer. Try
to avoid using Desktop or Downloads.
Open the folder react-native-firebase-phone-auth and open your cmd and run
• For Android:
React-native run-android
• For IOS:
run in from your xcode.

Note: You can run it in your real device (open developer options and enable usb
debugging) or in simulator.

Made with ❤ by HappyifyThemes

3. Firebase Environment settings

Step 1. Create Firebase account

Firebase allows us to use firebase authentication to sign in a user by sending an SMS

message to the user’s phone. The user sign in uses a one-time code contained in the sms
message.

In addition, all the data (in our app – user data) is stored in firebase realtime database

Let's get started. Create an account in Firebase with your google account, then navigate to
firebase
https://firebase.google.com/

• Press on GET STARTED

Made with ❤ by HappyifyThemes

 Create Firebase Project.

• Press Add Project

Type any project name you want, accept the terms and press create project.

Made with ❤ by HappyifyThemes

Step 2. Enable Phone Authentication

Press on Authentication in left side menu bar and then Sign-in method.

You need to enable phone authentication.

Press on phone: enable and save.

Made with ❤ by HappyifyThemes

Step 3. Create IOS & Android project in FIREBASE console

Now, you need to add Android & IOS project into firebase console.

Press Project Settings (icon on left side.)

Let’s add android project (you can do ios the same way)

Press on Add Firebase to your android app

Made with ❤ by HappyifyThemes

Let’s fill:

1. Android package name

you can find under android/app/build.gradle

In this project android package name

com.react_native_firebase_phone_auth

2. Debug signing certificate SHA-1 (optional)

You need to generate sha1 of your debug apk.
Go to folder android/apk/debug, then you will see app-debug.apk.

You have 2 ways to get the SHA-1:

1. Generate with key tool command
Navigate to the folder android/apk/debug and run in cmd
keytool -list -printcert -jarfile app-debug.apk

Made with ❤ by HappyifyThemes

 you will see the SHA-1, copy it and paste into debug signing certificate sha1 section

2. Generate with android studio

o Open android studio
o Run your project
o Click on Gradle menu
o Expand Gradle Tasks tree
o Double click on android -> signing Report and you will see the result of sha1

Then, after you enter it, please press register app

Made with ❤ by HappyifyThemes

Press next and next and then skip this step or wait until it’s finished checking

You successfully added android project to your app.

Made with ❤ by HappyifyThemes

Step 4. Add google-services.json to project

Press on google-services.json to download google-service.json.

After you download it, drag and replace the one that already exists in project (or if it’s
new project so drag it) under android/app/google-service.json

Made with ❤ by HappyifyThemes

Step 5. Enable Storage for upload and store images

To allow users to store their images in firebase, you need to enable storage setting.

Press on Storage in left side menu bar, then press Get Started

You will see popup that explains that only users who sign in with firebase can write/read
from storage. Press on Got it

You successful set storage settings

Made with ❤ by HappyifyThemes

Step 6. Create Database
For storing data in our app and retrieving this data we need to create database.

In firebase you can choose to use firebase or firestore. (our app works and communicates
with Firebase, so if you want to communicate with Firestore you should change function.
Check it here).

Press on Database in left side menu bar, then press on Create database

For testing purposes you can choose to start in For publishing or production purposes you can
test mode that allows anyone to be able to choose to start in locked mode that allows only
read or write in your database. users who sign in to read or write from
database.

Made with ❤ by HappyifyThemes

You successful create new database

Made with ❤ by HappyifyThemes

4. Screenshots app

Splash screen

Made with ❤ by HappyifyThemes

 Walkthrought

Made with ❤ by HappyifyThemes

 Phone screen

Made with ❤ by HappyifyThemes

 VerificationCode Screen

Made with ❤ by HappyifyThemes

 DisplayName screen

Made with ❤ by HappyifyThemes

 Image screen

Made with ❤ by HappyifyThemes

 Birthday screen

Made with ❤ by HappyifyThemes

 Home Screen

Made with ❤ by HappyifyThemes

 Network popup

Made with ❤ by HappyifyThemes

5. Features
Multi Languages:
you can allow users to show the app in same language as their phone.
You just need to add the language you want and add support to their language.
Open project and below locales folder add the file with language you want.

The name of the file should be short name of language. You can find the charset list here.

Then add the short charset and the file in i18n.js file

Then copy all the keys from en.js file and copy to you new language and replace their value
in translate to their keys. As you can see here new, we add new language support: French(fr)

Made with ❤ by HappyifyThemes