How to use Drawer Navigator & Stack Navigator combined in react-native?

Question

Packages Used:

1. "@react-navigation/drawer": "^6.1.8",
2. "@react-navigation/native": "^6.0.6",
3. "@react-navigation/stack": "^6.0.11",

Problem :

Image 1,2 & 3: I have implemented drawer which shows two option as HomePage and Terms & Condition. If you click on t&c option it opens its screen and same if you click on homescreen it goes back to homepage screen.

Image 1 & 4: I have made "Click for details page" text as clickable on HomeScreen and after I click it should go to details screen but throws error as image 4 I am confused on how to implement it. Where do I write Stack.Navigation code.

App.js

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';


const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="HomeScreen">
        <Drawer.Screen name="HomeScreen" component={HomeScreen} />
        <Drawer.Screen name="Term&Condition" component={TermsCondition} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js

export default function HomeScreen({ navigation }) {
    return (
        <TouchableOpacity onPress={() => navigation.navigate('DetailPage')}>
            <View style={{ flexDirection: 'row' }}>
                <Text style={{ fontSize: 50 }}>Click for Details Page</Text>
            </View>
        </TouchableOpacity>
    );
}

TermsCondition.js

function TermsCondition({ navigation}) {
    return (
      <View style={{ flexDirection: 'row' }}>
        <Text style={{fontSize:50}}>T&C Page</Text>
      </View>
    );
  }
  export default TermsCondition;

DetailPage.js

function DetailPage({ navigation}) {
    return (
      <View style={{ flexDirection: 'row' }}>
        <Text style={{fontSize:50}}>DetailPage</Text>
      </View>
    );
  }

export default DetailPage; Sorry for this silly question but I tried it online but confused a lot. Thank You in advance!

Answer 1

It was simple step of Nested Navigation Here is the solution for the same:

App.js

    import * as React from 'react';
    import { Button, View } from 'react-native';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import { NavigationContainer } from '@react-navigation/native';
    import HomeScreen from './Screens/HomeScreen';
    import DetailPage from './Screens/DetailPage';
    import TermsCondition from './Screens/TermsCondition';
    import { createStackNavigator } from '@react-navigation/stack';
    
    
    
    const Drawer = createDrawerNavigator();
    const Stack = createStackNavigator();
    
    {/* Add Drawer.Navigation to a function.*/}
    function Root() {
      return (
        <Drawer.Navigator>
          <Drawer.Screen name="HomeScreen" component={HomeScreen} />
          <Drawer.Screen name="Term&Condition" component={TermsCondition} />
        </Drawer.Navigator>
      );
    }
    
    export default function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Root" component={Root} {/*Call function as Stack.Screen*/}
            options={{ headerShown: false }} /> {/*This will disable function header*/}
            <Stack.Screen options={{
              title: 'DetailPage'
            }} name="DetailPage" component={DetailPage} />
          </Stack.Navigator>
    
        </NavigationContainer>
      );
    }

Note: Rest All the code for DetailPage.js, HomeScreen.js,TermCondition.js is same.

Ps. Take some break from the error and return back with fresh mind. that might solve it:-)

Answer 2

If you're using Expo router for navigation (Recommended way of doing it - Tried with version 50, and not sure about future versions)

Here's how you can create a Drawer + Stack Navigator using Expo router.

NOTE: Expo-router also uses react-navigation under the hood.

Step 1. Create an app/_layout.tsx file with Drawer Navigation.

import React from "react";
import Drawer from "expo-router/drawer";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const RootLayout = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer screenOptions={{ headerShown: false }}>
        <Drawer.Screen name="(stacks)" />
      </Drawer>
    </GestureHandlerRootView>
  );
};

export default RootLayout;

NOTE: Do not create an index file inside /app. This file is not required because we directly want to render stack layout (shown in step 2) on to the main layout.

Step 2. Create a folder where you want your stack navigation. For example, app/(stacks). Treat this as your main navigation folder for the app.

File - app/(stacks)/_layout.tsx

import React from "react";
import { Stack, useNavigation } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { DrawerActions } from "@react-navigation/native";

const StacksLayout = () => {
  const nav = useNavigation();
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerTitle: "Stack Home",
          headerLeft: () => {
            return (
              <Ionicons
                name="menu"
                size={24}
                onPress={() => {
                  nav.dispatch(DrawerActions.openDrawer());
                }}
              />
            );
          },
        }}
      />
    </Stack>
  );
};

export default StacksLayout;

NOTE: Here we add functionality to open drawer and hide the main drawer screen.

Step 3. Add an index file. app/(stacks)/index.tsx

import { View, Text } from "react-native";
import React from "react";
import { useRouter } from "expo-router";

const StackHome = () => {
  const router = useRouter();
  return (
    <View>
      <Text>Stack Home</Text>
      <Text
        onPress={() => {
          router.push("/(stacks)/users");
        }}
      >
        Go to users page
      </Text>
    </View>
  );
};

export default StackHome;

Step 4. Create a users file inside (stacks). File - app/(stacks)/users.tsx

import { View, Text } from "react-native";
import React from "react";

const StackUsers = () => {
  return (
    <View>
      <Text>Users Screen</Text>
    </View>
  );
};

export default StackUsers;