React Native Academy · บทเรียน

การเชื่อม React Native Firebase กับโปรเจกต์

ติดตั้ง @react-native-firebase/app เพิ่มไฟล์ google-services.json และ GoogleService-Info.plist และเชื่อมโมดูลเนทีฟสำหรับทั้ง iOS และ Android

การเชื่อม React Native Firebase กับโปรเจกต์ เป็นบทเรียน React Native Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Native Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Native Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

React Native Firebase vs Expo Firebase

There are two approaches to using Firebase in React Native: the React Native Firebase library (@react-native-firebase) and the Firebase JS SDK used via firebase npm package. React Native Firebase uses native SDKs and is significantly more performant, but requires native build steps. The JS SDK works with Expo Go but has limitations on mobile.

This lesson covers React Native Firebase, which is the recommended approach for production apps. It requires a bare React Native or Expo bare workflow setup, meaning you must run expo prebuild or expo eject.

Creating a Firebase Project

Before writing any code, you need a Firebase project. Go to console.firebase.google.com, click Add project, and follow the setup wizard. Once the project is created, you add two app registrations: one for iOS (with your bundle ID) and one for Android (with your package name).

Firebase then provides configuration files: google-services.json for Android and GoogleService-Info.plist for iOS. These files contain API keys and project identifiers that the native Firebase SDKs use to authenticate with Firebase servers.

Installing React Native Firebase

Install the core Firebase app module first, then add only the modules you need (auth, firestore, storage, etc.). Each service is a separate package, so your app only bundles what it actually uses.

After installation, run npx expo prebuild if you are in Expo managed workflow, or cd ios && pod install for a bare React Native project. The native modules are linked automatically on newer versions.

# Install the core module
npm install @react-native-firebase/app

# Install specific service modules
npm install @react-native-firebase/auth
npm install @react-native-firebase/firestore

# For Expo managed workflow, use the config plugin:
npx expo install @react-native-firebase/app @react-native-firebase/auth

# iOS native linking
cd ios && pod install

Adding google-services.json for Android

Download google-services.json from the Firebase console (Project Settings > Your apps > Android app > Download config) and place it in android/app/google-services.json.

Then apply the Google Services Gradle plugin by adding apply plugin: 'com.google.gms.google-services' at the bottom of android/app/build.gradle and the classpath in android/build.gradle. If you use Expo's config plugin, this is handled automatically.

// android/build.gradle
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.0'
  }
}

// android/app/build.gradle (add at the BOTTOM)
apply plugin: 'com.google.gms.google-services'

Adding GoogleService-Info.plist for iOS

Download GoogleService-Info.plist from the Firebase console (Project Settings > Your apps > iOS app > Download config) and place it in the root of your iOS project: ios/YourApp/GoogleService-Info.plist.

If you use Xcode, drag the file into the Xcode project navigator and ensure Copy items if needed is checked and the file is added to your app target. The native Firebase SDK reads this file at launch to initialize itself.

# Directory structure after adding the file:
ios/
  YourApp/
    GoogleService-Info.plist  <-- place it here
    AppDelegate.swift
    Info.plist
  YourApp.xcworkspace

Using the Expo Config Plugin Approach

If you are building with Expo, the @react-native-firebase/app package ships an Expo config plugin that automates the native setup. Add it to your app.json plugins array and provide paths to your config files.

When you run npx expo prebuild, the plugin automatically adds the Google Services plugin to Gradle and copies the plist file into the correct iOS location. This eliminates manual native file editing.

// app.json
{
  'expo': {
    'plugins': [
      '@react-native-firebase/app',
      '@react-native-firebase/auth'
    ],
    'android': {
      'googleServicesFile': './google-services.json'
    },
    'ios': {
      'googleServicesFile': './GoogleService-Info.plist'
    }
  }
}

Initializing Firebase in JavaScript

With React Native Firebase, you do not call initializeApp in JavaScript — the native SDKs initialize automatically using the config files. You simply import the modules and use them.

