React Native drawer navigation: how to open drawer by clicking custom button in specific scene?

Question

I've tried to open the drawer by clicking the following button (screenshot) in a specific scene. current status

and here goes my code.

// App.js
import React, { Component } from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer'
import SplashScreen from 'react-native-splash-screen'
import RNBootSplash from "react-native-bootsplash"

import MainCategory from './src/Scenes/MainCategory'
import SubCategory from './src/Scenes/SubCategory'
import DetailScene from './src/Scenes/DetailScene'
import Questions from './src/Scenes/Questions'
import Ruleta from './src/Scenes/Ruleta'

import CustomDrawerComponent from './src/Components/CustomDrawerComponent'

export default class MainRouter extends Component {
  componentDidMount() {
      SplashScreen.hide()
      RNBootSplash.hide({ duration: 250 })
  }
  render() {
    const StackNavigator = createStackNavigator({
      MainCategory: {screen: MainCategory},
      SubCategory: {screen: SubCategory},
      DetailScene: {screen: DetailScene},
      Questions: {screen: Questions},
      Ruleta: {screen: Ruleta},
    }, {
      initialRouteName: "MainCategory",
      headerMode: "none"
    })

    const DrawerNavigator = createDrawerNavigator({
      MainCategory: {screen: MainCategory},
    }, {
      drawerPosition: 'right',
      contentComponent: CustomDrawerComponent
    })

    const MainNavigator = createSwitchNavigator({
      Stack: StackNavigator,
      Drawer: DrawerNavigator,
    }, {
      initialRouteName: 'Stack',
      contentComponent: CustomDrawerComponent
    })

    const AppContainer = createAppContainer(MainNavigator)
    return(
      <AppContainer />
    )
  }
}

// Specific scene
import React, { Component } from 'react'
import { ScrollView, StatusBar, View, TouchableOpacity, Text, Image, Modal } from 'react-native'

import HeaderBar from '../Components/HeaderBar'

export default class Questions extends Component {
    constructor(props) {
        super(props)
        this.state = {
            headerTitle: props.navigation.getParam('headerTitle'),
            catId: props.navigation.getParam('catId'),
        }
    }

    openSideMenu = () => {
        this.props.navigation.toggleDrawer
        this.props.navigation.openDrawer()
    }

    render() {
        return (
            <View style={rootStyle}>
                <View>
                    <StatusBar hidden={false} translucent backgroundColor="transparent" barStyle="light-content" />
                    <HeaderBar title={headerTitle} onPressLeft={() => this.props.navigation.goBack()} leftShow={true} onPressRight={this.openSideMenu} rightShow={true} />
                </View>
                <ScrollView>
                    <QuestionList todoQues={todoQues} favQues={favQues} action={this.action.bind(this)} />
                </ScrollView>
            </View>
        )
    }
}

But it's not working.

I expect the result like the following screenshot. expected result

Please let me know what I should do more and how to use the drawer navigator in a specific scene.

Thanks for your time!

Answer 1

First of all instead of calling the method this.props.navigation.toggleDrawer() , call the method this.props.navigation.dispatch(DrawerActions.openDrawer()) . You also need to import DrawerActions for this to work. And remove the first function that you called in your openSideMenu function because you don't need the this.props.navigation.openDrawer()