Navigatdraweror does not work

Question

I performed the configuration of Drawernavigator on with the React-navigation 3.x, it seems the code is correct, but it just doesn’t work, so I swipe the finger through the screen it just doesn’t come. Follow below the codes:

Construction of the Drawernavigator

import React from 'react'
import { Platform, Dimensions } from 'react-native'
import { createDrawerNavigator, createAppContainer } from 'react-navigation';

import Home from './screens/Home';
import Page1 from './screens/Page1';
import Page2 from './screens/Page2'

const WIDTH = Dimensions.get('window').width

const drawerConfig = {
  drawerWidth: WIDTH * 0.83,
}

const Navigator = createDrawerNavigator({
  Home: {
    screen: Home
  }
}, drawerConfig);

export default createAppContainer(Navigator)

Call from Drawernavigator in the application:

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

import Navigator from './src/Navigator'

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Navigator />
      </View>
    );
  };
}

const styles = new StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
})

Answer 1

The problem was not actually code, but rather a missing dependency

react-native-gesture-handler

Below is the tutorial on how to solve the problem for Android and iOS.

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

Answer 2

Good afternoon, here’s an example to create a stack for Home and wrap it in Drawer,

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import {
  createStackNavigator,
  createDrawerNavigator,
  createAppContainer,
  DrawerActions,
} from 'react-navigation';

const HomeExample = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <Text style={{ textAlign: 'center' }}>Conteudo da Home</Text>
  </View>
);

const NavigationHeaderLeftExample = ({ onPressCallback }) => (
  <TouchableOpacity onPress={onPressCallback}>
    <Text>OPEN</Text>
  </TouchableOpacity>
);

const DrawerContentExmple = () => <Text style={{ paddingTop: 50 }}>MENU</Text>;

const HomeStack = createStackNavigator(
  {
    HomeExample,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      headerTitle: 'Meu Home',
      headerLeft: (
        <NavigationHeaderLeftExample
          onPressCallback={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        />
      ),
    }),
  },
);

const DrawerNavigator = createDrawerNavigator(
  {
    Main: HomeStack,
  },
  {
    contentComponent: () => <DrawerContentExmple />,
  },
);

export default createAppContainer(DrawerNavigator);

Answer 3

 `  package com.appteste;

     import com.facebook.react.ReactActivity;

    //include this:

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


         public class MainActivity extends ReactActivity {

        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */

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

      //And this:

       + @Override
        + protected ReactActivityDelegate createReactActivityDelegate() {
        + return new ReactActivityDelegate(this, getMainComponentName()) {

        + @Override
        + protected ReactRootView createRootView() {
        + return new RNGestureHandlerEnabledRootView(MainActivity.this);
        + }
      + };
     +}
    }`

Answer 4

Use the createStackNavigator and remove the createAppContainer, as follows:

import { createDrawerNavigator, createStackNavigator } from 'react-navigation';
...
const AppStack = createStackNavigator({ Navigator: { screen: Navigator } });
export default AppStack;