Why Firebase powers mobile backends in React Native - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why choose Firebase for mobile backend?

Which of the following is the main reason Firebase is popular for mobile backends?

A It only supports web apps, not mobile apps

B It provides ready-to-use backend services like authentication and database without server setup

C It requires developers to build their own servers from scratch

D It is a hardware device for mobile testing

💡 Hint

Think about what Firebase offers to avoid backend coding.

Firebase offers many backend features like user login, real-time database, and storage ready to use, so developers don't need to build servers.

❓ ui_behavior

intermediate

Firebase Realtime Database behavior

What happens in a React Native app when data changes in Firebase Realtime Database?

A The app UI updates automatically in real-time without manual refresh

B The app crashes because Firebase does not support real-time updates

C The app requires a manual reload to see new data

D The app disconnects from Firebase after data changes

💡 Hint

Firebase is known for syncing data live.

Firebase Realtime Database pushes updates instantly to connected clients, so UI updates automatically.

❓ lifecycle

advanced

Handling Firebase Authentication state in React Native

In React Native, which lifecycle or hook is best to listen for Firebase auth state changes to update UI accordingly?

A Use useEffect hook to subscribe on mount and unsubscribe on unmount

B Use componentDidMount lifecycle method (only in class components)

C Use setTimeout to check auth state every 5 seconds

D No need to listen; Firebase updates UI automatically

💡 Hint

React Native functional components use hooks for side effects.

useEffect lets you subscribe to Firebase auth changes when the component mounts and clean up on unmount, keeping UI synced.

❓ navigation

advanced

Navigating after Firebase login success

After a user logs in successfully with Firebase in a React Native app, what is the best way to navigate to the home screen?

A Do nothing; Firebase automatically changes screens

B Reload the app to show the home screen

C Use alert to tell user to press back button

D Use navigation.navigate('Home') inside the login success callback

💡 Hint

React Navigation controls screen changes programmatically.

After login success, calling navigation.navigate('Home') moves user to the home screen smoothly.

🔧 Debug

expert

Debugging Firebase permission denied error

You get a 'permission denied' error when reading data from Firebase Realtime Database in your React Native app. What is the most likely cause?

A Your React Native app has a syntax error in the code

B Firebase SDK is not installed

C Firebase Realtime Database rules do not allow read access to unauthenticated users

D Your device has no internet connection

💡 Hint

Check your Firebase database rules and user authentication status.

Firebase security rules control who can read/write data. If rules require authentication, unauthenticated reads cause permission denied errors.

Practice

1. Why do many mobile apps use Firebase as their backend service?

easy

A. Because Firebase only works for web apps, not mobile apps

B. Because Firebase handles user authentication, data storage, and notifications easily

C. Because Firebase requires you to manage your own servers

D. Because Firebase is a tool for designing app user interfaces

Solution

1. Step 1: Understand Firebase features

   Firebase provides ready-made services like user login, database, and notifications for apps.

2. Step 2: Compare options

   Only Because Firebase handles user authentication, data storage, and notifications easily correctly states Firebase's role in simplifying backend tasks without server management.

3. Final Answer:

   Because Firebase handles user authentication, data storage, and notifications easily -> Option B

4. Quick Check:

   Firebase simplifies backend = C [OK]

Hint: Remember Firebase is a backend service, not UI or server management [OK]

Common Mistakes:

• Thinking Firebase requires managing servers
• Confusing Firebase with UI design tools
• Believing Firebase only works for web apps

2. Which of the following is the correct way to initialize Firebase in a React Native app?

easy

A. import { initializeApp } from 'firebase/app'; const app = initializeApp(config);

B. const app = new Firebase(config);

C. firebase.initialize(config);

D. import Firebase from 'firebase'; Firebase.start(config);

Solution

1. Step 1: Recall Firebase initialization syntax

   Modern Firebase uses modular imports like 'initializeApp' from 'firebase/app'.

