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

DrawerToggle not working on Android #2760

Closed
robertftw opened this Issue Oct 16, 2017 · 16 comments

Comments

Projects
None yet
@robertftw

robertftw commented Oct 16, 2017

When using this.props.dispatch( NavigationActions.navigate({ routeName: "DrawerToggle" }) ); on Android the Drawer only opens but never closes. In redux store index goes from 1 (DrawerOpen) to 2 (DrawerToggle) back to 1 (DrawerOpen) again. Never back to 0 (DrawerClosed). Works fine on iOS though.
Workaround:
this.props.dispatch( NavigationActions.navigate({ routeName: this.props.nav.index === 1 ? "DrawerClose" : "DrawerOpen" }) );

TL;DR: ToggleDrawer on Android only opens it, doesn't close.

Whole screen:

import React from "react";
import { connect } from "react-redux";
import NavigationBar from "../components/common/navigationBar";
import { View, StyleSheet, Dimensions } from "react-native";
import {
  DrawerNavigator,
  addNavigationHelpers,
  NavigationActions
} from "react-navigation";
import routeConfig from "../components/routeConfig";
import * as Colors from "../styles/colors";
import DrawerMenuContainer from "../components/menu/drawerMenuContainer";

const { width, height } = Dimensions.get("window");

const MainNavigator = DrawerNavigator(routeConfig, {
  drawerPosition: "right",
  drawerWidth: width,
  contentComponent: DrawerMenuContainer
});

const initialState = MainNavigator.router.getStateForAction(
  MainNavigator.router.getActionForPathAndParams("home")
);

export const navReducer = (state = initialState, action) => {
  const nextState = MainNavigator.router.getStateForAction(action, state);
  console.log("appNavigator", nextState, state, action);
  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  navigationBar: {
    backgroundColor: Colors.flaktMiddleGrey
  }
});

class AppNavigator extends React.Component {
  getTitle = () => {
    let { nav } = this.props;
    let index = nav.routes[0].index;
    let nameKey = nav.routes[0].routes[index].key;
    return routeConfig[nameKey].title;
  };
  render() {
    const { routes, index } = this.props.nav.routes[0];
    const currentRoute = routes[index];

    console.log("appNav", this.props);
    return (
      <View style={styles.container}>
        <NavigationBar
          style={styles.navigationBar}
          title={this.getTitle()}
          hideLeftIcon
          showRightIcon
          hamburgerOpen={this.props.nav.index !== 0}
          onRightButtonPress={() => {
            this.props.dispatch(
              NavigationActions.navigate({
                routeName: "DrawerToggle"
              })
            );
          }}
        />
        <MainNavigator
          navigation={addNavigationHelpers({
            dispatch: this.props.dispatch,
            state: this.props.nav
          })}
        />
      </View>
    );
  }
}
const mapStateToProps = state => ({
  nav: state.nav
});

AppNavigator = connect(mapStateToProps)(AppNavigator);
export default AppNavigator;

software version
react-navigation beta-13
react-native 0.49.3
@smoleniuch

This comment has been minimized.

smoleniuch commented Oct 16, 2017

I have tried to toggle drawer navigator through reference like this:

render(){

 <View>
   <DrawerNavigator ref={(c)=>{this.drawerNavigator = c;}} />
</View>

}
toggleView(){

 this.drawerNavigator._navigation.navigate('DrawerToggle')

}

And it does not toggle it,only open.

@emregurler

This comment has been minimized.

emregurler commented Oct 16, 2017

same issue +1. It only opens drawer

@juangarcia-ts

This comment has been minimized.

juangarcia-ts commented Oct 19, 2017

Same issue. Any solution so far ?

@Ruchiranga

This comment has been minimized.

Ruchiranga commented Oct 20, 2017

+1
Encountered the same problem

@kelset kelset added the bug label Oct 20, 2017

sietseringers added a commit to privacybydesign/irma_mobile that referenced this issue Oct 22, 2017

Temporary imperfect fix for hamburger button not working on Android
Probably related: react-navigation/react-navigation#2760
On Android the hamburger menu has to be pressed twice. On iOS it works ok.
@spencercarli

This comment has been minimized.

Member

spencercarli commented Oct 25, 2017

@GantMan

This comment has been minimized.

Contributor

GantMan commented Oct 29, 2017

Yup, looks like a bug. Will try to get a fix in soon, unless someone else beats me to it.

@hanssonfredrik

This comment has been minimized.

hanssonfredrik commented Nov 13, 2017

Any progress on this one?

@aliceathens

This comment has been minimized.

aliceathens commented Nov 29, 2017

+1

2 similar comments
@sunnixx

This comment has been minimized.

sunnixx commented Nov 29, 2017

+1

@FlorianBergmann

This comment has been minimized.

FlorianBergmann commented Dec 1, 2017

+1

confiks added a commit to privacybydesign/irma_mobile that referenced this issue Dec 2, 2017

Temporary imperfect fix for hamburger button not working on Android
Probably related: react-navigation/react-navigation#2760
On Android the hamburger menu has to be pressed twice. On iOS it works ok.

confiks added a commit to privacybydesign/irma_mobile that referenced this issue Dec 2, 2017

Temporary imperfect fix for hamburger button not working on Android
Probably related: react-navigation/react-navigation#2760
On Android the hamburger menu has to be pressed twice. On iOS it works ok.
@himanshuverma09

This comment has been minimized.

himanshuverma09 commented Dec 8, 2017

For now I am using a hack for manual toggle in hamburger button component:

if (this.props.navigation.state.index === 0) {
    this.props.navigation.navigate('DrawerOpen');
}
else {
    this.props.navigation.navigate('DrawerClose');
}

@chapeljuice

This comment has been minimized.

chapeljuice commented Dec 18, 2017

@himanshuverma09 Thanks for the temporary work around. Looking forward to this actually getting fixed!

koen92 added a commit to koen92/irma_mobile that referenced this issue Dec 21, 2017

Temporary imperfect fix for hamburger button not working on Android
Probably related: react-navigation/react-navigation#2760
On Android the hamburger menu has to be pressed twice. On iOS it works ok.
@Thilagavathi1

This comment has been minimized.

Thilagavathi1 commented Dec 28, 2017

@spencercarli Any updates on this issue(this.props.navigation.navigate('DrawerToggle'))

@spencercarli

This comment has been minimized.

Member

spencercarli commented Jan 5, 2018

@Thilagavathi1 PR with fix pending #3191

@kelset

This comment has been minimized.

Contributor

kelset commented Jan 9, 2018

PR got merged, you can point to master to try it out until a new release is out

@kelset kelset closed this Jan 9, 2018

@Thilagavathi1

This comment has been minimized.

Thilagavathi1 commented Jan 12, 2018

Thanks for the fix ,now drawerToggle works fine :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment