Do you have a screen named 'home'? React Navigation Error

Question

I am trying to set up React Navigation to my React Native project, but when I do navigation.navigate('home', data ) in my "LoginEnterVerificationCode" Screen in React Native I get this error:

Do you have a screen named 'home'?

I double check my imports and I have a correct file name, Home.tsx, in my project. How can I fix the problem?

Also when I do <Stack.Screen name='home' component={Home} /> in the AuthStack.js file then it works fine. But why is it not working in TabRoutes file since home screen is a bottom navigation screen?

File AuthStack.js

import React from 'react';
import YourName from '../Screens/Auth/YourName';
import YourEmail from '../Screens/Auth/YourEmail';
import LoginEnterVerificationCode from '../Screens/Auth/LoginEnterVerificationCode';

export default function (Stack) {
    return (
        <>
            <Stack.Screen name='enteryourname' component={YourName} />
            <Stack.Screen name='enteryouremail' component={YourEmail} />
            <Stack.Screen name='loginenterverificationcode' component={LoginEnterVerificationCode} />
        </>
    )
}

File MainStack.js

import React from 'react';
import TabRoutes from './TabRoutes';

export default function (Stack) {
    return (
        <>
            <Stack.Screen name='tabroutes' component={TabRoutes} />
        </>
    )
}

File TapRoutes.js

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../Screens/Main/Home/Home';
import Profile from '../Screens/Main/Profiles/Profile';

const Tab = createBottomTabNavigator();

export default function TabRoutes() {
    return (
        <Tab.Navigator screenOptions={{headerShown:false}}>
            <Tab.Screen
                name='home'
                component={Home}
                options={{
                    tabBarIcon: ({ focused }) => {
                        return <></>
                    }
                }}
            />
            <Tab.Screen
                name='profile'
                component={Profile}
                options={{
                    tabBarIcon: ({ focused }) => {
                        return <></>
                    }
                }}
            />
        </Tab.Navigator>

    );
}

File Routes.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AuthStack from './AuthStack';
import MainStack from './MainStack';

const Stack = createNativeStackNavigator();

function Routes() {
  const userData = 'dd'

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown:false}}>
        {!!userData?.userData?._id?<>{MainStack(Stack)}</>:<>{AuthStack(Stack)}</>}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Routes;

I also tried this:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AuthStack from './AuthStack';
import YourName from '../Screens/Auth/YourName';
import YourEmail from '../Screens/Auth/YourEmail';
import LoginEnterVerificationCode from '../Screens/Auth/LoginEnterVerificationCode';
import TabRoutes from './TabRoutes';

const Stack = createNativeStackNavigator();

function Routes() {
  const userData = '';

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {!!userData ? (
          <>
            <Stack.Screen name="tabroutes" component={TabRoutes} />
          </>
        ) : (
          <>
            <Stack.Screen name="enteryourname" component={YourName} />
            <Stack.Screen name="enteryouremail" component={YourEmail} />
            <Stack.Screen
              name="loginenterverificationcode"
              component={LoginEnterVerificationCode}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Routes;

Yes it is, i was earlier using it in my App.js file like this — cwecae, Jul 09 '23 at 09:53
If your profile component is being rendered and only the home component isn't, then the issue likely resides in the Home component. Since you say it was working in your app.js my guess is that the relative path to the component is wrong — Neil, Jul 09 '23 at 10:01
For profile getting this error " ERROR The action 'NAVIGATE' with payload {"name":"profile"} was not handled by any navigator." — cwecae, Jul 09 '23 at 10:07
Could [this](https://stackoverflow.com/questions/61185135/react-native-navigation-error-the-action-navigate-with-payload-name-192-168) resolve your issue ? — Neil, Jul 09 '23 at 10:10
@Neil Also when i do in the AuthStack.js file then it work fine? but why its not working in TabRoutes file since home screen is a bottom navigation screen — cwecae, Jul 09 '23 at 10:12

3ternal · Answer 1 · 2023-07-09T11:11:38.710

0

The problem, I guess, is not in a way you're importing your screens but how you define your stack & tab routes. In your Routes.js you have a line, which should check if user has some sort of credentials or not, as far as I know:

{!!userData?.userData?._id?<>{MainStack(Stack)}</>:<>{AuthStack(Stack)}</>}

A rendered navigator will be constantly the same: AuthStack(Stack) because there's no such object as userData, just a const-ant variable with dd value. The only navigator which handles home screen is a Tab navigator which is located inside MainStack, which is not rendered because of reasons described above. You just didn't mount your Tab navigator, only a Stack navigator and thus you can't navigate to your home and profile screens.

If you're interested in how auth is done, there's an offical guide here from React Navigation docs.

edited Jul 09 '23 at 11:11

answered Jul 09 '23 at 10:57

3ternal

1
4

still same error getting – cwecae Jul 09 '23 at 12:15
how did you try to fix it? – 3ternal Jul 09 '23 at 12:43
please check my edited question in the end – cwecae Jul 09 '23 at 13:51
1

do you have a userData object coming from somewhere? Maybe redux? If it exist, try to include it instead of plain userData variable. The idea is that there should be some changing data which should update your state and cause your component to rerender. Note that, as [docs](https://reactnavigation.org/docs/auth-flow/#dont-manually-navigate-when-conditionally-rendering-screens) suggests, you should't use `navigation.navigate()`, you should be redirected once your state changes. – 3ternal Jul 09 '23 at 15:47
i tried to usestate but still Do you have a screen named 'home'? error can you please check? https://stackoverflow.com/questions/76648173/how-to-use-react-navigation-bottom-tabs-in-react-native – cwecae Jul 09 '23 at 15:57
so I guess you don't use redux? If so create an isSignedIn state variable with useState like that `const [isSignedIn, setIsSignedIn] = useState(false)`. Pass `setIsSignedIn` function to `LoginEnterVerificationCode` through `options` prop of a `Stack.Screen`. Then retrieve setIsSignedIn function from screen options and try to use it like that: `setIsSignedIn(true)` instead of `navigation.navigate('home')`. After that use `isSignedIn` variable instead of `userData` in your check – 3ternal Jul 09 '23 at 16:26
but in my project, i am doing a lot of navigation.navigate('home') which is not related to SignedIn – cwecae Jul 09 '23 at 16:43
You can't navigate to your home route because you're not mounting corresponding navigator. That's it. That is the root of your problem. The reason why my answer didn't work is because you just changed a content of `userData` variable from `dd` to just an empty string which doesn't fix anything because it is still constant `false` value. You don't mount a navigator which handles a `home` route because of this check. It's **constantly** `AuthStack`. – 3ternal Jul 09 '23 at 17:43
That's why I'm suggesting you to get rid off `navigation.navigate('home')` and use **dynamically** changing value to allow redirect from `AuthStack` to `MainStack`. Why get rid off `navigation.navigate('home')`? Because a route you're trying to access is not handled by current navigator. Why use **dynamically** changing `userData` which updates the state? Because then your tab navigator would be mounted. See [this](https://reactnavigation.org/docs/auth-flow/#implement-the-logic-for-restoring-the-token) link for more details. – 3ternal Jul 09 '23 at 17:43

Do you have a screen named 'home'? React Navigation Error

File AuthStack.js

File MainStack.js

File TapRoutes.js

File Routes.js

1 Answers1

Linked