Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.toggleDrawer() not working / missing documentation on how to use it in nested stacks #4285

Closed
eranbaroz opened this issue May 21, 2018 · 12 comments

Comments

@eranbaroz
Copy link

commented May 21, 2018

In addition to this closed issue:
#4266

I'm facing difficulty in code and method that used to work in version 1.4.0.

Current Behavior

in navigation.toggleDrawer() and error occurred - undefined is not function.

Expected Behavior

The drawer should toggle

How to reproduce

Your Environment

software version
react-navigation 2.0.1
react-native 0.55.3
node 8.11.1
npm or yarn yarn 1.6.0
@vonovak vonovak changed the title .toggleDrawer() not working / missing documentation on how to use in nested stakcs .toggleDrawer() not working / missing documentation on how to use in nested stacks May 21, 2018
@achmadk

This comment has been minimized.

Copy link

commented May 22, 2018

I have same problem with you, Mr @eranbaroz . My temporary solutions is using DrawerActions.toggleDrawer()'s action, then use it into dispatch function from navigation props.

For example:

import React, { PureComponent } from 'react'
import { withNavigation, DrawerActions } from 'react-navigation'

import { Header, Left, Body, Title, Right, Button, Icon } from 'native-base'

class OverviewsHeader extends PureComponent {
  toggleDrawer = () => {
    this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  }
  render () {
    return (
      <Header>
        <Left>
          <Button transparent onPress={this.toggleDrawer}>
            <Icon name='menu' />
          </Button>
        </Left>
        <Body>
          <Title>Overviews</Title>
        </Body>
        <Right>
          <Button transparent>
            <Icon name='more' />
          </Button>
        </Right>
      </Header>
    )
  }
}

export default withNavigation(OverviewsHeader)
@eranbaroz eranbaroz changed the title .toggleDrawer() not working / missing documentation on how to use in nested stacks .toggleDrawer() not working / missing documentation on how to use it in nested stacks May 23, 2018
@aboobakkar

This comment has been minimized.

Copy link

commented Jun 1, 2018

onPress={() => this.props.navigation.navigate('DrawerToggle')} worked for me

@p1ll0wf0rtress

This comment has been minimized.

Copy link

commented Jun 3, 2018

@aboobakkar's solution worked for me as well

@edualm

This comment has been minimized.

Copy link

commented Jun 4, 2018

I ran into this problem when trying to get a drawer to close itself. this.props.navigation.closeDrawer() would not work, but this.props.navigation.dispatch(DrawerActions.toggleDrawer()) worked just fine.

Note that this.props.navigation.navigate('DrawerToggle') did NOT work in this case.

@linux08

This comment has been minimized.

Copy link

commented Jun 8, 2018

@aboobakkar double tapping the button crashes the app

@brentvatne

This comment has been minimized.

Copy link
Member

commented Jun 8, 2018

@linux08 - not on the latest version

@brentvatne

This comment has been minimized.

Copy link
Member

commented Jun 11, 2018

no need to call dispatch anymore, closeDrawer() will work as expected on navigationOptions for screens within drawer and other screens deeper in that hierarchy as of 2.3.0 - https://github.com/react-navigation/react-navigation/releases/tag/2.3.0

@gwl002

This comment has been minimized.

Copy link

commented Jul 20, 2018

@edualm You can log the navigation props.Function openDrawer can only been found on the drawer navigator, the child navigator will not inherit it anymore.

@LesedimotaungNC

This comment has been minimized.

Copy link

commented Sep 15, 2018

@eranbaroz did you find a solution for this?

@eranbaroz

This comment has been minimized.

Copy link
Author

commented Sep 19, 2018

Hi @LesedimotaungNC yes I did, I used the dispatch method with version 2.12.1.

import { createStackNavigator, DrawerActions } from 'react-navigation';

let myStackNavigat = createStackNavigator({
            nestedDrawerStack
        }, {
            navigationOptions: ({ navigation }) => {
                return {
                    headerLeft: (<TouchableWithoutFeedback onPress={() => {
                        navigation.dispatch(DrawerActions.toggleDrawer());
                    }}>
                        <View style={styles.leftIconContainer}>
                            <View style={styles.leftIconLine}></View>
                            <View style={styles.leftIconLine}></View>
                            <View style={styles.leftIconLine}></View>
                        </View>
                    </TouchableWithoutFeedback>),
                    ...
                }
            }
        });
@allpwrfulroot

This comment has been minimized.

Copy link

commented Jan 6, 2019

I could be wrong, but I think getCustomActionCreators isn't working correctly in the latest version. I'm getting the "is not a function" errors again

@brentvatne

This comment has been minimized.

Copy link
Member

commented Jan 6, 2019

this should be resolved. if it is not working as expected still on the latest version, please create a new issue with a runnable example on https://snack.expo.io -- thanks!

@react-navigation react-navigation locked and limited conversation to collaborators Jan 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
10 participants
You can’t perform that action at this time.