React native, Side menu not coming up

Question

I followed this tutorial https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7. And when I run on emulator, I get this error:

Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly

Then I changed this code:

export default createDrawerNavigator({
  Home: {
    screen: Home
  },
  Settings: {
    screen: Settings
  },
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});

to

const Nav = createDrawerNavigator({
  Home: {
    screen: Home
  },
  Settings: {
    screen: Settings
  },
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});
const Routes = createAppContainer(Nav);
export default Routes;

Then the app started working but when I click on

<Button onPress={() => this.props.navigation.navigate('DrawerOpen')} title="Settings"/>

Nothing happens(No error as well). I'm confused

Update If i use

<Button onPress={() => this.props.navigation.openDrawer()} title="Settings"/>

I get

undefined is not a function (evaluating '_this.props.navigation.openDrawer()') onPress C:\react\cash\src\Home.js:9:8 touchableHandlePress C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\TouchableNativeFeedback.android.js:196:11 _performSideEffectsForTransition C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:316:23 _receiveSignal C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:723:34 touchableHandleResponderRelease C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:452:17 invokeGuardedCallbackImpl C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:99 invokeGuardedCallback C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:343:16 invokeGuardedCallbackAndCatchFirstError C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:346:6 executeDispatch C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:724:32 executeDispatchesInOrderexecuteDispatchesAndRelease C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:892 executeDispatchesAndReleaseTopLevelforEachAccumulated C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:884:14 runEventsInBatch C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:1066:15 runExtractedEventsInBatch C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:1078 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2726:1 batchedUpdates$1 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17302:5 batchedUpdates C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2622:6 _receiveRootNodeIDEvent C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2725:2 receiveTouches C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2788:21 __callFunction__guardcallFunctionReturnFlushedQueue

Poptocrack Poptocrack · Accepted Answer · 2019-01-16T15:58:20

The tutorial you followed might be outdated, and is probably using the 2.x version of React-navigation.

They changed the way to open a drawer to:

this.props.navigation.openDrawer()

In this part of the doc, you can find what you want.

React native, Side menu not coming up

1 Answers