Firebase setup (@react-native-firebase) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Firebase Initialization Behavior

After correctly installing and configuring @react-native-firebase/app, what will be the output of this code snippet in a React Native app?

React Native

import React from 'react';
import {Text, View} from 'react-native';
import firebase from '@react-native-firebase/app';

export default function App() {
  const isInitialized = firebase.apps.length > 0;
  return (
    <View>
      <Text>{isInitialized ? 'Firebase Initialized' : 'Firebase Not Initialized'}</Text>
    </View>
  );
}

A Displays 'Firebase Initialized' on the screen

B Displays 'Firebase Not Initialized' on the screen

C App crashes with a runtime error

D Displays a blank screen with no text

💡 Hint

Check if the firebase.apps array contains initialized apps after setup.

The @react-native-firebase/app package initializes Firebase automatically if configured correctly. The apps array contains initialized Firebase app instances. If length > 0, Firebase is initialized.

📝 Syntax

intermediate

Correct Import for Firebase Firestore

Which import statement correctly imports Firestore from @react-native-firebase for use in a React Native app?

A import {firestore} from '@react-native-firebase/app';

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

C import Firestore from '@react-native-firebase/firestore';

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

💡 Hint

Check the official package name for Firestore in react-native-firebase.

The Firestore module is imported as default from '@react-native-firebase/firestore'. Named imports or importing from '@react-native-firebase/app' won't work for Firestore.

❓ lifecycle

advanced

Effect of Missing GoogleService-Info.plist or google-services.json

What happens if you run a React Native app with @react-native-firebase/app installed but forget to add the GoogleService-Info.plist (iOS) or google-services.json (Android) files?

A Firebase initializes but throws runtime errors when accessing services

B Firebase initializes silently but no services work properly

C App crashes immediately on startup with a native error

D App runs normally without any Firebase functionality

💡 Hint

Think about what Firebase needs to connect to your project.

Without the config files, Firebase cannot connect to your project backend. Initialization may succeed but calls to services like Firestore or Auth will fail at runtime.

❓ navigation

advanced

Navigating After Firebase Auth State Change

In a React Native app using @react-native-firebase/auth, which code snippet correctly listens for user sign-in state changes and navigates to 'Home' screen when signed in?

A

useEffect(() => {
  const unsubscribe = auth().onAuthStateChanged(user => {
    if (!user) navigation.navigate('Home');
  });
  return unsubscribe;
}, []);

B

useEffect(() => {
  auth().onAuthStateChanged(user => {
    if (user) navigation.navigate('Home');
  });
}, []);

C

auth().onAuthStateChanged(user => {
  if (user) navigation.navigate('Home');
});

D

useEffect(() => {
  const unsubscribe = auth().onAuthStateChanged(user => {
    if (user) navigation.navigate('Home');
  });
  return unsubscribe;
}, []);

💡 Hint

Remember to clean up listeners in useEffect to avoid memory leaks.

Option D correctly sets up the listener inside useEffect and returns the unsubscribe function to clean up. It navigates to 'Home' only if user is signed in.

🔧 Debug

expert

Debugging Firebase Module Not Found Error

You installed @react-native-firebase/app and @react-native-firebase/auth, but when running your React Native app, you get the error: "Module '@react-native-firebase/auth' not found". What is the most likely cause?

A You did not import auth from '@react-native-firebase/app' correctly

B You need to restart the Metro bundler only

C You forgot to run 'pod install' in the ios directory after installing the package

D You must add google-services.json and GoogleService-Info.plist files

💡 Hint

Think about native module linking steps for iOS after adding new packages.

After installing new native modules in React Native, especially on iOS, you must run 'pod install' in the ios folder to link native code. Missing this causes module not found errors.

Practice

1. What is the first package you should install to start using Firebase in a React Native app with @react-native-firebase?

easy

A. Install @react-native-firebase/firestore

B. Install @react-native-firebase/app

C. Install @react-native-firebase/database

D. Install @react-native-firebase/auth

Solution

1. Step 1: Understand Firebase core setup

   The core Firebase package @react-native-firebase/app is required first to initialize Firebase in the app.

