Push notifications with FCM in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Firebase messaging module in React Native.

React Native

import messaging from '[1]';

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

Afirebase/messaging

Breact-native-firebase

C@react-native-firebase/messaging

Dfirebase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'firebase' instead of '@react-native-firebase/messaging'.

Importing from 'firebase/messaging' which is for web, not React Native.

The correct import for Firebase Cloud Messaging in React Native is @react-native-firebase/messaging.

2fill in blank

medium

Complete the code to request user permission for push notifications.

React Native

const authStatus = await messaging().[1]();

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

AhasPermission

BsubscribeToTopic

CgetToken

DrequestPermission

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getToken' which only retrieves the device token.

Using 'hasPermission' which only checks permission status.

To ask the user for permission to receive push notifications, use requestPermission().

3fill in blank

hard

Fix the error in the code to get the FCM token correctly.

React Native

const fcmToken = await messaging().[1]();

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

ArequestPermission

BgetToken

CsubscribeToTopic

DonMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'requestPermission' instead of 'getToken'.

Using 'onMessage' which is for receiving messages.

The method getToken() retrieves the device's FCM token needed for push notifications.

4fill in blank

hard

Fill both blanks to listen for incoming messages when the app is in the foreground.

React Native

useEffect(() => {
  const unsubscribe = messaging().[1](remoteMessage => {
    console.log('Message received:', remoteMessage.[2]);
  });
  return unsubscribe;
}, []);

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

AonMessage

Bdata

Cnotification

DgetToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getToken' instead of 'onMessage' for listening.

Accessing 'data' instead of 'notification' for message content.

Use onMessage to listen for messages, and access the notification property to get the message content.

5fill in blank

hard

Fill in the blank to subscribe to a topic and handle token refresh.

React Native

useEffect(() => {
  messaging().[1]('news');
  const unsubscribe = messaging().onTokenRefresh(token => {
    console.log('New token:', token);
  });
  return unsubscribe;
}, []);

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

AsubscribeToTopic

BunsubscribeFromTopic

CgetToken

DrequestPermission

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'unsubscribeFromTopic' which removes subscription.

Using 'getToken' which only gets the device token.

Use subscribeToTopic to subscribe the device to a topic like 'news'.