24

I am using react-navigation with my React Native application.

I keep on getting an error that is supposedly a development-only warning and won't be shown in production.

How do I fix the error below?

console.error: "The action 'NAVIGATE' with payload
{"name":"192.168.100.189:19000","params":{}} was not handled by any
navigator.

Do you have a screen named '192.168.100.189:19000'?

If you'r trying to navigate to a screen in a nested navigator, see
https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nestd-navigator.

This is a development-only warning and won't be shown in production."

16 Answers 16

18

As was the problem in my case, if you are trying to navigate to a screen in a nested navigator (as mentioned in the error), you indeed need to check the documentation at https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nestd-navigator (as, again, mentioned in the error):

Consider the following example:

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Here, you might want to navigate to the Root stack from your Home component:

navigation.navigate('Root');

It works, and the initial screen inside the Root component is shown, which is Profile. But sometimes you may want to control the screen that should be shown upon navigation. To achieve it, you can pass the name of the screen in params:

navigation.navigate('Root', { screen: 'Settings' });

Now, the Settings screen will be rendered instead of Profile upon navigation.

This may look very different from the way navigation used to work with nested screens previously. The difference is that in the previous versions, all configuration was static, so React Navigation could statically find the list of all the navigators and their screens by recursing into nested configurations. But with dynamic configuration, React Navigation doesn't know which screens are available and where until the navigator containing the screen renders. Normally, a screen doesn't render its contents until you navigate to it, so the configuration of navigators which haven't rendered is not yet available. This makes it necessary to specify the hierarchy you're navigating to. This is also why you should have as little nesting of navigators as possible to keep your code simpler.

6
  • 1
    Hi, it worked for me, i was having this error in authentication flow, but now the problem is that when i go from 1 stack to another then headers of both stacks appear on screen, i applied headerShown: "false" on one stack but then the header of stack name appears Aug 28, 2022 at 11:59
  • @NasyxRakeeb this might help you: stackoverflow.com/a/64865616/5746918 Aug 30, 2022 at 14:39
  • You lifted the solution directly from the React Navigation doc. So let's be sure to give credit where credits due. I'd downvote, but it's not worth using rep for.
    – Mike S.
    Jun 8, 2023 at 17:33
  • @MikeS. I have quite clearly mentioned you indeed need to check the documentation at https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nestd-navigator (as, again, mentioned in the error): in the beginning of the answer, and I have also put everything as quoted using "> ". Not sure how better I could "give credit where due". Jun 9, 2023 at 4:19
  • @MikeS. Also, this was not my "solution". This was me pointing people to what to look for in the documentation because oftentimes people don't go read the documentation. Also, if you just provide a link in your answer, people may not go there, or the link may move or expire or the content may change, and so on. So read the whole thing clearly before you lose rep points downvoting others' answers. Jun 9, 2023 at 4:25
15

There are two things potentially happening here:

IN MY CASE: I had different functions returning separate Stack Navigators as in the code below, I wanted the SettingsScreen to appear the very first time a user uses the app, so that they set the configurations, and next time they open the app again they would see the HomeScreen first (same flow with Authentication):

function SettingsStack() {
  return (
    <Stack.Navigator initialRouteName='Settings'>
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          title: 'SMS Recipient Number',
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
      <Stack.Screen name="Home" component={HomeScreen} options={{ title: '', headerTransparent: true }}
      />
    </Stack.Navigator>
  );
}

function MainStack() {
  return (
    <Stack.Navigator initialRouteName='Home'>
      <Stack.Screen
        name="Update"
        component={UpdateScreen}
        options={{
          title: 'Update Recipient Phone',
          headerTitleAlign: 'center',
          headerShown: true
        }}
      />
      <Stack.Screen
        name="Security"
        component={PinScreen}
        options={{
          title: 'Provide PIN',
          headerTitleAlign: 'center',
          headerShown: true
        }}
      />
      <Stack.Screen
        name="Home"
        headerMode="screen"
        component={HomeScreen}
        options={({ navigation }) => ({
          headerTitle: '',
          headerTransparent: true,
          headerRight: () => (
            <Button
              icon={
                <Icon
                  name='settings'
                  type='feather'
                  color='grey'
                  onPress={() => navigation.navigate('Update')}
                  onLongPress={() => navigation.navigate('Update')}
                />
              }
              type="clear"
              buttonStyle={{ marginRight: 10 }}
            />
          ),
        })}
      />
    </Stack.Navigator>
  );
}

Settings Screen: Inside the settings screen after the user had provided ther required details, I used the following function to redirect to the HomeScreen:

transactEntry = async () => {
    const { phone_number } = this.state;

    if ((this.state.phone_number.trim() == "") || (this.state.phone_number.trim().length == 0)) {
        Alert.alert('Error:', 'Please enter valid phone number.');
        return
    }

    try {
        await AsyncStorage.setItem('@recipient_number', phone_number);
    } catch (error) {
        Alert.alert('Error:', 'Error setting recipient phone number!');
    }

    Keyboard.dismiss();

    let successToast = Toast.show('Recipient phone number set successfully.', {
        duration: Toast.durations.LONG,
        position: Toast.positions.TOP,
        shadow: true,
        animation: true,
        backgroundColor: 'black',
        hideOnPress: true,
        delay: 0,
        onShow: () => { },
        onShown: () => { },
        onHide: () => { },
        onHidden: () => { }
    });

    setTimeout(function () {
        Toast.hide(successToast);
    }, 3000);

    successToast;
    this.props.navigation.replace('Home');

};