2. Step 2: Check options for correct syntax

   Only import { initializeApp } from 'firebase/app'; const app = initializeApp(config); uses the correct import and initialization method.

3. Final Answer:

   import { initializeApp } from 'firebase/app'; const app = initializeApp(config); -> Option A

4. Quick Check:

   Use initializeApp from 'firebase/app' = A [OK]

Hint: Use modular imports with initializeApp for Firebase setup [OK]

Common Mistakes:

• Using old Firebase syntax with 'new Firebase()'
• Calling non-existent methods like Firebase.start()
• Not importing initializeApp from 'firebase/app'

3. Given this React Native Firebase code snippet, what will be the output when fetching user data?

import { getFirestore, doc, getDoc } from 'firebase/firestore';
const db = getFirestore();
async function fetchUser() {
  const docRef = doc(db, 'users', 'user123');
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    return docSnap.data().name;
  } else {
    return 'No user found';
  }
}

medium

A. Returns the entire user document object

B. Throws a syntax error because of missing await

C. Always returns 'No user found' regardless of data

D. Returns the user's name if found, otherwise 'No user found'

Solution

1. Step 1: Analyze the async function fetchUser

   The function fetches a document from Firestore and checks if it exists.

2. Step 2: Understand the return values

   If the document exists, it returns the 'name' field; otherwise, it returns 'No user found'.

3. Final Answer:

   Returns the user's name if found, otherwise 'No user found' -> Option D

4. Quick Check:

   Firestore doc exists? Return name : 'No user found' = D [OK]

Hint: Check docSnap.exists() before accessing data [OK]

Common Mistakes:

• Forgetting to await getDoc causing runtime errors
• Assuming getDoc returns data directly without checking existence
• Returning entire docSnap instead of data().name

4. You wrote this code to send a push notification using Firebase Cloud Messaging, but it doesn't work:

import messaging from '@react-native-firebase/messaging';
async function sendNotification() {
  messaging().sendMessage({
    to: 'device_token',
    notification: { title: 'Hello', body: 'World' }
  });
}

What is the main error here?

medium

A. sendMessage is not a valid method on messaging()

B. Missing await before messaging().sendMessage()

C. Notification object keys should be uppercase

D. Device token must be an array, not a string

Solution

1. Step 1: Check Firebase Messaging API

   The messaging() module does not have a sendMessage method for sending notifications.

2. Step 2: Identify correct method usage

   Sending notifications requires using Firebase Cloud Functions or server-side API, not messaging().sendMessage.

3. Final Answer:

   sendMessage is not a valid method on messaging() -> Option A

4. Quick Check:

   messaging().sendMessage() invalid method = A [OK]

Hint: Check Firebase docs for correct messaging methods [OK]

Common Mistakes:

• Assuming messaging() can send notifications directly
• Forgetting to use server-side Firebase functions
• Incorrect notification object format

5. You want to build a React Native app that lets users sign in with Google and store their profile data in Firebase Firestore. Which approach best uses Firebase to power this backend functionality?

hard

A. Manually create Google sign-in UI and store profiles in local device storage

B. Use Firebase Realtime Database only without authentication

C. Use Firebase Authentication for Google sign-in and Firestore to save user profiles automatically

D. Use Firebase Cloud Functions to handle UI and user sign-in

Solution

1. Step 1: Identify Firebase services for authentication and data

   Firebase Authentication supports Google sign-in easily, and Firestore stores user data securely.

2. Step 2: Evaluate options for backend power

   Use Firebase Authentication for Google sign-in and Firestore to save user profiles automatically uses Firebase's built-in services correctly, while others miss authentication or use wrong storage.

3. Final Answer:

   Use Firebase Authentication for Google sign-in and Firestore to save user profiles automatically -> Option C

4. Quick Check:

   Firebase Auth + Firestore = best backend approach [OK]

Hint: Combine Firebase Auth and Firestore for user data management [OK]

Common Mistakes:

• Storing user data only locally without backend
• Using Realtime Database without authentication
• Misusing Cloud Functions for UI tasks