React Native Academy · leksjon

Koble React Native Firebase til prosjektet

Installer @react-native-firebase/app, legg til filene google-services.json og GoogleService-Info.plist, og koble de native modulene for både iOS og Android.

Leksjon 1 av 413 trinn

Koble React Native Firebase til prosjektet er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

React Native Firebase kontra Expo Firebase

Det finnes to tilnærminger til bruk av Firebase i React Native: biblioteket React Native Firebase (@react-native-firebase) og Firebase JS SDK, som brukes via npm-pakken firebase. React Native Firebase bruker native SDK-er og har betydelig bedre ytelse, men krever native byggetrinn. JS SDK fungerer med Expo Go, men har begrensninger på mobile enheter.

Denne leksjonen dekker React Native Firebase, som er den anbefalte tilnærmingen for produksjonsapper. Den krever et oppsett med bare React Native eller Expo bare workflow, noe som betyr at du må kjøre expo prebuild eller expo eject.

Opprette et Firebase-prosjekt

Før du skriver kode, trenger du et Firebase-prosjekt. Gå til console.firebase.google.com, klikk på Add project, og følg oppsettsveiviseren. Når prosjektet er opprettet, legger du til to appregistreringer: én for iOS (med bundle-ID-en din) og én for Android (med pakkenavnet ditt).

Firebase tilbyr deretter konfigurasjonsfiler: google-services.json for Android og GoogleService-Info.plist for iOS. Disse filene inneholder API-nøkler og prosjektidentifikatorer som de native Firebase-SDK-ene bruker til å autentisere mot Firebase-servere.

Installere React Native Firebase

Installer kjernemodulen for Firebase-appen først, og legg deretter bare til modulene du trenger (auth, firestore, storage og så videre). Hver tjeneste er en separat pakke, slik at appen bare inkluderer det den faktisk bruker.

Etter installasjonen kjører du npx expo prebuild hvis du bruker Expo managed workflow, eller cd ios && pod install for et bare React Native-prosjekt. I nyere versjoner kobles de native modulene til automatisk.

# 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

Legge til google-services.json for Android

Last ned google-services.json fra Firebase-konsollen (Project Settings > Your apps > Android app > Download config) og plasser den i android/app/google-services.json.

Aktiver deretter Google Services Gradle-pluginen ved å legge til apply plugin: 'com.google.gms.google-services' nederst i android/app/build.gradle, samt classpath i android/build.gradle. Hvis du bruker Expos config-plugin, håndteres dette automatisk.

// 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'

Legge til GoogleService-Info.plist for iOS

Last ned GoogleService-Info.plist fra Firebase-konsollen (Project Settings > Your apps > iOS app > Download config) og plasser den i roten av iOS-prosjektet: ios/YourApp/GoogleService-Info.plist.

Hvis du bruker Xcode, drar du filen inn i prosjektutforskeren i Xcode og kontrollerer at Copy items if needed er valgt, og at filen er lagt til i appens target. Det native Firebase-SDK-et leser denne filen ved oppstart for å initialisere seg selv.

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

Bruke tilnærmingen med Expo Config Plugin

Hvis du bygger med Expo, leveres pakken @react-native-firebase/app med en Expo config-plugin som automatiserer det native oppsettet. Legg den til i plugins-arrayet i app.json, og oppgi stier til konfigurasjonsfilene.

Når du kjører npx expo prebuild, legger pluginen automatisk til Google Services-pluginen i Gradle og kopierer plist-filen til riktig plassering i iOS. Dette eliminerer behovet for manuell redigering av native filer.

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

Initialisere Firebase i JavaScript

Med React Native Firebase skal du ikke kalle initializeApp i JavaScript – de native SDK-ene initialiseres automatisk ved hjelp av konfigurasjonsfilene. Du importerer ganske enkelt modulene og bruker dem.

Få tilgang til Firebase Auth med import auth from '@react-native-firebase/auth' og Firestore med import firestore from '@react-native-firebase/firestore'. Disse returnerer singleton-instanser som er koblet til Firebase-prosjektet ditt.

// 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');

Kontrollere at tilkoblingen fungerer

En rask måte å kontrollere at Firebase er riktig tilkoblet på, er å lytte etter endringer i autentiseringstilstanden. Kjør appen og kontroller at onAuthStateChanged utløses med null (ingen innlogget bruker). Hvis du ser en native krasj eller en rød skjerm med en melding om at Firebase-appen ikke er initialisert, bør du kontrollere at konfigurasjonsfilene ligger på riktige steder, og at du har kjørt pod install.

Du kan også legge til en enkel Firestore-lesing i en testskjerm – hvis den returnerer data eller en autentiserings-/tilgangsfeil (og ikke en krasj), er SDK-et riktig initialisert.

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;
}

Flere Firebase-prosjekter

Hvis appen må koble til mer enn ett Firebase-prosjekt (for eksempel et annet prosjekt for utvikling enn for produksjon), kan du initialisere flere Firebase-appinstanser med en sekundær konfigurasjon. Kall firebase().initializeApp(config, 'secondaryApp') og referer til den med firebase().app('secondaryApp').

I de fleste React Native-apper er ett Firebase-prosjekt tilstrekkelig. Skillet mellom utvikling og produksjon håndteres bedre ved å ha separate google-services.json-filer for hver build-variant, konfigurert i 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'] }
  }
}

Kontrollere Firebase-dashbordet

Når appen kjører og er tilkoblet, kan du se aktivitet i Firebase-konsollen. Åpne Authentication for å se innloggede brukere, Firestore Database for å undersøke lesing og skriving av dokumenter, og App Check for å overvåke forespørsler.

Firebase Emulator Suite er svært nyttig under utvikling – den kjører en lokal Firebase-server på maskinen din, slik at du kan teste Auth og Firestore uten å berøre produksjonsdata. Kjør firebase emulators:start og pek Firebase SDK-et til 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);
}

Vanlige oppsettsfeil og løsninger

De vanligste oppsettsfeilene ved integrering av React Native Firebase er:

No Firebase App '[DEFAULT]' has been created – konfigurasjonsfilen mangler eller ligger i feil mappe
Missing google-services plugin – Gradle-pluginen er ikke aktivert i build.gradle
Pod install not run – appen kjøres på iOS uten at de native modulene er koblet til

Etter at du har løst et av disse problemene, bør du alltid utføre en fullstendig ny bygging: Stopp bundleren, kjør cd ios && pod install, og start på nytt med npx expo run:ios --device eller tilsvarende kommando.

Rask sjekk

Test forståelsen din av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte du hvordan du oppretter et Firebase-prosjekt og registrerer iOS- og Android-apper, hvordan du legger til google-services.json og GoogleService-Info.plist på riktige steder, og hvordan React Native Firebase initialiseres automatisk fra native konfigurasjonsfiler uten et JavaScript-kall til initializeApp. Deretter skal vi implementere e-post- og telefonautentisering med Firebase.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Koble React Native Firebase til prosjektet» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Koble React Native Firebase til prosjektet», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Koble React Native Firebase til prosjektet»?

Installer @react-native-firebase/app, legg til filene google-services.json og GoogleService-Info.plist, og koble de native modulene for både iOS og Android. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Koble React Native Firebase til prosjektet»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Koble React Native Firebase til prosjektet
E-post- og telefonautentisering med Firebase
Lese og skrive Firestore-dokumenter
Sanntidslyttere og frakoblet lagring

← Tilbake til React Native Academy