React Native Firebase Tutorial: Build CRUD Firestore App (2025 Update)

In this updated tutorial, you'll learn how to build a full-featured React Native app with CRUD operations using Firebase Firestore. We'll be using the latest React Native 0.80.2, Firebase JavaScript SDK v10+, and React Native CLI (not Expo). This guide is perfect for anyone looking to integrate Firebase’s powerful real-time database into a mobile app using modern tools and best practices.

Prerequisites

• Node.js 20+

• React Native Community CLI

• Android Studio or Xcode (for emulator)

• Firebase project (with Firestore enabled)

Step 1: Create a New React Native App

Create a new React Native app using React Native Community CLI.

npx @react-native-community/cli init RNFirebaseCRUD
cd RNFirebaseCRUD

Run the app:

npx react-native run-android
# or
npx react-native run-ios

Step 2: Create a Firebase Project & Enable Firestore

• Go to https://console.firebase.google.com

• Click “Add project” → Give your project a name → Click “Continue”

• Disable Google Analytics (optional) → Click “Create Project”

• Once it's created, click “Continue” to go to your project dashboard

Register Your App in Firebase

• In the Firebase project dashboard, click the Web icon (</>) to register a new app

• Enter a nickname (e.g., RNFirebaseApp) → Click “Register App”

• Firebase will give you your SDK config:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "XXXXXXXXXXXX",
  appId: "1:XXXXXXXXXXXX:web:XXXXXXXXXXXX",
};

• Copy this config and paste it into your firebaseConfig.js

Enable Firestore Database

• In the Firebase dashboard, go to "Firestore Database" in the left sidebar

• Click "Create Database"

• Select "Start in test mode" (you can update security rules later)

• Choose your preferred region and click "Enable"

✅ Example firebaseConfig.js

// src/firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app-id',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: 'XXXXXXXXXXXX',
  appId: '1:XXXXXXXXXXXX:web:XXXXXXXXXXXX',
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

🔐 Important: Never expose real credentials in public repos or tutorials — use environment variables for production apps.

Step 3: Install Navigation and Dependencies

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

Create src/navigation.js:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import AddUserScreen from './screens/AddUserScreen';
import EditUserScreen from './screens/EditUserScreen';

const Stack = createNativeStackNavigator();

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="AddUser" component={AddUserScreen} />
        <Stack.Screen name="EditUser" component={EditUserScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Update App.tsx:

import React from 'react';
import Navigation from './src/navigation';

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

Step 4: Build the CRUD Screens

🔹 HomeScreen.js

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, Button, TouchableOpacity } from 'react-native';
import { collection, onSnapshot, deleteDoc, doc } from 'firebase/firestore';
import { db } from '../firebaseConfig';

export default function HomeScreen({ navigation }) {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const unsubscribe = onSnapshot(collection(db, 'users'), snapshot => {
      const list = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setUsers(list);
    });
    return unsubscribe;
  }, []);

  const deleteUser = async (id) => {
    await deleteDoc(doc(db, 'users', id));
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Button title="Add User" onPress={() => navigation.navigate('AddUser')} />
      <FlatList
        data={users}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('EditUser', { user: item })}
          >
            <Text>{item.name} - {item.email}</Text>
            <Button title="Delete" onPress={() => deleteUser(item.id)} />
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

🔹 AddUserScreen.js

// src/screens/AddUserScreen.js
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { collection, addDoc } from 'firebase/firestore';
import { db } from '../firebaseConfig';

export default function AddUserScreen({ navigation }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const addUser = async () => {
    await addDoc(collection(db, 'users'), { name, email });
    navigation.goBack();
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput placeholder="Name" value={name} onChangeText={setName} />
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
      <Button title="Add" onPress={addUser} />
    </View>
  );
}

🔹 EditUserScreen.js

// src/screens/EditUserScreen.js
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { doc, updateDoc } from 'firebase/firestore';
import { db } from '../firebaseConfig';

export default function EditUserScreen({ route, navigation }) {
  const { user } = route.params;
  const [name, setName] = useState(user.name);
  const [email, setEmail] = useState(user.email);

  const updateUser = async () => {
    await updateDoc(doc(db, 'users', user.id), { name, email });
    navigation.goBack();
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput value={name} onChangeText={setName} />
      <TextInput value={email} onChangeText={setEmail} />
      <Button title="Update" onPress={updateUser} />
    </View>
  );
}

Step 5: Run Your App

npx react-native run-android
# or
npx react-native run-ios

Test adding, editing, and deleting users in real-time with Firestore!

Conclusion

You’ve now built a complete CRUD app using React Native 0.80.2 and Firebase Firestore with the latest modular SDK. This app demonstrates real-time sync, data operations, and navigation—all powered by Firebase and the modern React Native ecosystem.

You can find the full source code on our GitHub.

That's just the basics. If you need more deep learning about React.js, React Native, or related, you can take the following cheap course:

• Master React Native Animations
• Advanced React Native Topics
• React Native
• Learning React Native Development
• React: React Native Mobile Development: 3-in-1

Thanks!