Build React Native Fitness App #5: installing Firebase in React native
Tags: firebaseandreactn
Published: 2020-01-31 15:46:34

---
title: Build React Native Fitness App #5: installing Firebase in React native
published: true
date: 2020-01-31 08:34:25 UTC
tags: firebase-and-react-n
canonical_url: https://kriss.io/build-react-native-fitness-app-5-installing-firebase-in-react-native/
cover_image: https://cdn-images-1.medium.com/max/1024/0*RLmKafZTuSpJzTAV.png
series: Build React native Fitness app 
---


for installing Firebase in React native. We did on implement UI for register and login section now we can go deep to backend side with using Firebase is easy and simple we gonna setup on both iOS and Android this take over for all of this chapter if your have experienced just skip this chapter

this tutorial is fourth chapter of series build fitness tracker this app use for track workouts, diets, or health activities and analyze data and display suggestion the ultimate goal is to create food and health recommendation using Machine learning we start with creating app that user wants to use and connect to google health and apple heath for gathering everything to create dataset that uses for train model later I start with ultimate goal but we will start with create react native app and set up screen navigation with React navigation. inspired by [React native template](http://instamobile.io/) from instamobile

the first thing that we required is Firebase account has free tier your can using with comfortable and we using react native firebase most popular firebase package for react-native

first, we install react-native-firebase package

```
yarn add react-native-firebase
```

add Firebase cacao pod

```
target 'fitness\_master' do
  # Pods for fitness\_master
  pod 'Firebase/Core', '~> 6.13.0'
  pod 'Firebase/Auth', '~> 6.13.0'
```

then run

```
cd ios ; pod install ; cd ..
```

close packager terminal and run again

```
react-native run-ios
```

#### Firebase part

create new firebase project

![](https://cdn-images-1.medium.com/max/1024/0*fRKbghMVhkH_XWoD.png)

#### For iOS

copy iOS bundle identifier from Xcode

![](https://cdn-images-1.medium.com/max/1024/0*b8B4hDPYiubN3l3h.png)

then paste on Firebase

![](https://cdn-images-1.medium.com/max/827/0*bRYWIAJkVAvN7-Pf.png)

download then add back to Xcode

![](https://cdn-images-1.medium.com/max/786/0*pquZypPE7JuchPhT.png)

here the location

![](https://cdn-images-1.medium.com/max/276/0*cBKfMiTkl-QRr2o1.png)

To using SDK in-app, import firebase to AppDelegate.m file:

![](https://cdn-images-1.medium.com/max/351/0*E6moCHjwGAk8aOSO.png)

now we can use Firebase on iOS app your can try by using some firebase function

#### For Android

run this command for android only we don’t want to ruin iOS part

```
react-native link react-native-firebase --platforms android
```

now we add a new app

![](https://cdn-images-1.medium.com/max/660/0*gMWwRpeUNzjcA8Ck.png)

next download google-services.json then add to android/app

![](https://cdn-images-1.medium.com/max/730/0*GBgQkhtlAg14TQ6B.png)

now we can add a dependency open android/build.gradle add folling

```
buildscript {
  // ...
  dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.2.0'
  }
}
```

then activate plugin on android/app/build.gradle add this to last line

```
apply plugin: 'com.google.gms.google-services'
```

last step add firebase package in android/app/build.gradle

```
implementation project(':react-native-firebase')

// Firebase dependencies
implementation "com.google.android.gms:play-services-base:16.1.0"
implementation "com.google.firebase:firebase-core:16.0.9"
```

all done try close packager and build the project again

#### conclusion

this chapter we learn how to setup Firebase on both Android and iOS is pretty simple now in next chapter we can register and log in with Firebase

_Originally published at _[_Kriss_](https://kriss.io/build-react-native-fitness-app-5-installing-firebase-in-react-native/)_._

* * *