2

I'm using React-Native with React-Navigation V3

Here is the code I'm using for the DrawerNavigator and the StackNavigator

import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";
import MaterialIcon from "react-native-vector-icons/MaterialIcons";
import FontAwesome5Icon from "react-native-vector-icons/FontAwesome5";
import Home from "../Home";
import Profile from "../Profile";
import DrawerContainer from "../common/DrawerContainer";
import Colors from "../../helpers/Colors";

const styles = StyleSheet.create({
  drawerButton: {
    paddingRight: 20,
    paddingTop: 4
  },
  alertButton: {
    paddingLeft: 15,
    paddingTop: 2
  }
});

const DrawerStack = createDrawerNavigator(
  {
    Home: { screen: Home },
    Profile: { screen: Profile }
  },
  {
    // contentComponent: DrawerContainer,
    drawerPosition: "right",
    drawerWidth: 200
  }
);

const drawerButton = navigation => (
  <TouchableOpacity onPress={navigation.toggleDrawer}>
    <MaterialIcon
      name="menu"
      size={27}
      color="white"
      style={styles.drawerButton}
    />
  </TouchableOpacity>
);

const AlertButton = () => (
  <TouchableOpacity>
    <FontAwesome5Icon
      name="bell"
      size={21}
      color="white"
      light
      style={styles.alertButton}
    />
  </TouchableOpacity>
);

const AppStack = createStackNavigator(
  {
    DrawerStack: { screen: DrawerStack }
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      headerStyle: { backgroundColor: Colors.primary },
      title: "Title",
      headerTitleStyle: {
        fontFamily: "casual",
        marginTop: 5,
        textAlign: "left",
        flex: 1
      },
      headerTintColor: "white",
      headerLeft: drawerButton(navigation),
      headerRight: AlertButton()
    })
  }
);

export default AppStack;

For some reason, when I try to slide the drawer out of the way once it is opened, it doesn't work and neither does opening the drawer with a slide gesture.

I have only tested it on Android, Nexus 5 in the emulator and LG G4 real device.

Edgar Barber
  • 345
  • 3
  • 13
  • 1
    Possible duplicate of [React Native createDrawerNavigator not opening Navigation Drawer](https://stackoverflow.com/questions/53898153/react-native-createdrawernavigator-not-opening-navigation-drawer) – Nazır Dogan Dec 27 '18 at 10:17
  • do you have find any solution for this issue ? – Mojtaba Darzi Aug 29 '19 at 10:50

0 Answers0