Keldryn
Keldryn

Reputation: 15

Expo push notifications - Event fired twice (Expo Go)

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

Answers (0)

Related Questions