React Native how to navigate to page in sub folder

Question

Im new to React Native (0.71.8) and I have a very basic setup but I can't seem to navigate to a page that is in a sub folder. Here is my layout:

app
  _layout.tsx
  (screens)
    home.tsx
    about.tsx
    movies
     _layout.tsx
     comedy
      _layout.tsx

in app > _layout.tsx I have a drawer.navigator

<Drawer.Navigator>
  <Drawer.Screen name='(screens)/home' component={HomeScreen} /> <-- works
  <Drawer.Screen name='(screens)/about' component={AboutScreen} /> <-- works
  <Drawer.Screen name='(screens)/movies' component={MoviesScreen} /> <-- works
  <Drawer.Screen name='(screens)/movies/comedy' component={ComedyScreen} /> <-- BROKEN
</Drawer.Navigator>

My error is: No pattern found for route "(screens)/movies/comedy"

How can I link to : screens)/movies/comedy?

Thanks

Answer 1

it looks like you have nested stacks in your Drawer.Navigator.

import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from '../screens/home';
import AboutScreen from '../screens/about';
import MoviesNavigator from './movies/_layout';

const Drawer = createDrawerNavigator();

const AppNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name='Home' component={HomeScreen} />
      <Drawer.Screen name='About' component={AboutScreen} />
      <Drawer.Screen name='Movies' component={MoviesNavigator} />
    </Drawer.Navigator>
  );
};

export default AppNavigator;

this is a movies/_layout.tsx for stack up your movies screen like it is another stack for your nested stacks

import { createStackNavigator } from '@react-navigation/stack';
import MoviesScreen from './movies';
import ComedyNavigator from './comedy/_layout';

const Stack = createStackNavigator();

const MoviesNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Movies' component={MoviesScreen} />
      <Stack.Screen name='Comedy' component={ComedyNavigator} />
    </Stack.Navigator>
  );
};

export default MoviesNavigator;

movies/comedy/_layout.tsx

import { createStackNavigator } from '@react-navigation/stack';
import ComedyScreen from './comedy';

const Stack = createStackNavigator();
const ComedyNavigator = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen name='Comedy' component={ComedyScreen} />
          {/* You can add more screens for comedy if you wanna*/}
        </Stack.Navigator>
      );
    };
    
export default ComedyNavigator;

And if wanna navigate to the comedy screen then this is the way you drill other stacks to navigate

 navigation.navigate('Movies', { screen: 'Comedy' });

use this link for more understanding https://reactnavigation.org/docs/screen-options-resolution/