Styjun

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):

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
   ,

   
   
   

   
   );

   
   

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

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.