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.