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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Firebase in a React Native app.

React Native

import [1] from '@react-native-firebase/app';

Drag options to blanks, or click blank then click option'

AReact

BApp

CfirebaseApp

Dfirebase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'React' or 'App' instead of 'firebase' in import.

The correct import is firebase from '@react-native-firebase/app' to use Firebase features.

2fill in blank

medium

Complete the code to initialize Firebase in your React Native app.

React Native

const app = [1]();

Drag options to blanks, or click blank then click option'

AstartApp

BinitializeApp

CcreateApp

DrunApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'startApp' or 'runApp' which are not Firebase methods.

You initialize Firebase with initializeApp() to connect your app to Firebase services.

3fill in blank

hard

Fix the error in the code to get a Firestore database instance.

React Native

const db = firebase.[1]();

Drag options to blanks, or click blank then click option'

Afirestore

Bstorage

Cdatabase

Dauth

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'database()' instead of 'firestore()' for Firestore.

To get Firestore, use firebase.firestore(). 'database' is for Realtime Database, 'storage' for files, 'auth' for authentication.

4fill in blank

hard

Fill both blanks to write data to Firestore in React Native.

React Native

db.collection('[1]').[2]({ name: 'John' });

Drag options to blanks, or click blank then click option'

Ausers

Badd

Cset

Ddocuments

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' without specifying a document, or wrong collection name.

Use collection('users') to select the collection and add() to add a new document with data.

5fill in blank

hard

Fill all three blanks to listen for authentication state changes.

React Native

firebase.auth().[1]((user) => {
  if (user) {
    console.log('[2] logged in');
  } else {
    console.log('[3] logged out');
  }
});

Drag options to blanks, or click blank then click option'

AonAuthStateChanged

BUser

DAuth

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method name or incorrect strings in console.log.

The method onAuthStateChanged listens for login/logout. The strings 'User' show who logged in or out.

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