React Native Navigate to Particular Screen When Notification is Clicked

Question

I am trying to implement navigation upon the user click on a notification that they have received. I am successfully receiving the notifications with expo-notifications and accept data (routes) from API but unable to navigate to another screen when user clicks on a notification.

useNotifications:

export default useNotifications = () => {
    ...

    useEffect(() => {
        registerForPushNotificationsAsync().then((token) => {
            setExpoPushToken(token);
            alert(token);
        });

        notificationListener.current = Notifications.addNotificationReceivedListener(
            (notification) => {
                setNotification(notification);
                console.log(notification);
            }
        );

        responseListener.current = Notifications.addNotificationResponseReceivedListener(
            (response) => {
                //notification is received OK
                console.log("opened");
                
                //here I want to navigate to another screen using rootnavigation
                navigation.navigate("Account"); 

                //alert shows fine
                alert("ok");
            }
        );

        return () => {
            Notifications.removeNotificationSubscription(notificationListener);
            Notifications.removeNotificationSubscription(responseListener);
        };
    }, []);
};

navigator:

const SettingsNavigation = ({ component }) => {
    useNotifications();

    return (
        <Stack.Navigator mode="card" screenOptions={{ headerShown: false }}>
            <Stack.Screen
                name="Main"
                component={component}
                options={{ title: "Home" }}
            />

            <Stack.Screen
                name="Timetable"
                component={TimetableScreenBoss}
                options={menuOptions("Schedule")}
            />

            <Stack.Screen
                name="Account"
                component={AccountNavigator}
                options={menuOptions("Account", false)}
            />
        </Stack.Navigator>
    );
};

root navigation:

import React from "react";

export const navigationRef = React.createRef();

const navigate = (name, params) =>
    navigationRef.current?.navigate(name, params);

export default {
    navigate,
};

app.js:

import { navigationRef } from "./app/navigation/rootNavigation"; //rootnavigation

<NavigationContainer navigationRef={navigationRef}>
    <CustomNavigator>   
</NavigationContainer>

Hello denistepp! I'm new to Expo Notifications and was looking at how to navigate a user to the screen upon clicking on the notification. Do you happen to have a full example based on what you've above? — domster, Jun 26 '21 at 11:25

score 3 · Accepted Answer · answered Mar 15 '21 at 15:48

3

Assuming you are using react-navigation, the NavigationContainer accepts a normal ref prop:

<NavigationContainer ref={navigationRef}>
    <CustomNavigator>   
</NavigationContainer>

see NavigationContainer docs

answered Mar 15 '21 at 15:48

Marek Lisik

2,003
1
8
17

wow, that was a dumb mistake, I didn't write `ref` correctly...thank you! – denistepp Mar 16 '21 at 07:35
hello Marek, could you please take a look at this question: https://stackoverflow.com/questions/68199491/navigate-into-nested-navigator-when-expo-push-noti-is-clicked . I used the same codes as denistepp. unforunately, it's not working – domster Jul 01 '21 at 08:58

React Native Navigate to Particular Screen When Notification is Clicked

1 Answers1

Linked