So I'm building an app where i send notification to the user when there's an update. Once the user receives it, on clicking, I want to navigate to a specific screen in my app.

The problem is, to do that I have to use a navigation reference to be able to access the navigation object. I did read the doc, but once applying it I get the following error:

The action 'NAVIGATE' with payload {"name":"HomeScreen","params":{"userName":"Lucy"}} was not handled by any navigator.
Do you have a screen named 'HomeScreen'?

RootNavigation.js:

import * as React from 'react';
import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
 }
}

App.js:

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";


import AppNavigator from "./app/navigation/AppNavigator";
import { NavigationContainer } from "@react-navigation/native";
import {navigationRef} from "./app/navigation/rootNavigation";

export default function App() {
  
return (
    <AuthContext.Provider>
      <NavigationContainer  ref={navigationRef}>
        <AppNavigator />
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

AppNavigator.js:

import React, {useEffect, useContext} from "react";
import HomeScreen from "../screens/Home/HomeScreen";
import DashboardScreen from "../screens/Home/DashboardScreen";

import { createDrawerNavigator } from "@react-navigation/drawer";
import FolderNavigator from "./FolderNavigator";
import * as Notifications from "expo-notifications";
import * as RootNavigation from "./rootNavigation";
import AuthNavigator from "./AuthNavigator";
const Drawer = createDrawerNavigator();


const AppNavigator = ({}) => {

    useEffect(() =>{
        registerForPushNotifications()
        Notifications.addNotificationReceivedListener(notification =>{
            RootNavigation.navigate('HomeScreen', { userName: 'Lucy' });
        })

    },[])

    const registerForPushNotifications = async ( ) => {
        try {
            const permissions = await Notifications.getPermissionsAsync();
            if (!permissions.granted) return;
            /*const token = await Notifications.getExpoPushTokenAsync()*/
            const token = (await Notifications.getExpoPushTokenAsync()).data;
            /*await expoPushTokenApi.register(token, user.guid)*/
            /*console.log(token)*/
        } catch (error){
            console.log(error)
        }

    };

    return (
       <Drawer.Navigator>
            <Drawer.Screen
              name="Dashboard"
              ponent={DashboardScreen}
            />
            <Drawer.Screen
              name="Liste des dossiers"
              ponent={FolderNavigator}
            />
            <Drawer.Screen
              name="Liste des clients"
              ponent={HomeScreen}
            />
      </Drawer.Navigator>
)};

export default AppNavigator;

FolderNavigator.js:

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/Home/HomeScreen";
import FolderDetails from "../screens/FolderDetails";

const Stack = createNativeStackNavigator();

const FolderNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Liste des dossiers"
      ponent={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Détails"
      ponent={FolderDetails}
      options={{ headerTitle: "", headerBackTitle: "" }}
    />
  </Stack.Navigator>
);

export default FolderNavigator;

Directory structure:

So I'm building an app where i send notification to the user when there's an update. Once the user receives it, on clicking, I want to navigate to a specific screen in my app.

The problem is, to do that I have to use a navigation reference to be able to access the navigation object. I did read the doc, but once applying it I get the following error:

The action 'NAVIGATE' with payload {"name":"HomeScreen","params":{"userName":"Lucy"}} was not handled by any navigator.
Do you have a screen named 'HomeScreen'?

RootNavigation.js:

import * as React from 'react';
import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
 }
}

App.js:

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";


import AppNavigator from "./app/navigation/AppNavigator";
import { NavigationContainer } from "@react-navigation/native";
import {navigationRef} from "./app/navigation/rootNavigation";

export default function App() {
  
return (
    <AuthContext.Provider>
      <NavigationContainer  ref={navigationRef}>
        <AppNavigator />
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

AppNavigator.js:

import React, {useEffect, useContext} from "react";
import HomeScreen from "../screens/Home/HomeScreen";
import DashboardScreen from "../screens/Home/DashboardScreen";

import { createDrawerNavigator } from "@react-navigation/drawer";
import FolderNavigator from "./FolderNavigator";
import * as Notifications from "expo-notifications";
import * as RootNavigation from "./rootNavigation";
import AuthNavigator from "./AuthNavigator";
const Drawer = createDrawerNavigator();


const AppNavigator = ({}) => {

    useEffect(() =>{
        registerForPushNotifications()
        Notifications.addNotificationReceivedListener(notification =>{
            RootNavigation.navigate('HomeScreen', { userName: 'Lucy' });
        })

    },[])

    const registerForPushNotifications = async ( ) => {
        try {
            const permissions = await Notifications.getPermissionsAsync();
            if (!permissions.granted) return;
            /*const token = await Notifications.getExpoPushTokenAsync()*/
            const token = (await Notifications.getExpoPushTokenAsync()).data;
            /*await expoPushTokenApi.register(token, user.guid)*/
            /*console.log(token)*/
        } catch (error){
            console.log(error)
        }

    };

    return (
       <Drawer.Navigator>
            <Drawer.Screen
              name="Dashboard"
              ponent={DashboardScreen}
            />
            <Drawer.Screen
              name="Liste des dossiers"
              ponent={FolderNavigator}
            />
            <Drawer.Screen
              name="Liste des clients"
              ponent={HomeScreen}
            />
      </Drawer.Navigator>
)};

export default AppNavigator;

FolderNavigator.js:

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/Home/HomeScreen";
import FolderDetails from "../screens/FolderDetails";

const Stack = createNativeStackNavigator();

const FolderNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Liste des dossiers"
      ponent={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Détails"
      ponent={FolderDetails}
      options={{ headerTitle: "", headerBackTitle: "" }}
    />
  </Stack.Navigator>
);

export default FolderNavigator;

Directory structure:

• javascript
• ios
• reactjs
• react-native
• expo

1 Answer 1

This line RootNavigation.navigate('HomeScreen', { userName: 'Lucy' }) is causing the error, because when setting up your navigation, you didn't name any screen HomeScreen, I'm talking about Stack.Screen's name property and Drawer.Screen's name property.