NOTE: the part where i used this.props.navigation.replace('Home'); inside the SettingsScreen. This would work fine BUT the Home route that was being called was from that function SettingsStack() {...} function and not the function MainStack() {...} function.

So all the navigations from the Home Route at the top of the Stack would give me such an error because my active stack only had two routes, Settings Route and Home Route.

I later realised that I was forcing my app to look for Routes that were in a different Stack so i rewired the function MainStack() {...} and linked it with function SettingsStack() {...} function like below.

function SettingsStack() {
  return (
    <Stack.Navigator initialRouteName='Settings'>
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          title: 'SMS Recipient Number',
          headerShown: true,
          headerTitleAlign: 'center',
        }}
      />
      <Stack.Screen name="MainStack" component={MainStack} options={{ title: '', headerTransparent: true }}
      />
    </Stack.Navigator>
  );
}

function MainStack() {
  return (
    <Stack.Navigator initialRouteName='Home'>
      <Stack.Screen
        name="Update"
        component={UpdateScreen}
        options={{
          title: 'Update Recipient Phone',
          headerTitleAlign: 'center',
          headerShown: true
        }}
      />
      <Stack.Screen
        name="Security"
        component={PinScreen}
        options={{
          title: 'Provide PIN',
          headerTitleAlign: 'center',
          headerShown: true
        }}
      />
      <Stack.Screen
        name="Home"
        headerMode="screen"
        component={HomeScreen}
        options={({ navigation }) => ({
          headerTitle: '',
          headerTransparent: true,
          headerRight: () => (
            <Button
              icon={
                <Icon
                  name='settings'
                  type='feather'
                  color='grey'
                  onPress={() => navigation.navigate('Update')}
                  onLongPress={() => navigation.navigate('Update')}
                />
              }
              type="clear"
              buttonStyle={{ marginRight: 10 }}
            />
          ),
        })}
      />
    </Stack.Navigator>
  );
}

Take note of the <Stack.Screen name="MainStack" component={MainStack} options={{ title: '', headerTransparent: true }} /> line where the MainStack was now Connected to the SettingsStack.

IN BRIEF: Make sure that the Route that you have called resides in the same stack as the calling route OR just make sure that you have connected your Routes somehow eg putting the Stack function inside the Drawer Navigators function. At least there has to be a relationship or join.

3
  • 39
    Consider answering with a few key lines instead of pasting huge chunks of code as-is.
    – Ash
    Aug 28, 2020 at 8:14
  • In your answer I saw "options={({ navigation })". Are you getting the right navigation object with navigate there? I am always getting undefined Feb 22, 2021 at 12:02
  • Yes I am, can you make sure you take note or the parenthesis. Feb 23, 2021 at 9:59
12

Mine was finally resolved by just removing spaces in Stack.Screen's name.

2
  • 1
    i think there was a half-space or sth in the name , which couldn't be seen . just re-typed the name and got resolved
    – mdehghani
    Dec 8, 2020 at 9:58
  • I had the same error because my Stack.Screen name was 'item' and then tried to push 'Item' Aug 6, 2021 at 12:31
7

I was facing the same problem and a Google search brought me to this page. I then accidentally named the "name" prop the same as the component and the error went away and my navigator started working properly. I changed the name to something else and the error returned. It seems therefore that the name prop has to be given the same name as the name of the component. Like so:

<Stack.Screen
        name="SettingsScreen"
        component={SettingsScreen}
        options={{
          title: 'SMS Recipient Number',
          headerShown: true,
          headerTitleAlign: 'center',
        }} />
1

make sure the screen names matches up from the action button and on the stack screen

<SwitchStack.Screen name="PickUpLocation" component ={PickUpLocation} />
1

In my case it was due to the conditional rendering props.user ? <RootStack.Screen name='Main' component={WelcomeScreen} />

1

It's important to note that when using such a setup,

you don't manually navigate to the Home screen

by calling navigation.navigate('Home') or any other method. React Navigation will automatically navigate to the correct screen. Just remove manual navigate to your home screen. Example in your Login Screen or Sign In Screen

//Login API call Here
Alert.alert('Welcome!','Login Successful! How are you today?')
navigation.navigate('Home') <---- REMOVE THIS LINE OF CODE
1
1

Simply check the routers in stack.screen and look for the stack issue. I solved this issue by equalizing the space as above routers.

0

React navigation allows the app to change the components that are shown to the user. Are you calling navigation.navigate('192.168.100.189:19000') somewhere in your code? That is not the purpose of React Navigation. The argument to navigate should be a screen name: specifically, the name you provide to the Navigator.Screen component:

