navigation - React DrawerNavigation Is Not Working (Nothing Happens) While I Drag To Open Side Menu

Question

I'm trying to introduce DrawerNavigation under StackNavigation. My StackNavigation is working fine. But when I'm dragging the screen DrawerNavigation is not working. Nothing happens...No errors also.

I am using TouchableOpacity for the list items. Though I don't think so, is there any chance it is occurring due to the first touch on list-item??? If not, then can anyone point me out what the issue is? I really appreciate any help you can provide.

I have given my Navigator.Js code here and a video Url to understand better what is happening for my case.

Video URL - https://drive.google.com/file/d/1MhD3gB8Pp4tqbXr1HktOPa-2xOqW0xoA/view?usp=sharing

Answer 1

Instead of wrapping DrawerNavigator inside StackNavigator, wrap your StackNavigator inside DrawerNavigator.

Working Example: Expo Snack

Output:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const StackNav = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={() => <Text>Login</Text>} />
      <Stack.Screen name="Register" component={() => <Text>Register</Text>} />
    </Stack.Navigator>
  );
};
export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Stack" component={StackNav} />
          <Drawer.Screen
            name="HomeNews"
            component={() => (
              <View style={styles.container}>
                <Text>HomeNews</Text>
              </View>
            )}
          />
          <Drawer.Screen
            name="StateNews"
            component={() => (
              <View style={styles.container}>
                <Text>StateNews</Text>
              </View>
            )}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});