Push notifications (expo-notifications) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when a notification is received while the app is in the foreground?

Using expo-notifications, what is the default behavior when a push notification arrives while the app is open and active on the screen?

A The notification is received silently without any alert or sound.

B The notification is shown as a system alert banner automatically.

C The app crashes due to unhandled notification event.

D The notification triggers a vibration but no visual alert.

💡 Hint

Think about how notifications behave when the user is already using the app.

By default, expo-notifications does not show system alerts for notifications received in the foreground. Instead, the app receives the notification data silently, allowing custom handling.

🧠 Conceptual

intermediate

Which permission is required to receive push notifications on iOS?

To receive push notifications on an iOS device using expo-notifications, which permission must the app request from the user?

A LOCATION

B NOTIFICATIONS

C CAMERA

D CONTACTS

💡 Hint

Think about what permission controls alerts and badges on iOS.

iOS requires explicit user permission for notifications. The app must request the NOTIFICATIONS permission to show alerts, sounds, or badges.

❓ lifecycle

advanced

When is the push token generated and how to handle it?

In expo-notifications, when is the push notification token generated and what is the best practice to handle it in your React Native app?

A The token is generated on app launch after permissions are granted; handle it by requesting permissions and then calling getExpoPushTokenAsync.

B The token is generated only on Android devices; iOS does not use tokens.

C The token is generated automatically without any permission; no need to handle it explicitly.

D The token is generated only after the user taps a notification; handle it in notification response listener.

💡 Hint

Consider when the app can communicate with the notification service and what steps are needed.

The push token is generated after the app requests and receives notification permissions. Then calling getExpoPushTokenAsync returns the token to send to your backend.

🔧 Debug

advanced

Why does this notification handler not trigger on Android?

Consider this code snippet in a React Native app using expo-notifications: import * as Notifications from 'expo-notifications'; Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: false, shouldSetBadge: false, }), }); useEffect(() => { const subscription = Notifications.addNotificationReceivedListener(notification => { console.log('Notification received:', notification); }); return () => subscription.remove(); }, []); Why might the console.log never appear on Android when a notification arrives while the app is foregrounded?

A The listener is removed immediately after being added, so it never receives notifications.

B Android requires a different notification handler setup; this code only works on iOS.

C The notification is not received because the app lacks notification permissions on Android.

D The notification is handled by the system and not delivered to the listener because the notification handler returns shouldShowAlert: true.

💡 Hint

Think about how the notification handler affects delivery to listeners.

When shouldShowAlert is true, the notification is shown by the system and not delivered to the listener on Android in the foreground. To receive it in the listener, shouldShowAlert must be false.

❓ navigation

expert

How to navigate to a specific screen when a notification is tapped?

In a React Native app using expo-notifications and React Navigation, how can you navigate to a specific screen when the user taps a push notification that opens the app?

A Use Notifications.addNotificationReceivedListener to detect taps and call navigation.navigate inside it.

B Use React Navigation's useFocusEffect to check if the app was opened by a notification and navigate accordingly.

C Use Notifications.addNotificationResponseReceivedListener to detect notification taps and then call navigation.navigate with the target screen.

D Set a deep link URL in the notification payload and configure React Navigation to handle it automatically without listeners.

💡 Hint

Consider which listener specifically handles user interaction with notifications.

addNotificationResponseReceivedListener listens for when the user taps a notification. Inside its callback, you can safely call navigation.navigate to the desired screen.

Practice

1. What is the main purpose of using expo-notifications in a React Native app?

easy

A. To create animations for app screens

B. To send and receive push notifications to keep users informed

C. To manage app navigation between screens

D. To handle user authentication and login

Solution

1. Step 1: Understand the role of expo-notifications

   The expo-notifications library is designed to handle push notifications in React Native apps.

2. Step 2: Identify the correct purpose

   It allows apps to send and receive notifications, keeping users informed even when the app is closed.

3. Final Answer:

   To send and receive push notifications to keep users informed -> Option B

4. Quick Check:

   expo-notifications = Push notifications [OK]

