Side Menu is not displayed in the app made in React-Native

Question

I’m developing an APP in React-On, I need to display a menu-left side. Although it does not display any error message, the side menu does not appear. I am using React-navigation-Drawer to create the menu. The code is below. Any questions you may ask!

Menu

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



import Login from './screen/Login';
import HomeScreen from './screen/Home';
import EmCartazScreen from './screen/EmCartaz';
import PerfilScreen from './screen/Perfil';
import RecuperarContaScreen from './screen/RecuperarConta';


const Menu = createDrawerNavigator(
    {
        Home: HomeScreen

    }
);  


export default createAppContainer(Menu);

Home

import React, {Component} from 'react';
import { View, Text, Image, ScrollView } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';


import styles from '../css/style';

export default class Home extends Component{

  static navigationOptions = ({ navigation }) =>{
    drawerLabel: 'Home'
  }

  render(){

    return(


          <View style={styles.container}>
            <Text style={styles.texto}>
              Seja Bem Vindo !!
            </Text>

          <Text 
            style={styles.recuperarConta}
            onPress={() => this.props.navigation.goBack()}
          >
            Sair
          </Text>

          </View>
        );
    }
}

Index

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import Menu from './src/Menu';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Menu);

Json of the project

{
  "name": "aprendareactnative2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^2.0.0-alpha.22",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.3",
    "react-navigation-stack": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.8.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

According to your comment, the menu appears if you add a button on any screen.

To make the menu appear on shutdown, you will need to edit the file Mainactivity.java, inside your project, it is in the folder android/app/src/main/java/com/

You will need to add some Mports and add the createReactActivityDelegate method. Follow an example:

package com.graficos;

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 {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "graficos";
  }

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

}

After changing the file, by terminal, at the project root, type

react-native run-android

And test your app again.

More information:

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