React Native How to open Drawer by icon

Question

I want to open Drawer by an icon but I don't know how it's work, could you help me please? I used the props but I don't know if it's the best or a good idea. Also, if it's possible, how can I don't see the "home" name in my drawer but have the Mainpage when I lauch my app?(This question is optionnal)

import React from 'react'
import MainPage from '../Components/MainPage'
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function _MainPage({ navigation }) {
    return (
        <MainPage onPress={() => navigation.openDrawer()}/>
    );
}

class Navigation extends React.Component {
    
    render() {
          return (
              <NavigationContainer>
                    <Drawer.Navigator initialRouteName="Home">
                        <Drawer.Screen name="Home" component={_MainPage}/>
                    </Drawer.Navigator>
              </NavigationContainer>
          );
      }
  }

export default Navigation

import React from 'react'
import { View, Text, Image, StyleSheet, Touchable, TouchableOpacity } from 'react-native'
import Mode from './Mode'
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font'

let customFonts = {
    'bungee': require ('../assets/fonts/Bungee-Regular.ttf')
}

class MainPage extends React.Component {
    
    _goToDrawer() {
        return(
            <TouchableOpacity 
                style={styles.image}
                onPress={ () => this.props.onPress}>
                <Image source={require('../Images/menu.png')} />
            </TouchableOpacity>
        )
    }

    state = {
        fontsLoaded: false,
    };

    async _loadFontsAsync() {
        await Font.loadAsync(customFonts);
        this.setState({ fontsLoaded: true });
    }

    componentDidMount() {
        this._loadFontsAsync();
    }
    
    render() {
        if (this.state.fontsLoaded) {
            return (
                <View style={styles.main_container}>
                    {this._goToDrawer()}
                    <View style={styles.title_container}>
                        <Text style={styles.title}>Roadeo</Text>
                    </View>
                    <View style={styles.normal_container}>
                        <Mode style={styles.mode} title="NORMAL" />
                        <Mode style={styles.mode} title="AVANCÉ" />
                        <Mode style={styles.mode} title="HOT"    />
                        <Mode style={styles.mode} title="PREMIUM"/>
                    </View>
                </View>
            )
        } else {
            return <AppLoading/>
        }
    }
}

const styles = StyleSheet.create({
    main_container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: "#E1D6D6",
    },
    title_container: {
        position: 'absolute',
        top: 130
    },
    title: {
        fontSize: 45,
        color: "#FE5858",
        fontFamily: 'bungee'
    },
    normal_container: {
        position: 'absolute',
        top: 250,
        height: 450,
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    mode: {
        color: '#FFFFFF',
        fontSize: 25,
        fontFamily: 'bungee',
        backgroundColor: "#B2ADAD",
        height: 70,
        width: 300,
        borderRadius: 25,
        textAlign: 'center',
        textAlignVertical: 'center'
    },
    image: {
        position: 'absolute',
        top: 40,
        left: 20
    }
})

export default MainPage

Thx everyone

Answer 1

Your approach seems to be correct, but there is a typo here, in the _goToDrawer func, which results in navigation.openDrawer not being called:

onPress={ () => this.props.onPress}>
// should be:
onPress={ () => this.props.onPress() }>
// or:
onPress={this.props.onPress}>