I am constructing an React Native Expo app and making an attempt to get expo-notifications working. I am taking code from an present app that does create push notifications, however for some motive, it isn’t working with this present construct.
In package deal.json:
“expo-notifications”: “^0.27.7”
I’ve adopted the usual implementation:
import React, { useState, useEffect, useRef } from "react";
import * as System from "expo-device";
import * as Notifications from "expo-notifications";
import Constants from "expo-constants";
import { Platform } from "react-native";
export const usePushNotifications = () => {
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldPlaySound: true,
shouldShowAlert: true,
shouldSetBadge: false,
}),
});
// Can use this perform beneath or use Expo's Push Notification Software from: https://expo.dev/notifications
async perform sendPushNotification(expoPushToken) {
const message = {
to: expoPushToken,
sound: "default",
title: "Unique Title",
physique: "And right here is the physique!",
knowledge: { someData: "goes right here" },
};
await fetch("https://exp.host/--/api/v2/push/ship", {
technique: "POST",
headers: {
Settle for: "utility/json",
"Settle for-encoding": "gzip, deflate",
"Content material-Sort": "utility/json",
},
physique: JSON.stringify(message),
});
}
const [expoPushToken, setExpoPushToken] = useState("");
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();
async perform registerForPushNotificationsAsync() {
let token;
if (Platform.OS === "android") {
await Notifications.setNotificationChannelAsync("default", {
title: "default",
significance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: "#FF231F7C",
});
}
if (System.isDevice) {
const { standing: existingStatus } =
await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== "granted") {
const { standing } = await Notifications.requestPermissionsAsync();
finalStatus = standing;
}
if (finalStatus !== "granted") {
alert("Didn't get push token for push notification!");
return;
}
token = await Notifications.getExpoPushTokenAsync({
projectId: Constants.expoConfig?.further?.eas.projectId,
});
} else {
alert("Have to be utilizing a bodily gadget for Push Notifications");
}
return token;
}
useEffect(() => {
registerForPushNotificationsAsync().then((token) =>
setExpoPushToken(token)
);
notificationListener.present =
Notifications.addNotificationReceivedListener((notification) => {
setNotification(notification);
});
notificationListener.present =
Notifications.addNotificationReceivedListener((notification) => {
setNotification(notification);
});
responseListener.present =
Notifications.addNotificationResponseReceivedListener((response) => {
console.log(response);
});
return () => {
Notifications.removeNotificationSubscription(
notificationListener.present
);
Notifications.removeNotificationSubscription(responseListener.present);
};
}, []);
return {
expoPushToken,
notification,
};
};
After which inside app.js
const { expoPushToken } = usePushNotifications();
console.log("Push Notifications token :", expoPushToken);
So, nothing loopy. Fundamental setup.
I run the app (npx expo begin –dev-client) and run on my iPhone that’s registered on my Expo mission. Both utilizing the Expo Notifications web page, or operating sendPushNotification() utilizing the token I am getting from the console, every part runs okay (standing:200) – however I am getting nothing to the gadget. I’ve checked that notifications are allowed on the gadget and gadget is just not silent.
Any recommendation on triage?
The response I get from the console if I fireplace the notification from the app:
Notification Response : {"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "B44199F9-59EE-4CD2-9D2E-DC088353524F", "title": "ship.json", "offset": 0, "measurement": 68, "kind": "utility/json"}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "B44199F9-59EE-4CD2-9D2E-DC088353524F", "title": "ship.json", "offset": 0, "measurement": 68, "kind": "utility/json"}}, "bodyUsed": false, "headers": {"map": {"alt-svc": "h3=":443"; ma=2592000,h3-29=":443"; ma=2592000", "content-length": "68", "content-type": "utility/json; charset=utf-8", "date": "Solar, 28 Apr 2024 05:19:26 GMT", "etag": ""44-qrsRHa9ppS08dGDo3z285YOag10"", "strict-transport-security": "max-age=31536000; includeSubDomains", "fluctuate": "Settle for-Encoding, Origin", "through": "1.1 google", "x-content-type-options": "nosniff", "x-frame-options": "SAMEORIGIN"}}, "okay": true, "standing": 200, "statusText": "", "kind": "default", "url": "https://exp.host/--/api/v2/push/ship"}
Standing:200
I’ve even rebuilt the app (create-expo-app) and copied all code throughout, simply to see if there was one thing unusual occurring. I’ve additionally deleted node_modules and yarn set up to recreate.
I am at a loss….