Firebase React Native – New 5 Minutes Guide

by

If you are developing a React Native app and trying to integrate Firebase with your app this comprehensive guide is the right place to start. Manually Integrating the Firebase to React Native app is cumbersome. Firebase React Native library comes to the rescue.

Firebase React Native

Installing Firebase React Native

Use the following step to install the library to your project.
Navigate to your project folder and then run:

yarn add @react-native-firebase/firestore
# OR
npm install -s @react-native-firebase/firestore

# Using iOS
cd ios/ && pod install

Once you install the library, the next step would be to use it in your project. For example, if you want to read the data from Cloud Firestore you can use the get() method of firestore object. This returns a DocumentSnapshot object. Again, to get the data from the Snapshot you need to use data() method of the Snapshot. Following code snippet demonstrates how to get the data from a document:

import firestore from '@react-native-firebase/firestore';
 
const documentSnapshot = await firestore()
  .collection('myCollection')
  .doc('myDocument')
  .get();
 
console.log('My document data', documentSnapshot.data());

That was easy, isn’t it? If you want to test what data is available in your Firebase Database you can Download Firebase Admin Desktop App and start querying via the desktop app.

Importing Methods

You can import the firestore object using three different methods as follows:

First one is via named export of firebase object and accessing the firestore method

import { firebase } from '@react-native-firebase/firestore';
// firebase.firestore()

The second one is via the default export of firestore object

import firestore from '@react-native-firebase/firestore';
// firestore()

Realtime Database

The Firebase Realtime Database is a cloud-hosted database. Data is stored in JSON format and synchronized in realtime to all the connected clients. Cross-platform apps can be built with React Native Library. These apps make sure that all the application clients connected to the Database share a single Realtime Database instance. Any new data updated are updated on the clients automatically.

You need to separately install the Realtime database module as follows:

yarn add @react-native-firebase/database
# OR
npm install -s @react-native-firebase/database

Leave a Comment