Access another navigation page using nested navigation

Question

I am trying to access a page, in React-Native, which is on another route and is occurring the following error:

"The action 'NAVIGATE' with payload '{"name":"Routes,"params":{"type":"Navigation/NAVIGATE","routeName":"Financeirocliente"}} was not handled by any Navigator. If you are trying to navigate to a screen, check if the screen exists in your Navigator. If you’re trying to navigate to a screen in a nested Navigator, see...."

I followed the guidelines of the documentation of React navigation for nested routers and it did not work.

documentation link: https://reactnavigation.org/docs/nesting-navigators/

My code:

route archive -

function Telas() {
  return (
    <NavigationContainer independent={true}>
      <Drawer.Navigator
        initialRouteName="Atualizar"
        screenOptions={{gestureEnabled: true}}>
        <Drawer.Screen name="Principal" component={Principal} />
        <Drawer.Screen name="Pedido" component={Pedido} />
        <Drawer.Screen name="Produtos" component={Produtos} />
        <Drawer.Screen name="Clientes" component={Clientes} />
        <Drawer.Screen name="Faturas Abertas" component={FaturasAbertas} />
        <Drawer.Screen name="Atualizar" component={Sincronizacao} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

function Routes() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen
          name="Principal"
          component={Telas}
          options={{headerLeft: null}}
        />
        <Stack.Screen name="FinanceiroCliente" component={FinanceiroCliente} />
      </Stack.Navigator>    
    </NavigationContainer>
  );
} 

Page call:

this.props.navigation.navigate('Routes',NavigationActions.navigate({routeName : 'FinanceiroCliente'}))

I have two Navigators, a Drawer and a stack, and I need to access a page that is in the stack from a screen that is in the structure of my Drawer but then the error occurs. What am I doing wrong? Then I searched a lot on the internet and could not solve the problem. Thanks from now on to those who can help!

Answer 1

The problem is you’re using two NavigationContainer, instead of just one, this makes it impossible to navigate between them (by activating the function independent).

You don’t need two NavigationContainer, remove what is on Drawer and will work normally.

Take a look at the doc of React navigation, it has an example of nested Navigators: https://reactnavigation.org/docs/nesting-navigators

About the independent in the NavigationContainer: https://github.com/react-navigation/react-navigation/blob/master/packages/core/src/BaseNavigationContainer.tsx#L111