Drawer doesn't work on Android @react-navigation

#1

I have a problem about react-navigation.
DrawerToggle,DrawerOpen,DrawerClose don’t work on Android(It works fine on iOS). swiping is fine.

Here is my code.


export const Draw = DrawerNavigator({
  Tabs: { screen: Tabs,
    navigationOptions: {
      title: 'Home',
      drawerIcon: <FontAwesome name="home" size={24} color="#4CAF50" />,
    },
  },
  MyPage: { screen: MyPage,
    navigationOptions: {
      title: 'My Page',
      drawerIcon: <FontAwesome name="user" size={24} color="#4CAF50" />,
    },
  },
}, {
  drawerWidth: 280,
  drawerPosition: 'right',
  contentComponent: props => <SlideBar param={props} />,
});

export const Root = StackNavigator({
  Draw: { screen: Draw },
  Auth: { screen: Auth },
  EditProfile: { screen: EditProfile },
}, {
  navigationOptions: ({ navigation }) => ({
    headerRight: <HeaderIcon onPress={() => {
      console.log("DrawerToggle")
      navigation.navigate('DrawerToggle');
    }}
    />,
  }),
});

my library version is here.

"expo": "^25.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
"react-navigation": "^1.0.0-beta.23",

this expo snack code seems same issue…
When pressing “Home drawer open”, there is no response…
https://snack.expo.io/Sk6z1ZKLf

Could you help me??

#2

as you can see from the issue where you found that snack, this is a bug: https://github.com/react-navigation/react-navigation/issues/2743

there is no solution at the time. don’t nest drawers within tabs for now.

2 Likes
#3

Changing navigator structure from Stack->Drawer to Drawer->Stack,
Drawer navigate becomes to work.

this is not fully required specifications …but I can get minimum require.
Thank you Mr.notbrent.

export const HomeStack = StackNavigator({
  Tabs: { screen: Tabs },
  Auth: { screen: Auth },
  EditProfile: { screen: EditProfile },
}, {
  navigationOptions: ({ navigation }) => ({
    headerRight: <HeaderIcon onPress={() => {
      console.log("DrawerToggle")
      navigation.navigate('DrawerToggle');
    }}
    />,
  }),
});

export const Root = DrawerNavigator({
  HomeStack: { screen: HomeStack,
    navigationOptions: {
      title: 'Home',
      drawerIcon: <FontAwesome name="home" size={24} color="#4CAF50" />,
    },
  },
  MyPage: { screen: MyPage,
    navigationOptions: {
      title: 'My Page',
      drawerIcon: <FontAwesome name="user" size={24} color="#4CAF50" />,
    },
  },
}, {
  drawerWidth: 280,
  drawerPosition: 'right',
  contentComponent: props => <SlideBar param={props} />,
});
closed #4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.