Reputation: 15
I'm building a React-Native app with Expo (SDK 51), i'm using Expo Go for testing on my device (iOs). I copied the code from the expo-notifications doc:
....
import { registerForPushNotificationsAsync } from "./utils/notifications";
const App = () => {
const { user, setExpoToken, addAlert } = useAuthStore();
const defaultTheme = Appearance.getColorScheme();
const [theme, setTheme] = useState(defaultTheme);
const toggleTheme = () => {
const nextTheme = theme === "light" ? "dark" : "light";
setTheme(nextTheme);
};
StatusBar.setBarStyle("dark-content", true);
const notificationListener = useRef();
const responseListener = useRef();
useEffect(() => {
registerForPushNotificationsAsync()
.then((token) => {
setExpoToken(token ?? null);
})
.catch((error) => setExpoToken(null));
// When notification is received by the device
notificationListener.current =
Notifications.addNotificationReceivedListener((notification) => {
console.log(notification);
/*let { body, data, title } = notification.request.content;
addAlert({
...data,
title,
body,
seen: false,
});*/
});
// When the user interacts with the alert (tap on it for example)
responseListener.current =
Notifications.addNotificationResponseReceivedListener(
(response) => {
console.log("rr" + response);
/* Todo */
}
);
return () => {
notificationListener.current &&
Notifications.removeNotificationSubscription(
notificationListener.current
);
responseListener.current &&
Notifications.removeNotificationSubscription(
responseListener.current
);
};
}, []);
return (
<SafeAreaProvider>
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<NavigationContainer>
{user ? <AppScreen /> : <LoginScreen />}
</NavigationContainer>
</ThemeContext.Provider>
</SafeAreaProvider>
);
};
export default App;
notifications.js:
import { Platform } from "react-native";
import Constants from "expo-constants";
import * as Device from "expo-device";
import * as Notifications from "expo-notifications";
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
function handleRegistrationError(errorMessage) {
throw new Error(errorMessage);
}
const registerForPushNotificationsAsync = async () => {
if (Platform.OS === "android") {
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") {
handleRegistrationError(
"Permission not granted to get push token for push notification!"
);
return;
}
const projectId =
Constants?.expoConfig?.extra?.eas?.projectId ??
Constants?.easConfig?.projectId;
if (!projectId) {
handleRegistrationError(
"Erreur de configuration. projectId manquant"
);
}
try {
const pushTokenString = (
await Notifications.getExpoPushTokenAsync({
projectId,
})
).data;
return pushTokenString;
} catch (e) {
handleRegistrationError(`${e}`);
}
}
};
export { registerForPushNotificationsAsync };
addNotificationReceivedListener is always called twice when i'm receiving a push notification. addNotificationResponseReceivedListener is working as expected.
The issue is happening on iOS and Android, so i guess something is wrong with my code, but couldn't resolve it... What am i doing wrong?
Upvotes: 0
Views: 73