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.