Hint: Remember: expo-notifications is for alerts, not UI or auth [OK]

Common Mistakes:

• Confusing notifications with navigation or animations
• Thinking expo-notifications manages user login
• Assuming it handles UI styling

2. Which of the following is the correct way to request notification permissions using expo-notifications?

easy

A. await Notifications.requestPermissionsAsync();

B. Notifications.getPermissions();

C. await Notifications.askForPermissions();

D. Notifications.permissionRequest();

Solution

1. Step 1: Recall the correct method name

   The official method to request permissions is requestPermissionsAsync() from expo-notifications.

2. Step 2: Check syntax correctness

   The method is asynchronous and should be awaited: await Notifications.requestPermissionsAsync();

3. Final Answer:

   await Notifications.requestPermissionsAsync(); -> Option A

4. Quick Check:

   Permission request method = requestPermissionsAsync [OK]

Hint: Look for async method starting with 'request' [OK]

Common Mistakes:

• Using non-existent methods like getPermissions or askForPermissions
• Forgetting to await the async call
• Using incorrect method names

3. Given the code snippet below, what will be logged when a notification is received?

import * as Notifications from 'expo-notifications';

Notifications.addNotificationReceivedListener(notification => {
  console.log(notification.request.content.title);
});

// Assume a notification with title 'Hello User' arrives

medium

A. undefined

B. notification

C. Hello User

D. Error: notification is not defined

Solution

1. Step 1: Understand the listener callback

   The listener receives a notification object, and logs notification.request.content.title.

2. Step 2: Match the notification content

   The notification has a title 'Hello User', so that string will be logged.

3. Final Answer:

   Hello User -> Option C

4. Quick Check:

   Logged title = 'Hello User' [OK]

Hint: Listener logs notification title property [OK]

Common Mistakes:

• Expecting the whole notification object to be logged
• Confusing property names or missing nested fields
• Assuming undefined if not familiar with notification structure

4. What is wrong with this code snippet for getting the push token?

import * as Notifications from 'expo-notifications';

const getToken = async () => {
  const token = Notifications.getExpoPushTokenAsync();
  console.log(token);
};

getToken();

medium

A. Missing await before Notifications.getExpoPushTokenAsync()

B. Wrong import statement for Notifications

C. console.log should be inside a .then() block

D. getToken function should not be async

Solution

1. Step 1: Identify async function usage

   The method getExpoPushTokenAsync() returns a Promise and must be awaited.

2. Step 2: Check the code for await

   The code calls Notifications.getExpoPushTokenAsync() without await, so token is a Promise, not the actual token.

3. Final Answer:

   Missing await before Notifications.getExpoPushTokenAsync() -> Option A

4. Quick Check:

   Async calls need await to get result [OK]

Hint: Always await async calls to get actual values [OK]

Common Mistakes:

• Forgetting to await async functions
• Misunderstanding Promises vs values
• Incorrect import statements
• Logging before Promise resolves

5. You want to send a push notification only when the user has granted permission. Which sequence of steps correctly implements this using expo-notifications?

hard

A. Send notification directly without requesting permission or token

B. Get token first with getExpoPushTokenAsync(), then request permission with requestPermissionsAsync()

C. Only request permission and send notification without getting token

D. Request permission with requestPermissionsAsync(), check status, then get token with getExpoPushTokenAsync() if granted

Solution

1. Step 1: Request notification permission

   Use requestPermissionsAsync() to ask the user for permission and check the returned status.

2. Step 2: Get push token if permission granted

   If permission is granted, call getExpoPushTokenAsync() to get the device token for sending notifications.

3. Step 3: Send notification using the token

   Use the token to send push notifications from your server or app.

4. Final Answer:

   Request permission with requestPermissionsAsync(), check status, then get token with getExpoPushTokenAsync() if granted -> Option D

5. Quick Check:

   Permission first, then token, then send [OK]

Hint: Always request permission before getting token [OK]

Common Mistakes:

• Getting token before permission
• Sending notifications without token
• Skipping permission check
• Assuming permission is granted by default