React Native createDrawerNavigator not opening Navigation Drawer

Implement createDrawerNavigator but not working.

Main Component

   import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer ,createDrawerNavigator } from 'react-navigation';  
import { Icon } from 'react-native-elements';


const MenuNavigator = createStackNavigator({
  Menu: { screen: Menu },
  Dishdetail: { screen: Dishdetail }
},
{
  initialRouteName: 'Menu',
  navigationOptions: {
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTintColor: '#000',
      headerTitleStyle: {
          color: "#fff"            
      }
  }
}
);

const HomeNavigator = createStackNavigator({
  Home: { screen: Home }
}, {
  navigationOptions: ({ navigation }) => ({
    headerStyle: {
        backgroundColor: "#512DA8"
    },
    headerTitleStyle: {
        color: "#fff"            
    },
    headerTintColor: "#fff"  
  })
});

const MainNavigator = createDrawerNavigator({
  Home: 
    { 
      screen: HomeNavigator,
      navigationOptions: {
        title: 'Home',
        drawerLabel: 'Home'
      }
    },
  Menu: 
    { screen: MenuNavigator,
      navigationOptions: {
        title: 'Menu',
        drawerLabel: 'Menu'
      }, 
    }
}, {
drawerBackgroundColor: '#D1C4E9',
});

class Main extends Component {


  render() {

    return (

      <View style={{flex:1,paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
            <MainNavigator />
        </View>

    );
  }
}

const App = createAppContainer(MainNavigator);


export default App;

package.json
 "dependencies": {
        "feather-icons-react": "^0.3.0",
        "react": "16.6.3",
        "react-native": "0.57.8",
        "react-native-elements": "^1.0.0-beta7",
        "react-native-gesture-handler": "^1.0.12",
        "react-native-vector-icons": "^4.6.0",
        "react-navigation": "^3.0.9"
      },
      "devDependencies": {
        "babel-jest": "23.6.0",
        "jest": "23.6.0",
        "metro-react-native-babel-preset": "0.51.0",
        "react-test-renderer": "16.6.3"
      },

From Side bar not opening the navigation drawer,I have added all libraries from react-navigation. I am running this app on android. In code there is no error but don’t know why navigation drawer isn’t opening correctly.

Help will be highly appreciated

Thanks

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This is because of react-native-gesture-handler package. you should link this package. need to do some manuel setups. check MainActivity.java part.

https://reactnavigation.org/docs/en/getting-started.html


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x