function Logins() {
  return (
    <Provider theme={theme}>
        <Stack.Navigator
          initialRouteName="StartScreen"
          screenOptions={{
            headerShown: false,
          }}
        >
          <Stack.Screen name="StartScreen" component={StartScreen} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
          <Stack.Screen name="Dashboard" component={Dashboard} />
          <Stack.Screen
            name="ResetPasswordScreen"
            component={ResetPasswordScreen}
          />
        </Stack.Navigator>
    </Provider>
  )
}
function Drawers() {
  return (
    <Drawer.Navigator>
          <Drawer.Screen name="Profile" component={UnderConstruction} />
          <Drawer.Screen name="Popular" component={UnderConstruction} />
          <Drawer.Screen name="Saved" component={UnderConstruction} />
          <Drawer.Screen name="Discover" component={UnderConstruction} />
          <Drawer.Screen name="Configuration" component={UnderConstruction} />
          <Drawer.Screen name="Help Center" component={UnderConstruction} />
        </Drawer.Navigator>
  )
}

function Main() {
  return (
    <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Search" component={Search} />
          <Stack.Screen name="Notification" component={Notification} />
          <Stack.Screen name="Message" component={Message} />
        </Stack.Navigator>
  )
}

function Detail() {
  return (
    <Stack.Navigator>
          <Stack.Screen name="Tweet" component={UnderConstruction} />
          <Stack.Screen name="New Tweet" component={TweetButton} />
          <Stack.Screen name="New Message" component={UnderConstruction} />
          <Stack.Screen name="DynamicTitle" component={UnderConstruction} />
        </Stack.Navigator> 
  )
}

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator
         initialRouteName="Logins"
         screenOptions={{
          headerMode: 'none',
        }}
          > 
          <Stack.Screen name="Logins" component={Logins} />
          <Stack.Screen name="Main" component={Main} />
          <Stack.Screen name="Drawer" component={Drawers} />
          <Stack.Screen name="Details" component={Detail} />
        </Stack.Navigator> 
      </NavigationContainer>
  )
}

As you can see, I made a stack navigator that contains all the stack navigators, logins, main, drawers, and details.

And I want to make it possible to move between Home and New Tweet, which belong to different navigators.

I tried this.props.navigation.navigate ("New Tweet")

and this.props.navigation.navigate ("Details", {screen: "New tweet"}) inside the components on the Home screen.

But both didn't work and I got an error "NAVIGATE" with payload {"name": "New tweet"} was not handled by any navigator.

I think it's because they're different navigators. But I don't know how to do..

CodePudding user response：

Change Detail to Details and New tweet to New Tweet. Try following

this.props.navigation.navigate ("Details", {screen: "New Tweet"})

CodePudding user response：

I think there is no way directly to switch to a different stack navigator if they are not related to each other. From here I think this can be one option

Make the screen available in the stack that you want to switch from the home screen. For example, in the main function, if you want to switch to "detail" screen

function Main() 
{ 
return (
<Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Search" component={Search} />
      <Stack.Screen name="Notification" component={Notification} />
      <Stack.Screen name="Message" component={Message} />
      <Stack.Screen name="Details" component={Detail} />
</Stack.Navigator>)
}

now from here your homescreen you can call this.props.navigation.navigate ("Details", {screen: "New Tweet"})

You can also look into the below thread to achieve this otherway around React Navigation 5: Switching between different stack navigators in React native