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
