How to use stackNavigation with drawerNavigation in react native and use toggleDrawer() in stackNavigation component

Question

I use react-navigation in my project. I want to use stack navigation in drawer navigation. I want to use this.navigation.toggleDrawer() in stack navigation screens, but not append this in stack navigation screens.

// drawer-navigation.js

import React, { Component } from 'react';
import { DrawerNavigator } from 'react-navigation';
import StackNavigation from './stack-navigation';
import Screen1 from '../screens/screen1'

const RootDrawer = DrawerNavigator({
    Home: {
        screen: StackNavigation,
    },
    screen1: Screen1

},{
    // set default screen
    initialRouteName: 'Home',
    drawerPosition: 'right'
})

export default class DrawerNavigation extends Component {
    render() {
        return (<RootDrawer />);
    }
}

// stack-navigations

import React from 'react';
import { StackNavigator } from 'react-navigation';
import Home from '../screens/home';

const RootStack = StackNavigator({
    Home: {
        screen: Home,

        navigationOptions:{
            header: null
        }
    }
},{
    // set default screen
    initialRouteName: 'Home',

    // defualt style for navigation bar
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#F55656',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },      
})


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

Here is my Home Component where I want to add a button in the HomeSearch Component which on click opens my drawer, but that gives me the following error:

this.navigation.toggleDrawer() is not a function

// home.js (target screen)

import React, { Component } from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';
import SplashScreen from 'react-native-smart-splash-screen';

import Header from '../components/header';
import HomeSearch from '../components/homeSearch';

class Home extends Component {
    constructor(props){
        super(props);

    }


    componentDidMount(){
        // control splash screen
        SplashScreen.close({
            animationType: SplashScreen.animationType.scale,
            duration: 1500,
            delay: 1200,
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar 
                    barStyle="light-content"
                    animated={true}
                    backgroundColor='#F55656'
                />
                <Header/>
                <HomeSearch onPress={this.navigation.toggleDrawer()}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'rgba(236, 235, 231, 0.35)',

    }
})

export default Home;

Answer 1

Solution

This is the wrong way exporting ReactNavigation components.

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

Right way.

export default RootStack;

Your RootDrawer would use same way. And use onPress=this.props.navigation.toggleDrawer.

Why

createStackNavigation and createDrawerNavigation wrap components and passed down props to them.

In your case, your drawerNavigator component inject props related in navigation to your stackNavigator component. But your RootStack cannot receive any props from drawerNavigator cause you wrapped your RootStack with React Component. That is why it is not work well. Just export your navigation componens as RootStack and RootDrawer.

this.props.navigation: the navigation prop is passed in to every screen component (definition) in stack navigator (more about this later in "The navigation prop in depth").

The navigation prop passed down to a navigator only includes state, dispatch, and addListener. This is the current state of the navigator, and an event channel to send action requests.

Official document