React-native-navigation How to add a skip bottom to a drawer

Question

I'm new to react-native. I use react-native-side-menu to create a drawer and I add a bottom on the left side to skip to another page. when I push the bottom, the error code appeared. However, if I put the bottom in the homepage, it works. Why if I put it in the drawer it will crash?

The error message is undefined is not an object (evaluating '_this.props.navigation.navigate')

This is route stack App.js

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


import HomeScene from './homeScene';
import LoginScene from './loginScene';
import RegisterScene from './registerScene';
import TimetableScene from './timetable';
import ChatScene from './ChatScene';
import LeftMenu from './LeftMenu';


const SimpleApp = createStackNavigator({
    Login: {
      screen: LoginScene,
      navigationOptions: {  
          headerTitle: 'Login',  
      }
    },
    Home: {
      screen: HomeScene,
      navigationOptions: {  
          header: null, 
      }
    },
    Register: {
      screen: RegisterScene,
      navigationOptions: {  
          headerTitle: 'Register',  
      }
    },
    Timetable: {
      screen: TimetableScene,
      navigationOptions:{
          headerTitle: 'Timetable',
      }
    },

    //The page I want to skip

    Chat: {
      screen: ChatScene,
      navigationOptions:{
        headerTitle: 'Chat',
      }
    }

    LeftMenu:{
      screen: LeftMenu
    }

});
const AppContainer = createAppContainer(SimpleApp);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

LeftScene.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    SectionList
} from 'react-native';

export default class LeftMenu extends Component {
    constructor(props) {
        super(props);

        this.selectSideMenu = this.selectSideMenu.bind(this);
    }



    selectSideMenu() {
        this.props.onSelectMenuItem();
    }

    Chat = () => {
        const { navigate } = this.props.navigation;  
        navigate('Chat');  
    }
    render() {

        return (
            <View style={styles.container}>

                //The bottom to skip to "Chat" page but will respond error

                <TouchableOpacity
                    onPress={this.Chat}  
                    style={styles.button}>
                    <Text
                        style={styles.btText}>Chat</Text>
                </TouchableOpacity>


            </View>
        );
    }
}

I think maybe the wrong code from the following code in LeftScene.js

Chat = () => {
        const { navigate } = this.props.navigation;  
        navigate('Chat');  
    }

The this.props can only get the value from the parent component. The parent component of LeftMenu is homeScene, homeScene has no navigation so it doesn't work. And because of App.js is parent component of homeScene, so if I put the skip bottom in homeScene it can work. But I don't know how to figure out it...

homeScene.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    Dimensions
} from 'react-native';

let { width, height } = Dimensions.get('window');


import SideMenu from 'react-native-side-menu'
import Menu from './LeftMenu'

export default class LeftSideMenu extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
        }

        this.SelectMenuItemCallBack = this.SelectMenuItemCallBack.bind(this);
    }


    SelectMenuItemCallBack() {
        this.setState({
            isOpen: !this.state.isOpen,
        })
    }

    SelectToOpenLeftSideMenu() {
        this.setState({
            isOpen: true,
        })
    }

    Chat = () => {
        const { navigate } = this.props.navigation;
        navigate('Chat');
    }

    render() {

        const menu = <Menu onSelectMenuItem={this.SelectMenuItemCallBack} />;

        return (
            <SideMenu
                menu={menu}
                isOpen={this.state.isOpen}
                onChange={(isOpen) => {
                    this.setState({
                        isOpen: isOpen,
                    })
                }}
                menuPosition={'left'}
                openMenuOffset={0.75 * width}
                edgeHitWidth={200}

            >
                <View
                    style={styles.top}>
                    //The bottom to open the drawer
                    <TouchableOpacity
                        onPress={() => this.SelectToOpenLeftSideMenu()}
                        style={styles.Fbutton} >
                        <Text
                            style={styles.btText}>F</Text>
                    </TouchableOpacity>


                </View>

                //The bottom to skip to "Chat" page and works
                <View style={styles.container}>
                <TouchableOpacity
                        onPress={this.Chat}
                        style={styles.button}>
                        <Text
                            style={styles.btText}>Chat</Text>
                    </TouchableOpacity>
                </View>



            </SideMenu>

          );
    }
}

I expect the bottom to skip to the "Chat" page on the homeScene can be put in the drawer

Answer 1

I can see your homeScene.js has imported LeftMenu , thus navigation props will not pass into LeftMenu from react-navigation . Try to pass the navigation to LeftMenu as props in the homeScene.js

const menu = <Menu onSelectMenuItem={this.SelectMenuItemCallBack} navigation={this.props.navigation} />;