Access Firebase Auth with import auth from '@react-native-firebase/auth' and Firestore with import firestore from '@react-native-firebase/firestore'. These return singleton instances connected to your Firebase project.

// No explicit initialization needed!
// The native SDK reads GoogleService-Info.plist and google-services.json

import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

// Use Firebase Auth
const currentUser = auth().currentUser;

// Use Firestore
const usersCollection = firestore().collection('users');

Verifying the Connection Works

A quick way to verify that Firebase is connected correctly is to listen to the auth state. Run the app and check that onAuthStateChanged fires with null (no user logged in). If you see a native crash or a red screen mentioning the Firebase app was not initialized, double-check that the config files are in the right locations and you ran pod install.

You can also add a simple Firestore read in a test screen — if it returns data or an auth/permission error (not a crash), the SDK is initialized correctly.

import { useEffect } from 'react';
import auth from '@react-native-firebase/auth';

export function TestScreen() {
  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('User is signed in:', user.uid);
      } else {
        console.log('No user signed in — Firebase is connected!');
      }
    });

    return unsubscribe; // Cleanup
  }, []);

  return null;
}

Multiple Firebase Projects

If your app needs to connect to more than one Firebase project (for example, a different project for development vs. production), you can initialize additional Firebase app instances with a secondary config. Call firebase().initializeApp(config, 'secondaryApp') and reference it with firebase().app('secondaryApp').

In most React Native apps a single Firebase project is sufficient. The development vs. production split is better handled by having separate google-services.json files per build variant configured in Gradle.

// android/app/build.gradle
android {
  buildTypes {
    debug {
      // Uses google-services-debug.json
    }
    release {
      // Uses google-services-release.json
    }
  }
  sourceSets {
    debug { resources.srcDirs = ['src/debug'] }
    release { resources.srcDirs = ['src/release'] }
  }
}

Checking the Firebase Dashboard

Once your app is running and connected, you can see activity in the Firebase console. Open Authentication to see signed-in users, Firestore Database to inspect document reads and writes, and App Check to monitor requests.

The Firebase Emulator Suite is very useful during development — it runs a local Firebase server on your machine so you can test Auth and Firestore without hitting production data. Run firebase emulators:start and point the Firebase SDK to localhost.

// Point Auth and Firestore to the local emulator during development
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

if (__DEV__) {
  auth().useEmulator('http://localhost:9099');
  firestore().useEmulator('localhost', 8080);
}

Common Setup Errors and Fixes

The most frequent setup errors when integrating React Native Firebase are:

No Firebase App '[DEFAULT]' has been created — the config file is missing or in the wrong directory
Missing google-services plugin — the Gradle plugin was not applied in build.gradle
Pod install not run — running the app on iOS without linking native modules

After fixing any of these issues, always do a full rebuild: stop the bundler, run cd ios && pod install, and restart with npx expo run:ios --device or the equivalent.

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: how to create a Firebase project and register iOS and Android apps, how to add google-services.json and GoogleService-Info.plist to the correct locations, and how React Native Firebase auto-initializes from native config files without a JavaScript initializeApp call. Next up we implement email and phone authentication with Firebase.

คำถามที่พบบ่อย

บทเรียน “การเชื่อม React Native Firebase กับโปรเจกต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเชื่อม React Native Firebase กับโปรเจกต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Native Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Native Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเชื่อม React Native Firebase กับโปรเจกต์”

ติดตั้ง @react-native-firebase/app เพิ่มไฟล์ google-services.json และ GoogleService-Info.plist และเชื่อมโมดูลเนทีฟสำหรับทั้ง iOS และ Android คุณปฏิบัติ React Native Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Native Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Native Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การเชื่อม React Native Firebase กับโปรเจกต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Native Academy นี้ได้ไหม

ได้ บทเรียน React Native Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การเชื่อม React Native Firebase กับโปรเจกต์
การยืนยันตัวตนด้วยอีเมลและโทรศัพท์ผ่าน Firebase
การอ่านและเขียนเอกสาร Firestore
ตัวรับฟังแบบเรียลไทม์และการคงข้อมูลออฟไลน์

← กลับไปที่ React Native Academy