I'm using Expo Managed Workflow and the 'expo-notifications' module to send push notifications to users of my app. I have created a minimal reproduction in my app, from the docs and am having issues receiving push notifications. Scheduled local notifications work fine and show up as expected. I have also pulled my FCM push token to send notifications directly through FCM which also works as expected.
I have added logging to show the push ticket / receipt status and both are marked as ok, so I am unsure how to proceed.
import { useState, useEffect, useRef } from 'react';
import { Text, View, Button, Platform } from 'react-native';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';
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.data));
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 scheduleNotification();
}}
/>
<Button
title="Press to send a push notification"
onPress={async () => {
await sendPushNotification(expoPushToken);
}}
/>
</View>
);
}
async function scheduleNotification() {
console.log("pressed")
await Notifications.scheduleNotificationAsync({
content: {
title: "test",
body: 'test3',
data: {},
},
trigger: null
});
}
async function sendPushNotification(expoPushToken) {
const message = {
to: expoPushToken,
sound: 'default',
title: 'Original Title',
body: 'And here is the body!',
data: { someData: 'goes here' },
};
const response = await fetch('https://exp.host/--/api/v2/push/send', {
method: 'POST',
headers: {
Accept: 'application/json',
'Accept-encoding': 'gzip, deflate',
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
})
const responseData = await response.json()
console.log("Push Ticket : ", responseData.data)
fetchReceipt(responseData.data.id)
}
async function fetchReceipt(id) {
ids = new Array(id)
const message = {
ids: ids
}
const response = await fetch('https://exp.host/--/api/v2/push/getReceipts', {
method: 'POST',
headers: {
Accept: 'application/json',
'Accept-encoding': 'gzip, deflate',
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
});
const responseData = await response.json();
console.log("Reciept : ", responseData.data)
}
async function registerForPushNotificationsAsync() {
let token;
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('default', {
name: 'default',
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: '#FF231F7C',
});
}
if (Device.isDevice) {
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;
}
// Learn more about projectId:
// https://docs.expo.dev/push-notifications/push-notifications-setup/#configure-projectid
token = await Notifications.getExpoPushTokenAsync({
projectId: Constants.expoConfig.extra.eas.projectId,
});
console.log(token);
const firebaseToken = (await Notifications.getDevicePushTokenAsync()).data;
console.log("FCM Token : ", firebaseToken)
} else {
alert('Must use physical device for Push Notifications');
}
return token;
}
Sample log output:
Push Ticket : Object {
"id": "2fbfdd91-53a0-4199-ac32-b53131d72933",
"status": "ok",
}
Reciept : Object {
"2fbfdd91-53a0-4199-ac32-b53131d72933": Object {
"status": "ok",
},
}
I am aware that the expo docs say Even if a receipt's status says ok, this doesn't guarantee that the device has received the message; "ok" in a push receipt means that the Android or iOS push notification service successfully received the notification. However, the fact I am able to send directly from FCM dashboard suggests that I should have no issue communicating with my device.
For reference I am running an EAS development build on a real android device.