<Stack.Screen name="Your Camera" component={Camera} />

navigation.navigate('Your Camera') would navigate the app to the Camera component.

If you want the user to open a URL in their browser, then you should use the Linking library, Linking.openURL('192.168.100.189:19000').

PS: The params object is optional. If you're going to pass an empty object it doesn't need to be there.

2
  • I don't have any code that calls navigation.navigate('192.168.100.189:19000')....what could be causing it then?
    – preston
    Apr 14, 2020 at 10:15
  • Potentially, you might be using the wrong variable (same name, imported from the wrong file) inside navigation.navigate(). What is the argument to your navigation.navigate call? Apr 14, 2020 at 10:23
0

In my case i wasn't handling the nesting correctly, I had an AuthStack, a HomeStack and DrawerTabs as well. Initially I was handling the AuthStack and HomeStack. I was working fine. But when I added DrawerTabs I replaced HomeStack with it. And this error occurred.

Now i have HomeStack as initial stack(for authorised user), and then I initialised DrawerTabs inside of the HomeStack.

This resolved my error.

2
0

In my case I had this code:

App.js:

<Stack.Screen
  name="Screen"
  component={Home}
/>

anotherScreen.js:

<TouchableOpacity
style={{
      marginLeft: 20,
      marginBottom: 10,
}}
onPress={() => navigation.navigate('Home')}
>
    <Text>Back for a while</Text>
</TouchableOpacity>

I got this error:

The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.

Do you have a screen named 'Home'?"

To solve this you need to replace "Home" to "Screen" just like this:

<TouchableOpacity
style={{
      marginLeft: 20,
      marginBottom: 10,
}}
onPress={() => navigation.navigate('Screen')}
>
    <Text>Back for a while</Text>
</TouchableOpacity>
0

I just named the wrong screen name in my Navigation File. Check if you've correctly spelt your component name.

0

My problem was caused by conditional navigations. It was solved in the react-navigation documentation with the following code block. We reset the navigations depending on the condition by adding the navigationKey.

https://reactnavigation.org/docs/auth-flow/

<>
  {isSignedIn ? (
    <>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </>
  ) : (
    <>
      <Stack.Screen name="SignIn" component={SignInScreen} />
      <Stack.Screen name="SignUp" component={SignUpScreen} />
    </>
  )}
  <Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
    <Stack.Screen name="Help" component={HelpScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
</>
0

navigation.navigate('index', {screen: 'Profile'});

1
  • Welcome on StackOverflow. Can you edit your post to explain why this can answer the question and why it fix the OP issue?
    – Elikill58
    Apr 4 at 7:54
-1

I had the same probleme and i found a solution that work in my case i have a bottomStackNavigator and a stack navigator : You need to give the same string in your name="Settings" component={SettingPage} --> name="SettingPage" component={SettingPage}

    const ProfilStack = createStackNavigator();
export const ProfilStackScreen = () => {
  return (
    <ProfilStack.Navigator   >
      <ProfilStack.Screen name="Profil" component={UserProfil} options={{ headerShown: false }} />
      <ProfilStack.Screen name="SettingPage" component={SettingPage} options={{ headerShown: false }} />
      <ProfilStack.Screen name="modifier mon compte" component={UserModificationPage} options={{ headerShown: false }} />

      <ProfilStack.Screen name="Mes Tags" component={MyTags} options={{ headerShown: false }} />
      <ProfilStack.Screen name="modifier centre interets" component={CategoriesTags} options={{ headerShown: false }} />
      <ProfilStack.Screen name="change tes tags" component={ChooseTags} options={{ headerShown: false }} />
    </ProfilStack.Navigator>
  );
}


const Tab = createBottomTabNavigator();

export default function Navigator() {
  // render() {

  return (
    <Tab.Navigator
      initialRouteName="Feed"
      tabBarOptions={{
        activeTintColor: '#e91e63',
        activeBackgroundColor: CAMPOO.secondary,
      }}



    >
      <Tab.Screen
        name="accueil"
        component={HomeStackScreen}
        options={{

          tabBarLabel: () => { return null },


          tabBarIcon: () => {
            return (
              <HomeIcon />


            );
          },
        }}
      />
      <Tab.Screen
        name="Evenement"
        component={EventStackScreen}
        options={{
          tabBarLabel: () => { return null },
          tabBarIcon: () => {
            return (
              <EventIcon />


            );
          },
        }}

      />

      <Tab.Screen
        name="mon profil"
        component={ProfilStackScreen}
        options={{



          tabBarLabel: () => { return null },

          tabBarIcon: () => {
            return (
              <ProfileIcon />


            );
          },
        }}

      />
    </Tab.Navigator>
  );
  // }
}
-1

Mine was fixed when I removed the nested navigation containers.

Now I have a single navigation container and three navigators inside. Something like this:

<NavContainer>
 <Stack>
  <Tab>
   <Drawer>
    <Screen3 />
    <Screen4 />
   </Drawer>
   <Screen2 />
  </Tab>
  <Screen1 />
 </Stack>
</NavContainer>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.