Push notifications (expo-notifications) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Expo Notifications module.

React Native

import * as [1] from 'expo-notifications';

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

ANotifications

BNotification

CExpoNotifications

DExpo_Notifications

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'Notification' instead of plural 'Notifications'.

Adding underscores or extra words in the import name.

The correct import is Notifications from expo-notifications. This module handles push notifications in Expo apps.

2fill in blank

medium

Complete the code to request push notification permissions.

React Native

const { status } = await Notifications.[1]Async();

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

ArequestPermissionsAsync

BrequestPermissions

CgetPermissions

DgetPermissionsAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getPermissions' which only checks permission but does not request.

Omitting 'Async' which is required for the promise-based method.

The method to request permissions asynchronously is requestPermissionsAsync. It asks the user to allow notifications.

3fill in blank

hard

Fix the error in the code to get the Expo push token.

React Native

const tokenData = await Notifications.get[1]Async();

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

APush

BPushToken

CExpoPushToken

DExpoToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getPushTokenAsync' which does not exist.

Mixing up the order of words in the method name.

The correct method is getExpoPushTokenAsync. It returns the token needed to send push notifications to this device.

4fill in blank

hard

Fill both blanks to schedule a notification after 5 seconds.

React Native

await Notifications.scheduleNotificationAsync({
  content: { body: 'Hello!' },
  trigger: { seconds: [1], repeats: [2] }
});

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

A5

Btrue

Cfalse

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Setting repeats to true causes repeated notifications.

Using 10 seconds instead of 5 seconds delay.

The notification should trigger after 5 seconds and not repeat, so seconds: 5 and repeats: false are correct.

5fill in blank

hard

Fill all three blanks to add a notification response listener and remove it properly.

React Native

const subscription = Notifications.addNotificationResponseReceivedListener(response => {
  console.log(response.[1]);
});

// Later to clean up
subscription.[2]();

// To add a notification received listener
const receivedSub = Notifications.addNotificationReceivedListener(notification => {
  console.log(notification.[3]);
});

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

Anotification

Bremove

Crequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'request' instead of 'remove' to clean up listeners.

Accessing wrong properties on response or notification objects.

The response object has a notification property. To stop listening, call remove() on the subscription. The notification received listener also uses notification.