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!

In my code, `this.props.navigation.openDrawer()` is not working. If you know the reason, please let me know why it's not working. — Derek Yang, Dec 15 '19 at 10:00
I've fixed it but still has some bugs. I imported the following code and it works now. `import { DrawerActions } from 'react-navigation-drawer'` ... `this.props.navigation.dispatch(DrawerActions.openDrawer());` For now, the drawer is opened but navigation is done before I click the drawer items in the drawer. — Derek Yang, Dec 15 '19 at 12:26

score 0 · Accepted Answer · answered Dec 15 '19 at 20:10

0

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()

answered Dec 15 '19 at 20:10

kodak

81
11

Thanks for your answer. I changed the code as you said and opendrawer is working now. My problem is when the drawer is opened, navigation is done automatically even though I don't click any items. I've checked the code and tried by removing all `initialRouteName` options. But still, auto navigation is done. (in this case, the route which is navigated is the first routing option in drawerNavigator. In above my code, Maincategory is done automatically.) – Derek Yang Dec 16 '19 at 08:30
Remove your navigation methods (StackNavigator, DrawerNavigator, Switch Navigator) from your render method and put them outside it. Your code should look something like this: `export default class AppNavigator extends React.Component { render() { return ; } }` – kodak Dec 17 '19 at 12:36
I've tried as you said, but there is still auto-navigation. I'm going to post another question about this issue. Thanks for your kind answer. – Derek Yang Dec 18 '19 at 08:57

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

1 Answers1

Linked