2. Step 2: Identify specific packages

   Other packages like auth, database, or firestore are added later depending on features needed.

3. Final Answer:

   Install @react-native-firebase/app -> Option B

4. Quick Check:

   Core Firebase package = @react-native-firebase/app [OK]

Hint: Always start with the core Firebase app package first [OK]

Common Mistakes:

• Installing feature packages before the core app package
• Confusing auth package as the first step
• Skipping the core package installation

2. Which command correctly installs the Firebase core package in a React Native project?

easy

A. npm install react-native-firebase

B. npm install firebase

C. npm install @react-native-firebase/app

D. npm install @firebase/app

Solution

1. Step 1: Identify the correct package name

   The official Firebase core package for React Native is @react-native-firebase/app.

2. Step 2: Match the correct npm install command

   The command to install it is npm install @react-native-firebase/app.

3. Final Answer:

   npm install @react-native-firebase/app -> Option C

4. Quick Check:

   Correct package install command = npm install @react-native-firebase/app [OK]

Hint: Use exact package name with @react-native-firebase prefix [OK]

Common Mistakes:

• Using 'firebase' instead of '@react-native-firebase/app'
• Missing the '@' symbol in package name
• Installing unrelated packages

3. Given this React Native code snippet, what will be the output when Firebase is correctly initialized?

import firebase from '@react-native-firebase/app';

console.log(firebase.app().name);

medium

A. [DEFAULT]

B. undefined

C. null

D. firebase

Solution

1. Step 1: Understand firebase.app() method

   The firebase.app() method returns the default Firebase app instance.

2. Step 2: Check the default app name

   The default app instance has the name "[DEFAULT]" unless otherwise configured.

3. Final Answer:

   [DEFAULT] -> Option A

4. Quick Check:

   firebase.app().name = [DEFAULT] [OK]

Hint: Default Firebase app name is always '[DEFAULT]' unless changed [OK]

Common Mistakes:

• Expecting undefined or null instead of '[DEFAULT]'
• Confusing app name with package name
• Assuming firebase.app() returns a config object

4. You installed @react-native-firebase/app and added your GoogleService-Info.plist file for iOS, but Firebase still doesn't initialize. What is the most likely missing step?

medium

A. Running pod install inside the ios directory

B. Running npm install again

C. Restarting the React Native packager

D. Adding firebase.json file

Solution

1. Step 1: Recognize iOS native dependency linking

   After adding Firebase config files on iOS, you must run pod install to link native modules.

2. Step 2: Understand why pod install is needed

   This installs CocoaPods dependencies required for Firebase to work on iOS.

3. Final Answer:

   Running pod install inside the ios directory -> Option A

4. Quick Check:

   iOS native linking requires pod install [OK]

Hint: Always run pod install after adding iOS Firebase config [OK]

Common Mistakes:

• Forgetting to run pod install after adding plist
• Assuming npm install is enough for iOS native modules
• Not restarting Xcode or build after changes

5. You want to add Firebase Authentication to your React Native app using @react-native-firebase. Which steps must you follow to set it up correctly?

hard

A. Install @react-native-firebase/app and @react-native-firebase/auth, no need for config files

B. Only install @react-native-firebase/auth and start using it directly

C. Add config files and run pod install, no need to install auth package

D. Install @react-native-firebase/app and @react-native-firebase/auth, add config files, run pod install (iOS), then import and use auth module

Solution

1. Step 1: Install required packages

   You must install both @react-native-firebase/app (core) and @react-native-firebase/auth (auth feature).

2. Step 2: Add platform config files and run pod install

   Include GoogleService-Info.plist for iOS and google-services.json for Android, then run pod install on iOS.

3. Step 3: Import and use the auth module in your code

   After setup, import auth from @react-native-firebase/auth and use its methods.

4. Final Answer:

   Install @react-native-firebase/app and @react-native-firebase/auth, add config files, run pod install (iOS), then import and use auth module -> Option D

5. Quick Check:

   Full Firebase auth setup = install + config + pod install + import [OK]

Hint: Install core and auth packages, add configs, run pod install [OK]

Common Mistakes:

• Skipping config files after installing auth package
• Not running pod install on iOS
• Trying to use auth without installing its package