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.

Table Of Contents−

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.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

# npm

npm install -g expo-cli

# yarn

yarn global add expo-cli

Create Expo React Native App

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

expo init RnBlogProject

1	expo init RnBlogProject

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

cd RnBlogProject

1	cd RnBlogProject

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.

expo install firebase

1	expo install firebase

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

npm install dotenv

1	npm install dotenv

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

apiKey: "****************************",
authDomain: "****************************",
projectId: "****************************",
storageBucket: "****************************",
messagingSenderId: "****************************",
appId: "****************************"

apiKey: "****************************",

authDomain: "****************************",

projectId: "****************************",

storageBucket: "****************************",

messagingSenderId: "****************************",

appId: "****************************"

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

import 'dotenv/config';

export default {
  expo: {
    name: 'RnBlog',
    slug: 'RnBlog',
    version: '1.0.0',
    orientation: 'portrait',
    icon: './assets/icon.png',
    splash: {
      image: './assets/splash.png',
      resizeMode: 'contain',
      backgroundColor: '#ffffff'
    },
    updates: {
      fallbackToCacheTimeout: 0
    },
    assetBundlePatterns: ['**/*'],
    ios: {
      supportsTablet: true
    },
    android: {
      adaptiveIcon: {
        foregroundImage: './assets/adaptive-icon.png',
        backgroundColor: '#FFFFFF'
      }
    },
    web: {
      favicon: './assets/favicon.png'
    },
    extra: {
      apiKey: process.env.apiKey,
      authDomain: process.env.authDomain,
      projectId: process.env.projectId,
      storageBucket: process.env.storageBucket,
      messagingSenderId: process.env.messagingSenderId,
      appId: process.env.appId
    }
  }
};

import 'dotenv/config';

export default {

expo: {

name: 'RnBlog',

slug: 'RnBlog',

version: '1.0.0',

orientation: 'portrait',

icon: './assets/icon.png',

splash: {

image: './assets/splash.png',

resizeMode: 'contain',

backgroundColor: '#ffffff'

updates: {

fallbackToCacheTimeout: 0

assetBundlePatterns: ['**/*'],

ios: {

supportsTablet: true

android: {

adaptiveIcon: {

foregroundImage: './assets/adaptive-icon.png',

backgroundColor: '#FFFFFF'

}

web: {

favicon: './assets/favicon.png'

extra: {

apiKey: process.env.apiKey,

authDomain: process.env.authDomain,

projectId: process.env.projectId,

storageBucket: process.env.storageBucket,

messagingSenderId: process.env.messagingSenderId,

appId: process.env.appId

}

};

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

import * as firebase from 'firebase';
import firestore from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "****************************",
  authDomain: "****************************",
  projectId: "****************************",
  storageBucket: "****************************",
  messagingSenderId: "****************************",
  appId: "****************************"
};

firebase.initializeApp(firebaseConfig);

firebase.firestore();

export default firebase;

import * as firebase from 'firebase';

import firestore from 'firebase/firestore';

const firebaseConfig = {

apiKey: "****************************",

authDomain: "****************************",

projectId: "****************************",

storageBucket: "****************************",

messagingSenderId: "****************************",

appId: "****************************"

};

firebase.initializeApp(firebaseConfig);

firebase.firestore();

export default firebase;

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.

npm install react-native-elements

1	npm install react-native-elements

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:

import React, { Component } from 'react';

import { StyleSheet, ScrollView, ActivityIndicator, View } from 'react-native';
import { ListItem } from 'react-native-elements';
import firebase from '../config/firebase';


class FetchListScreen extends Component {

    constructor() {
        super();
        this.docs = firebase.firestore().collection('students');
        this.state = {
          isLoading: true,
          students: []
        };
      }
    
      componentDidMount() {
        this.unsubscribe = this.docs.onSnapshot(this.getStudentsData);
      }
    
      componentWillUnmount(){
        this.unsubscribe();
      }
    
      getStudentsData = (querySnapshot) => {
        const students = [];
        querySnapshot.forEach((res) => {
          const { name, designation } = res.data();
          students.push({
            key: res.id,
            name,
            designation
          });
        });
        this.setState({
          students,
          isLoading: false
       });
      }
    
    
    
      render() {
        if(this.state.isLoading){
          return(
            <View style={styles.loader}>
              <ActivityIndicator size="large" color="red"/>
            </View>
          )
        }    
        return (
          <ScrollView style={styles.wrapper}>
              {
                this.state.students.map((res, i) => {
                  return (
                    <ListItem 
                       key={i}           
                       bottomDivider>
                      <ListItem.Content>
                        <ListItem.Title>{res.name}</ListItem.Title>
                        <ListItem.Subtitle>{res.designation}</ListItem.Subtitle>
                      </ListItem.Content>
                      <ListItem.Chevron 
                         color="black" 
                      />
                    </ListItem>
                  );
                })
              }
          </ScrollView>
        );
      }
    }
    
    const styles = StyleSheet.create({
      wrapper: {
       flex: 1,
       paddingBottom: 22
      },
      loader: {
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',    
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      }
    })

export default FetchListScreen;

import React, { Component } from 'react';

import { StyleSheet, ScrollView, ActivityIndicator, View } from 'react-native';

import { ListItem } from 'react-native-elements';

import firebase from '../config/firebase';

class FetchListScreen extends Component {

constructor() {

super();

this.docs = firebase.firestore().collection('students');

this.state = {

isLoading: true,

students: []

};

}

componentDidMount() {

this.unsubscribe = this.docs.onSnapshot(this.getStudentsData);

}

componentWillUnmount(){

this.unsubscribe();

}

getStudentsData = (querySnapshot) => {

const students = [];

querySnapshot.forEach((res) => {

const { name, designation } = res.data();

students.push({

key: res.id,

name,

designation

});

this.setState({

students,

isLoading: false

});

}

render() {

if(this.state.isLoading){

return(

</View>

)

}

return (

{

this.state.students.map((res, i) => {

return (

<ListItem

key={i}

bottomDivider>

<ListItem.Content>

<ListItem.Title>{res.name}</ListItem.Title>

<ListItem.Subtitle>{res.designation}</ListItem.Subtitle>

</ListItem.Content>

<ListItem.Chevron

color="black"

</ListItem>

);

})

}

</ScrollView>

);

}

const styles = StyleSheet.create({

wrapper: {

flex: 1,

paddingBottom: 22

loader: {

position: 'absolute',

alignItems: 'center',

justifyContent: 'center',

left: 0,

right: 0,

top: 0,

bottom: 0,

}

})

export default FetchListScreen;

Add Component in App Js

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

import React from 'react';
import FetchListScreen from './components/fetchlist_screen.js'

export default function App() {
  return (
    <FetchListScreen/>
  );
}

import React from 'react';

import FetchListScreen from './components/fetchlist_screen.js'

export default function App() {

return (

);

}

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.

# npm
npm start

# yarn
yarn start

# npm

npm start

# yarn

yarn start

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.

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Expo React Native Retrieve Data from Firebase Tutorial