Push notifications with FCM in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Handling notification tap behavior

In a React Native app using Firebase Cloud Messaging (FCM), what happens when a user taps a notification while the app is in the background?

A The app opens but notification data is lost and cannot be retrieved.

B The app opens and the notification data is available in the onNotificationOpenedApp listener.

C Nothing happens; the notification tap is ignored.

D The app crashes because background notifications are not supported.

💡 Hint

Think about how notification listeners work when the app is opened from a notification tap.

When the app is in the background and a notification is tapped, the app opens and the notification data can be accessed via the onNotificationOpenedApp listener provided by FCM libraries.

🧠 Conceptual

intermediate

FCM token refresh handling

Why is it important to listen for FCM token refresh events in a React Native app?

A Because the token refresh event deletes all stored notifications.

B Because the token refresh event triggers the app to restart automatically.

C Because the FCM token can change and the app needs to update the server with the new token to continue receiving notifications.

D Because the token refresh event disables push notifications until the app is reinstalled.

💡 Hint

Think about what happens if the server has an old token.

FCM tokens can change over time. If the app does not update the server with the new token, push notifications will not be delivered to the device.

❓ lifecycle

advanced

Notification handling in different app states

Consider a React Native app using FCM. Which listener should you use to handle notifications received when the app is in the foreground?

A messaging().onMessage() listener

B messaging().setBackgroundMessageHandler() listener

C messaging().getInitialNotification() listener

D messaging().onTokenRefresh() listener

💡 Hint

Foreground means the app is open and visible.

The onMessage() listener handles messages received when the app is in the foreground. Background messages use a different handler.

🔧 Debug

advanced

Debugging missing notifications on Android

A React Native app using FCM on Android does not show notifications when the app is killed (not running). What is a likely cause?

A The app has no internet permission in AndroidManifest.xml.

B The app forgot to call messaging().getToken() on startup.

C The app is using messaging().onMessage() instead of setBackgroundMessageHandler().

D The notification payload is missing the "notification" key and only contains "data".

💡 Hint

Android requires a specific payload key to show notifications when the app is not running.

On Android, notifications with only data payload do not show automatically when the app is killed. The "notification" key is needed for the system to display the notification.

❓ navigation

expert

Navigating on notification tap with React Navigation

In a React Native app using React Navigation and FCM, how do you ensure the app navigates to a specific screen when a notification is tapped while the app is closed?

A Use messaging().getInitialNotification() to get the notification data and then navigate after the app loads.

B Use messaging().onMessage() to listen for notification taps and navigate immediately.

C Use messaging().setBackgroundMessageHandler() to navigate when the app is closed.

D Use React Navigation's useFocusEffect hook to detect notification taps.

💡 Hint

Think about how to get notification data when the app starts from a closed state.

When the app is closed, getInitialNotification() returns the notification that opened the app. You can then navigate based on its data after the app loads.

Practice

1. What is the main purpose of Firebase Cloud Messaging (FCM) in a React Native app?

easy

A. To create UI components

B. To store user data locally

C. To send push notifications to the app users

D. To manage app navigation

Solution

1. Step 1: Understand FCM's role

   FCM is a service designed to send push notifications to apps.

2. Step 2: Compare options

   Only To send push notifications to the app users describes sending push notifications, which is FCM's main purpose.

3. Final Answer:

   To send push notifications to the app users -> Option C

4. Quick Check:

   FCM = Push notifications [OK]

Hint: FCM is about messaging, not UI or storage [OK]

Common Mistakes:

• Confusing FCM with local data storage
• Thinking FCM manages UI or navigation
• Assuming FCM is for database operations

2. Which React Native Firebase method is used to get the device token for FCM push notifications?

easy

A. messaging().requestPermission()

B. messaging().getToken()

C. messaging().sendMessage()

D. messaging().subscribeToTopic()

Solution

1. Step 1: Identify token retrieval method

   The method to get the device token is messaging().getToken().

2. Step 2: Eliminate other options

   requestPermission() asks user permission, sendMessage() sends messages, subscribeToTopic() subscribes to topics.

3. Final Answer:

   messaging().getToken() -> Option B

4. Quick Check:

   Get token = getToken() [OK]

Hint: Get token with getToken(), not requestPermission() [OK]

Common Mistakes:

• Using requestPermission() to get token
• Confusing sendMessage() with token retrieval
• Mixing subscribeToTopic() with token methods

3. What will be the output of this code snippet in a React Native app using FCM?

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

async function getToken() {
  const token = await messaging().getToken();
  console.log(token);
}

getToken();

medium

A. Logs the device's FCM token string to the console

B. Throws a syntax error due to missing await

C. Logs 'undefined' because getToken() returns nothing

D. Throws a runtime error because messaging() is undefined

Solution

1. Step 1: Analyze async function behavior

   The function awaits messaging().getToken(), which returns the device token string.

2. Step 2: Understand console.log output

   It logs the token string, not undefined or error, assuming messaging is imported correctly.

3. Final Answer:

   Logs the device's FCM token string to the console -> Option A

4. Quick Check:

   getToken() returns token string [OK]

Hint: Await getToken() to get token string, then log it [OK]

Common Mistakes:

• Forgetting await causing Promise logged
• Assuming getToken() returns undefined
• Not importing messaging correctly

4. You wrote this code to request permission for notifications but it doesn't work as expected:

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

messaging().requestPermission();

What is the likely problem?

medium

A. requestPermission() is not a valid method

B. You need to import notifications instead of messaging

C. You must call getToken() before requestPermission()

D. You forgot to await the requestPermission() call

Solution

1. Step 1: Check async method usage

   requestPermission() returns a Promise and should be awaited to complete permission request.

2. Step 2: Identify missing await effect

   Without await, the permission request may not finish before next steps, causing unexpected behavior.

3. Final Answer:

   You forgot to await the requestPermission() call -> Option D

4. Quick Check:

   Await async calls like requestPermission() [OK]

Hint: Always await async permission requests [OK]

Common Mistakes:

• Not awaiting async permission calls
• Thinking requestPermission() is invalid
• Calling getToken() before permission

5. You want to send a push notification only if the user has granted permission. Which code snippet correctly checks permission and then gets the FCM token in React Native?

hard

A. const authStatus = await messaging().requestPermission();
if (authStatus === messaging.AuthorizationStatus.AUTHORIZED) {
const token = await messaging().getToken();
console.log(token);
}

B. const token = await messaging().getToken();
if (token) {
await messaging().requestPermission();
console.log(token);
}

C. await messaging().getToken();
await messaging().requestPermission();
console.log('Permission and token done');

D. messaging().requestPermission();
messaging().getToken();
console.log('Permissions requested and token fetched');

Solution

1. Step 1: Check permission before token

   const authStatus = await messaging().requestPermission(); if (authStatus === messaging.AuthorizationStatus.AUTHORIZED) { const token = await messaging().getToken(); console.log(token); } requests permission and checks if authorized before getting token.

2. Step 2: Verify async and order correctness

   const authStatus = await messaging().requestPermission(); if (authStatus === messaging.AuthorizationStatus.AUTHORIZED) { const token = await messaging().getToken(); console.log(token); } awaits both calls and uses correct AuthorizationStatus check.

3. Final Answer:

   const authStatus = await messaging().requestPermission(); if (authStatus === messaging.AuthorizationStatus.AUTHORIZED) { const token = await messaging().getToken(); console.log(token); } -> Option A

4. Quick Check:

   Check permission first, then get token [OK]

Hint: Request permission first, then get token if authorized [OK]

Common Mistakes:

• Getting token before permission
• Not awaiting async calls
• Ignoring authorization status check