Integrating Firebase with React Native
Tags: reactnative, firebase, javascript, tutorial
Published: 2021-09-08 18:21:15

---
title: Integrating Firebase with React Native
published: true
description: In this tutorial, you'll learn how to start building your cross-platform mobile app MVP with the power of Firebase and React Native.
tags: reactnative, firebase, javascript, tutorial
canonical_url: https://blog.jscrambler.com/integrating-firebase-with-react-native/
cover_image: https://blog.jscrambler.com/content/images/2021/08/jscrambler-blog-integrating-firebase-with-react-native.jpg
---

Firebase is a Backend as a Service (_BaaS_) that provides an advantage to mobile developers who use React Native for developing mobile applications. As a React Native developer, by using Firebase you can start building an MVP (minimum viable product), keeping the costs low and prototyping the application pretty fast.

In this tutorial, we will learn how to get started by integrating Firebase in a React Native application. We will also create a small application from scratch with the help of Firebase & React Native to see how they work together.

## Getting Started

[Firebase](https://console.firebase.google.com/) is a platform that got acquired by Google and has a healthy and active community. Most users in this community are web and mobile developers as Firebase can help with mobile analytics, push notification, crash reporting, and out-of-the-box it also provides email as well as social authentication.

To get started, you will need a target mobile OS, whether you choose to go with iOS or Android or both. Please refer to the [React Native official documentation](https://reactnative.dev/docs/getting-started) if you are setting up a React Native development environment for the first time. You will need SDK tools and Android Studio especially to set up a developer environment for Android. For iOS, you need Xcode installed on your macOS. You will also need:

- [Nodejs](http://nodejs.org) (`>= 12.x.x`) and npm/yarn installed
- [react-native-cli](https://www.npmjs.com/package/react-native-cli) (`>= 2.0.1`)
- Or use npx

React Native is distributed as two npm packages, `react-native-cli`, and `react-native`. We are going to use the `react-native-cli` to generate an app. Begin by installing it:

```shell
npm install -g react-native-cli
```

Now, let’s create a new React Native project called “rnFirebaseDemo”:
```shell
react-native init rnFirebaseDemo
```

When the above command is done running, traverse into the project directory using `cd rnFirebaseDemo`. Now, let’s check if everything is working correctly and our React Native application has been properly initialized by running one of the following commands:

```shell
# For iOS
Yarn run run-ios

# For Windows/Unix users
yarn run android
```

This command will run the default screen as shown below in an iOS simulator or Android emulator but it will take a few moments since we are running it for the first time.

![ss1](https://i.imgur.com/JJiLnvt.png)

## Configuring a Firebase Project

To start a new Firebase app with a frontend framework or a library, you need the API keys. To obtain these API keys, you need access to a Firebase project. A new Firebase project is created from the [Firebase console](https://console.firebase.google.com/).

![ss-new-1](https://i.imgur.com/jICRUYU.png) 

*Initially, you can create a free tier Firebase project known as Spark Plan. To know about pricing and more information on Firebase plans, take a look [here](https://firebase.google.com/pricing).*

Now, click on the **Add project** button and then enter the name of the Firebase project.

![ss-new-2](https://i.imgur.com/XsRCTiO.png) 

Then, click the Continue on the step 2 screen.

![ss-new-3](https://i.imgur.com/IpPWQCn.png) 

On the step 3 screen, you can leave everything as default and press the **Create project** button to create a new Firebase project.

![ss-new-4](https://i.imgur.com/UN0M6Cp.png)

When the loading finishes, press the button and you’ll be welcomed by the main dashboard screen of the Firebase project.
![ss-new-5](https://i.imgur.com/vAgO7E6.png) 

## Adding Firebase to a React Native project

The [react-native-firebase library](https://rnfirebase.io/) is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps.

To add it to our existing React Native application, we need to install the following dependency:

```shell
yarn add @react-native-firebase/app
```

To connect the iOS app with your Firebase project’s configuration, you need to generate, download, and add a `GoogleService-Info.plist` file to the iOS bundle.

From the Firebase dashboard screen, click on Project Overview > Settings and in the General tab, go to Your Apps section. Click on the **Add app** button. A modal appears as shown below.

![ss6-new](https://i.imgur.com/BmWaBAL.png) 

Select iOS in the modal and then, in step 1, enter your app details and click the **Register app** button.

![ss7-new](https://i.imgur.com/S6n7uJA.png) 

In step 2, download the `GoogleService-Info.plist` file.

Then, using Xcode, open the projects `/ios/{projectName}.xcworkspace`.

Right-click on the project name and "Add files" to the project:

![ss8-new](https://i.imgur.com/63gRVx0.png)

Select the downloaded `GoogleService-Info.plist` file from your computer, and ensure the "Copy items if needed" checkbox is enabled.

To allow Firebase on iOS to use the credentials, the Firebase iOS SDK must be configured during the bootstrap phase of your application. Open the `/ios/{projectName}/AppDelegate.m` file and, at the top of the file, add:

```c
#import <Firebase.h>
```

Within the same file, add the following at the top of the `didFinishLaunchingWithOptions` function:

```c
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure]; 
  }
// … the rest of the function body remains the same
```

Next, rebuild the iOS app. Execute the following commands:

```bash
cd ios/ 
pod install --repo-update 
cd .. 
npx react-native run-ios
```

To connect the Android app to your Firebase project’s configuration, you need to generate, download and add a `google-services.json` file to the iOS bundle.

From the Firebase dashboard screen, click on Project Overview > Settings and in the General tab, go to the “Your Apps” section. Click on the Add app button and then click the button with the Android icon in the modal.

In Step 1, enter the details of your app and then click the button “Register app”.


 The "Android package name" in the image below, must match your local projects package name which can be found inside of the `manifest` tag within the `/android/app/src/main/AndroidManifest.xml` file within your project.

![ss11](https://i.imgur.com/sGZcpgj.png) 

In step 2, download the `google-services.json` file and place it inside of your React Native project at the following location: `/android/app/google-services.json`.

To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory. Add the `google-services` plugin as a dependency inside of your `/android/build.gradle` file.

```java
buildscript {
  dependencies {
    // ... other dependencies
    // Add the line below 
    classpath 'com.google.gms:google-services:4.3.8'
  }
}
```

Lastly, execute the plugin by adding the following to your `/android/app/build.gradle` file:

```java
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line
```

Next, rebuild the android app. Execute the following commands:

```shell
npx react-native run-android
```

The package is used to configure and install Firebase SDK in a React Native project. To use any of the Firebase features such as Auth, Firestore, Storage, or Realtime Database, you have to install the individual packages from the React Native Firebase library.

In this tutorial, let’s install and configure the Realtime Database. Open the terminal window and execute the following series of commands:

```shell
yarn add @react-native-firebase/database

# after successful installation, for ios
cd ios/

pod install

cd..
npx react-native run-ios

# for android, just rebuild the app
npx react-native run-android
```

## Building app screens

When we open the project in a code editor, its structure looks like this:

![ss2](https://i.imgur.com/TdKzipp.png) 

We need to make some modifications before we can really start building our app. Create an `src` directory inside the root folder. This is where our app components and screens will live. Further, within the `src` directory, we will create two folders: `screens` and `components`.

The `screen` directory will contain all the UI-related components that we need to display to the end-user, whereas the `components` folder will contain any other component that will be used or re-used to display the user interface.

Let us create our first screen, the Home screen, inside `screens/` with a new file `Home.js`.

```js
import React from 'react';
import { View, Text } from 'react-native';

export default function Home() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
}
```

Our next screen is going to be `Add Item`. Create a new file called `AddItem.js`.

```js
import React from 'react';
import { View, Text } from 'react-native';

export default function AddItem() {
    return (
      <View>
        <Text>Add Item</Text>
      </View>
    );  
}
```

Our last screen is going to be a list of items that we need to display. In the same directory, create a new file called `List.js`.

```js
import React  from 'react';
import { View, Text } from 'react-native';

export default function List() {
    return (
      <View>
        <Text>List</Text>
      </View>
    );
}
```

## Adding react-navigation

To navigate between different screens, we need to add the `react-navigation` library. We are going to use the `5.0.0` version.

```shell
yarn add @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack
```

Then, add the following line at the top of the `index.js` file:

```js
import 'react-native-gesture-handler';
```

The next step is to run the command below and link the libraries we just installed:

```shell
cd ios/
pod install
```
After adding this package, let us run the build process again:

```shell
npx react-native run-ios
# OR

npx react-native run-android
```

Now, to see it in action, let us add the Home component as our first screen. Add the following code in `App.js`.

```js
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import Home from './src/screens/Home';

// we will use these two screens later in the Navigator
import AddItem from './src/screens/AddItem';
import List from './src/screens/List';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
```

At this stage, if we go to the simulator, we will see the following result:

![ss4](https://i.imgur.com/IMXVJ9n.png)

The Home Screen is showing up. We will add two other screens as routes to `AppNavigator` in order to navigate to them through the Home Screen. 

```js
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="AddItem" component={AddItem} />
        <Stack.Screen name="List" component={List} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

Now, our stack has three routes: a Home route, an AddItem route, and a ListItem route. The Home route corresponds to the `Home` screen component, the AddItem corresponds to the `AddItem` screen and the ListItem route corresponds to the `ListItem` component.

## Navigating between the screens

Previously, we defined a stack navigator with three routes but we didn't hook them up in order to navigate between them. Well, this is an easy task too. The `react-navigation` library provides us with a way to manage navigation from one screen to another and back. To make this work, we will modify `Home.js`.

```js
import React from 'react';
import { Button, View, Text } from 'react-native';

export default function Home ({navigation}) {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button
          title="Add an Item"
          onPress={() => navigation.navigate('AddItem')}
        />
        <Button
          title="List of Items"
          color="green"
          onPress={() => navigation.navigate('List')}
        />
      </View>
    );
  }
```

In the code above, we are adding a `Button` component from the `react-native` API. `react-navigation` passes a navigation prop in the form of `navigation.navigate()` to every screen in the stack navigator. We have to use the same screen name on the `onPress` function to navigate as we defined in `App.js` under `AppNavigator`.

You can also customize the back button manually with your own styling on both screens `AddItem` and `List` but, for our demonstration, we are going to use the default styling.

![ss5](https://i.imgur.com/oB1OSRS.gif) 

## Creating a Database with Firebase

Go to the [Firebase](https://firebase.google.com/) Console, and click the Realtime Database from the menu bar. If you are creating a realtime database for the first time in your Firebase project, click the **Create Database** button.

Then, when asked for rules, enable test mode. For the example app we’re building in this demo, we will enable the database in the test mode.

## Adding Data from the App to Firebase

In this section, we will edit `AddItem.js` which represents an input field and a button. The user can add an item to the list and it will get saved to Firebase data.

```js
import React from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  TextInput,
  Alert
} from 'react-native';

import database from '@react-native-firebase/database';


let addItem = item => {
  database().ref('/items').push({
    name: item
  });
};

export default function AddItem (){
 const [name, onChangeText] = React.useState(‘’);


const  handleSubmit = () => {
    addItem(name);
    Alert.alert('Item saved successfully');
  };
    return (
      <View style={styles.main}>
        <Text style={styles.title}>Add Item</Text>
        <TextInput style={styles.itemInput} onChangeText={text => onChangeText(text)} />
        <TouchableHighlight
          style={styles.button}
          underlayColor="white"
          onPress={handleSubmit}
        >
          <Text style={styles.buttonText}>Add</Text>
        </TouchableHighlight>
      </View>
    );
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#6565fc'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  },
  itemInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});
```

In the code above, we are adding a Firebase database instance from `config.js` and `db` and then pushing any item that the user adds through `addItem` and `handleSubmit()`. You will get an alert message when you press the **Add** button to add the item from the input value as shown below.

![ss8](https://imgur.com/qi5UQec.gif) 

To verify that the data is there in the database, go to your Firebase console.

![ss9](https://i.imgur.com/KZDYCIo.png) 

## Fetching Items from the Database

To fetch data from the Firebase database, we are going to use the same reference to `db` in `List.js`.

```js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import ItemComponent from '../components/ItemComponent';

import database from '@react-native-firebase/database';

let itemsRef = database().ref('/items');

export default function List() {
  const [itemsArray, setItemsArray] = React.useState([]);
  React.useEffect(() => {
    itemsRef.on('value', snapshot => {
      let data = snapshot.val();
      const items = Object.values(data);
      setItemsArray(items);
    });
  }, []);

  return (
    <View style={styles.container}>
      {itemsArray.length > 0 ? (
        <ItemComponent items={itemsArray} />
      ) : (
        <Text>No items</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ebebeb',
  },
});
```

For the `ItemComponent`, we create a new file inside `components/ItemComponent.js`. This is a non-screen component. Only the `List` will use it to `map` and display each item.

```js
import React  from 'react';
import { View, Text, StyleSheet } from 'react-native';


export default function ItemComponent ({items}) {
    return (
      <View style={styles.itemsList}>
        {items.map((item, index) => {
          return (
            <View key={index}>
              <Text style={styles.itemtext}>{item.name}</Text>
            </View>
          );
        })}
      </View>
    );
 }

const styles = StyleSheet.create({
  itemsList: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  itemtext: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center'
  }
});
```
This step concludes the integration of a Firebase database with our React Native app. You can now add the new data items and fetch them from the database as shown below.

![ss9](https://i.imgur.com/0Nr4d4J.gif)

## Conclusion

In this tutorial, we’ve shown you how to integrate Firebase with a React Native application. You don’t need a complete server that creates an API and further uses a database to prototype or build an MVP of your application.

You can find the complete code inside [this Github repo](https://github.com/amandeepmittal/react-native-examples/tree/master/rnFirebaseDemo).

Finally, don't forget to pay special attention if you're developing commercial React Native apps that contain sensitive logic. You can protect them against code theft, tampering, and reverse engineering by following <a href="https://blog.jscrambler.com/how-to-protect-react-native-apps-with-jscrambler/?utm_source=dev.to&utm_medium=referral&utm_campaign=integrating-firebase-react-native">our guide</a>.