Expo React Native Retrieve Data from Firebase Tutorial

In this tutorial you will learn about the Expo React Native Retrieve Data from Firebase Tutorial and its application with practical example.

In this Expo React Native Retrieve Data from Firebase Tutorial I will show you how to fetch data from firebase/firestore data collection in react native application. In this tutorial you will learn to Retrieve data from firebase/firestore in react native application. In this article I will share example to get data from firebase data collection in react native application.

Expo React Native Retrieve Data from Firebase Tutorial

In this step by step tutorial I will demonstrate you with example on how to retrieve data from firebase in react native application. Please follow the instruction given below:

  • Step 1: Install Expo CLI
  • Step 2: Create Expo React Native App
  • Step 3: Create Firebase Project
  • Step 4: Set Up Firebase in React Native
  • Step 5: Install React Native Elements Package
  • Step 6: Fetch Data
  • Step 7: Add Component in App Js
  • Step 8: Run App on Device

Install Expo CLI

Before staring with this tutorial you must have installed Node 12 LTS or greater version. Now, use npm or yarn to begin installing the Expo CLI.

Create Expo React Native App

Now, run the following command to download and install new React Native application.

let’s switch into the newly created project directory using following command:

Create Firebase Project

Go to firebase.google.com site, create a new firebase project for react native. Creating Firebase account from Firebase dashboard. Click on “Create a project” button and create a brand new Firebase project. We will require firebase configuration details to make the connection between react native and Firebase database.

Set Up Firebase in React Native

In this step you need to install a firebase expo package to be installed in your react native app.

Expos app requires the dotenv package to installed, so use the following command to install the package.

Lets create a .env file at the root of your react native app. Now, put the firebase credentials in it as following:

Now rename your app.json file to app.config.js and put the following code in it:

Now we will create a config directory, within this we will create a firebase.js file and put the following code in it:

Now go to Firebase database and click on the Firestore Database. Here, you need to create a students collection and add some data with name and designation properties.

Install React Native Elements Package

In this step, use the following command to install the react native elements package.

Fetch Data

In this step, we will fetch data from the firestore database and display firebase data in react native app. Lets create a components/ directory, inside this folder create fetchlist_screen.js file and put the following code in it:

Add Component in App Js

In this step we will move to the App.js file and register the newly created component in it.

Run App on Device

Now, we are ready to check the app on the smartphone. You must have installed the Expo Client on your smartphone. Download the expo from Google Play Store or App Store.

Now, you need to scan the QR code on your browser or console screen using the expo app. Your development machine and smartphone must be on same network.

In this tutorial we have learn about the Expo React Native Retrieve Data from Firebase Tutorial and its application with practical example. I hope you will like this tutorial.