How To Add Data To Firebase Firestore Database Using React Native App | React Native Tutorial | JS

Introduction

In this tutorial, you will learn how to add data to a Firebase Firestore database using a React Native app built with Expo. This process will guide you through setting up Firebase, creating a React Native application, and uploading text data to Firestore. By the end, you will have a functional mobile application that interacts with your Firebase database.

Step 1: Set Up a Firebase Application

1. Create a Firebase Project

   • Go to the Firebase Console.
   • Click on "Add project" and follow the prompts to create a new project.

2. Enable Firestore Database

   • In your Firebase project, navigate to "Firestore Database" from the sidebar.
   • Click "Create database" and choose the appropriate security rules for your needs.

3. Get Firebase Configuration

   • After setting up Firestore, go to "Project settings".
   • Under the "General" tab, find your Firebase configuration. You will need this for your React Native app.

Step 2: Create a React Native Expo Application

1. Install Expo CLI

   • If you haven't already installed Expo CLI, run the following command in your terminal:

     npm install -g expo-cli
     

2. Initialize a New Project

   • Create a new Expo project by running:

     expo init MyFirebaseApp
     

   • Choose a template (e.g., blank) and navigate into the project folder:

     cd MyFirebaseApp
     

Step 3: Install Firebase SDK

1. Add Firebase to Your Project

   • Install the Firebase SDK by running:

     npm install firebase
     

2. Import Firebase in Your App

   • Open your App.js file and import Firebase:

     import { initializeApp } from 'firebase/app';
     import { getFirestore } from 'firebase/firestore';
     

3. Initialize Firebase

   • Add your Firebase configuration and initialize Firebase:

     const firebaseConfig = {
         // Your Firebase configuration
     };
     const app = initializeApp(firebaseConfig);
     const db = getFirestore(app);
     

Step 4: Create a Minimal UI for Data Input

1. Set Up State Management

   • Use the useState hook to manage input data:

     import React, { useState } from 'react';
     

2. Create Input Fields

   • In the return statement of your component, create a simple form:

     const [inputData, setInputData] = useState('');
     return (
         <View>
             <TextInput 
                 placeholder="Enter data" 
                 value={inputData} 
                 onChangeText={setInputData} 
             />
             <Button title="Submit" onPress={addDataToFirestore} />
         </View>
     );
     

Step 5: Add Data to Firestore

1. Define the Function to Upload Data
   • Create a function to handle the button press and add data to Firestore:

     import { collection, addDoc } from 'firebase/firestore';
     
     const addDataToFirestore = async () => {
         try {
             await addDoc(collection(db, 'your-collection-name'), {
                 data: inputData,
                 timestamp: new Date()
             });
             setInputData(''); // Clear the input field
         } catch (error) {
             console.error("Error adding document: ", error);
         }
     };
     

Conclusion

You have successfully created a React Native app that uploads text data to a Firebase Firestore database. Key steps included setting up Firebase, creating a new Expo project, installing the Firebase SDK, creating a minimal user interface, and implementing the functionality to add data to Firestore. Now you can expand your app further by adding features such as data retrieval, user authentication, and more complex UI elements. Happy coding!