drawer-screens.js

import 'react-native-gesture-handler';
import * as React from 'react';
import {Text, Button} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';

// Our Screens
function Screen1({navigation}) {
  return (
    <>
      <Text>Screen 1</Text>
      <Button
        title="Go to Screen 2"
        onPress={() => navigation.navigate('Screen2')}
      />
    </>
  );
}

function Screen2({navigation}) {
  return (
    <>
      <Text>Screen 2</Text>
      <Button
        title="Go to Screen 3"
        onPress={() => navigation.navigate('Screen3')}
      />
    </>
  );
}

function Screen3({navigation}) {
  return (
    <>
      <Text>Screen 3</Text>
      <Button
        title="Go to Screen 1"
        onPress={() => navigation.navigate('Screen1')}
      />
    </>
  );
}

// Initialize the Drawer navigator
const Drawer = createDrawerNavigator();

function DrawerNavigation() {
  return (
    <>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Screen1" component={Screen1} />
          <Drawer.Screen name="Screen2" component={Screen2} />
          <Drawer.Screen name="Screen3" component={Screen3} />
        </Drawer.Navigator>
      </NavigationContainer>
      <NavigationContainer />
    </>
  );
}

export default DrawerNavigation;