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

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

• javascript
• reactjs
• react-native
• react-native-navigation

1 Answer 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/docs/en/getting-started.html