- SDK Version: 45
- Platforms(Android/iOS/web/all): Android
I created a brand new sample app using expo init, and then copied code 1:1 from the notifications document.
When I run this sample in Expo Go on a real Android 12 device or on an Android 12 simulator, notifications are correctly delivered to the device. However, upon tapping the notification, the app is not opened.
As tested on a real iPhone 13 running IOS 15.5, tapping the notification opens the app. Additionally, as tested on an Android 11 simulator, tapping the notification opens the app.
This behavior appears to be the same for a packaged application apk, as well as for an application delivered on the play store using FCM. (This was originally detected in a live production application.)
It is worth noting that when the application is running in the background, callbacks registered with Notifications.addNotificationResponseReceivedListener ARE in fact executed, however, the application is not brought to the foreground.
I am hoping that there is some simple workaround or fix that can cause the application to be opened upon engagement with the notification.
Below are commands used to set up the test.
> expo init hello (base)
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded template.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
...
> cd hello
> npm install --save expo-device expo-notifications
> expo start
I copied the code as follows:
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import React, { useState, useEffect, useRef } from 'react';
import { Text, View, Button, Platform } from 'react-native';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
export default function App() {
const [expoPushToken, setExpoPushToken] = useState('');
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();
useEffect(() => {
registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
setNotification(notification);
});
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
console.log(response);
});
return () => {
Notifications.removeNotificationSubscription(notificationListener.current);
Notifications.removeNotificationSubscription(responseListener.current);
};
}, []);
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'space-around',
}}
>
<Text>Your expo push token: {expoPushToken}</Text>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text>Title: {notification && notification.request.content.title} </Text>
<Text>Body: {notification && notification.request.content.body}</Text>
<Text>Data: {notification && JSON.stringify(notification.request.content.data)}</Text>
</View>
<Button
title="Press to schedule a notification"
onPress={async () => {
await schedulePushNotification();
}}
/>
</View>
);
}
async function schedulePushNotification() {
await Notifications.scheduleNotificationAsync({
content: {
title: "You've got mail! 📬",
body: 'Here is the notification body',
data: { data: 'goes here' },
},
trigger: { seconds: 2 },
});
}
async function registerForPushNotificationsAsync() {
let token;
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== 'granted') {
alert('Failed to get push token for push notification!');
return;
}
token = (await Notifications.getExpoPushTokenAsync()).data;
console.log(token);
if (Platform.OS === 'android') {
Notifications.setNotificationChannelAsync('default', {
name: 'default',
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
}
return token;
}