React-native DrawerNavigator does not show up

Question

I am trying to create simple DrawerNavigator. But it does not show up :(

import React, { Component } from 'react';
import { Text } from 'react-native';
import { createAppContainer, createDrawerNavigator } from 'react-navigation';

class One extends Component {
    render() {
        return (<Text>One</Text>);
    }
}

class Two extends Component {
    render() {
        return (<Text>Two</Text>);
    }
}

const DrawerStack = createDrawerNavigator(
    {
        One: {screen: One},
        Two: {screen: Two},
    }, {
    }
);

const App = createAppContainer(DrawerStack);
export default App;

This is what I see (no drawer navigation is displayed):

Answer 1

1. Swipe from the left and you will see the drawerNavigation works

2. the react-navigation createDrawerNavigator does not provide stack navigation by default, if you are looking to see a header with the menu icon, then you have to make your screens (one, two) be stackNavigation.

   NB: import Icon from expo or react-native-icons

Updated:: using native-base

1. install native-base ( ** npm install native-base --save** )

2. import Header, Icon, Container, Left, Content from native-base

   class One extends Component {

    render() { return ( <Container> <Header> <Left> <Icon name="md-menu" onPress={() => this.props.navigation.openDrawer()} /> </Left> </Header> <Content> <Text>Screen One</Text> </Content> </Container> ); } 

   }

   class Two extends Component {

    render() { return ( <Container> <Header> <Left> <Icon name="md-menu" onPress={() => this.props.navigation.openDrawer()} /> </Left> </Header> <Content> <Text>Screen Two</Text> </Content> </Container> ); } 

   }

   const DrawerStack = createDrawerNavigator( { one:{screen:One}, two: {screen: Two} }, {

   } );

Answer 2

Drawer Swipe Gesture is not working because in the new version of react navigation v3 npm. We need to install react-native-gesture-handler npm separately. They create separated npm package for touch & gesture handling and recognition.

Step 1.

npm i react-native-gesture-handler

Step 2.

react-native link react-native-gesture-handler

Step 3.(optional )

If step 2 is not worked properly, code is confogured properly

To finalize the installation of react-native-gesture-handler for Android, be sure to make the necessary modifications to MainActivity.java:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

No additional steps are required for iOS.

Please Refer the following document for more information:-

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

2. https://www.npmjs.com/package/react-native-gesture-handler/v/1.0.0-alpha.34?activeTab=readme

3. https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Answer 3

It's good to take advantage of the native base.

The relevant link is here.

The navigation links are here.

You can also see the component here, so you can use the features you need.

Drawer navigation example.js:

import React, { Component } from "react";
import HomeScreen from "./HomeScreen.js";
import MainScreenNavigator from "../ChatScreen/index.js";
import Profile from "../ProfileScreen/index.js";
import SideBar from "../SideBar/SideBar.js";
import { DrawerNavigator } from "react-navigation";
const HomeScreenRouter = DrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Chat: { screen: MainScreenNavigator },
    Profile: { screen: Profile }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);
export default HomeScreenRouter;

Easy to operate without special implementation.

If you have any further comments, please leave a comment. And if my answer is good, please make a choice.