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

Question

I'm using the React NavigationV6 to create a static app for now.

After setting up my Navigation process like this Im having an issue moving to the Home Screen from the Login and Register Screen. And also the Home screen is not rendering the Bottom Tab which is meant to show icons.

I did it this way

package.json

    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/material-bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",
    "axios": "^0.24.0",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-confirmation-code-field": "^7.2.0",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-paper": "^4.11.2",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "~3.10.1",
    "react-native-vector-icons": "^9.0.0",
    "react-native-web": "0.17.1",
    "react-redux": "^7.2.6"

App.js

import React from "react";
import RootNavigation from './src/navigation/RootNavigation';

export default function App() {
  return (
      <RootNavigation/>
  );
}

RootNavigation.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import AuthNavigation from "./AuthNavigation";

const RootNavigation = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <AuthNavigation />
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

export default RootNavigation;

AuthNavigation.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
// Screens
import Onboarding from "../screens/Auth/Onboarding";
import Login from "../screens/Auth/Login";
import Register from "../screens/Auth/Register";
import VerifyCode from "../screens/Auth/VerifyCode";
import ForgotPassword from "../screens/Auth/ForgotPassword";
import MainTabNavigation from "../navigation/MainTabNavigation";

const Stack = createStackNavigator();

const AuthNavigation = () => {
  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false }}
      initialRouteName="Onboarding"
    >
      <Stack.Screen name="Onboarding" component={Onboarding} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="VerifyCode" component={VerifyCode} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
      <Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
    </Stack.Navigator>
  );
};

export default AuthNavigation;

MainTabNavigation.js

import React from "react";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import HomeStackNavigation from "../navigation/HomeStackNavigation";
import WalletStackNavigation from "../navigation/WalletStackNavigation";
import HistoryStackNavigation from "../navigation/HistoryStackNavigation";
import ProfileStackNavigation from "../navigation/ProfileStackNavigation";

const Tab = createMaterialBottomTabNavigator();

const MainTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#e91e63"
      barStyle={{ backgroundColor: "tomato" }}
    >
      <Tab.Screen
        name="Home"
        component={HomeStackNavigation}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Wallet"
        component={WalletStackNavigation}
        options={{
          tabBarLabel: "Wallet",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={black} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="History"
        component={HistoryStackNavigation}
        options={{
          tabBarLabel: "History",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={24} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileStackNavigation}
        options={{
          tabBarLabel: "Profile",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={24} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default MainTabNavigation;

HomeStackNavigation.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home/Home";
import Wallet from "../screens/Home/Wallet/Wallet";
import History from "../screens/Home/History/History";
import Profile from "../screens/Home/Profile/Profile";

const HomeStack = createStackNavigator();

const HomeStackNavigation = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={Home} />
      <HomeStack.Screen name="Wallet" component={Wallet} />
    </HomeStack.Navigator>
  );
};

export default HomeStackNavigation;

WalletStackNavigation.js

import React from "react";
import { createStackNavigator } from '@react-navigation/stack';
import Wallet from "../screens/Home/Wallet/Wallet";

const WalletStack = createStackNavigator();

const WalletStackNavigation = () => {
  return (
    <WalletStack.Navigator>
      <WalletStack.Screen name="Wallet" component={Wallet} />
    </WalletStack.Navigator>
  );
};

export default WalletStackNavigation;

Login.js

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

const Login = (props) => {
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();

  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <View style={styles.backButtonContainer}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Image
              source={require("../../../assets/images/back-arrow.png")}
              style={styles.backButton}
            />
          </TouchableOpacity>
        </View>

        <Text style={styles.text}>Let's sign you in!</Text>
        <Text style={styles.textTwo}>Welcome back. You've been missed!</Text>
      </View>

      <View style={styles.registerFormContainer}>
        <View style={styles.textInputContainer}>
          <TextInput
            style={styles.textInput}
            onChangeText={setEmail}
            value={email}
            placeholder="Email"
          />
        </View>

        <View style={styles.textInputContainer}>
          <TextInput
            style={styles.textInput}
            onChangeText={setPassword}
            value={password}
            placeholder="Password"
          />
        </View>

        <TouchableOpacity style={styles.forgotPasswordButton} onPress={() => navigation.navigate("ForgotPassword")}>
          <Text style={styles.forgotPasswordText}>Forgot Password?</Text>
        </TouchableOpacity>

        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => props.navigation.navigate("Home")}
          >
            <Text style={styles.buttonText}>Login</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.haveAnAccount}>
          <Text>
            Dont Have an Account?
            <Text
              style={styles.haveAnAccountText}
              onPress={() => props.navigation.navigate("Register")}
            >
              {" "}
              Create One
            </Text>
          </Text>
        </View>
        
      </View>
    </View>
  );
};

export default Login;

RootNavigator renders only AuthNavigation, and the screen with `Home` name is nested inside HomeStackNavigation. You're trying to navigate to the screen which technically the screen name is not registered. In case you're building authentication navigation flow, check https://reactnavigation.org/docs/auth-flow/ — Fiston Emmanuel, Jan 15 '22 at 23:01

score 0 · Answer 1 · answered May 26 '22 at 14:23

first install Root naviagtion : https://reactnavigation.org/docs/navigating-without-navigation-prop/

import { navigationRef } from './RootNavigation'; // <-- add this 

const RootNavigation = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer
     ref={navigationRef} // <-- add this  >
        <AuthNavigation />
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

In the next step, we define RootNavigation, which is a simple module with functions that dispatch user-defined navigation actions.

    // RootNavigation.js
    
    import { createNavigationContainerRef } from '@react-navigation/native';
    
    export const navigationRef = createNavigationContainerRef()
    
    export function navigate(name, params) {
      if (navigationRef.isReady()) {
        navigationRef.navigate(name, params);
      }
    }
// add other navigation functions that you need and export them

add the screen you want in first stack loaded for example do you want to move in Home screen with root Navigation add the screen in AuthNavigation

    const AuthNavigation = () => {
      return (
        <Stack.Navigator
          screenOptions={{ headerShown: false }}
          initialRouteName="Onboarding"
        >
          <Stack.Screen name="Onboarding" component={Onboarding} />
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="VerifyCode" component={VerifyCode} />
          <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
          <Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
          <HomeStack.Screen name="Home" component={Home} /> // <-- add this line
        </Stack.Navigator>
      );
    };

navigate in any js model with example below:

// any js module
import * as RootNavigation from './path/to/RootNavigation.js';

// ...

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });

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

1 Answers1