CODEWITHSUNDEEP
androidreactjsreact-native
Lusheez
Lusheez

Reputation: 77

DrawerNavigator inside the header of a StackNavigator

I have a DrawerNavigator

const Drawer = createDrawerNavigator({
  Home: { screen: Home},
  Profile: { screen: Profile}
});

I have a DrawerButton that looks like this

const DrawerButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => {props.navigation.navigate('DrawerOpen')}}>
        <Image
          source={require('../assets/buttons/menu.png')}
          style={{ width: 200, height: 80, resizeMode: 'contain' }}
        />
      </TouchableOpacity>
    </View>
  );
};

I have a StackNavigator, where I change the navigationsOptions at every screen.

const AppRouteConfigs = createStackNavigator({
  Drawer: {
    screen: Drawer,    
  },
  Login: {
    screen: Login,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerTransparent: true
    })
  },
  Home: {
    screen: Home,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerStyle: {
        backgroundColor: colors.blue
      },
      headerTitle: <NavBarComponent />,
      headerRight:  <DrawerButton navigation={navigation} />,
      headerLeft: (
        <View style={{ padding: 15, paddingLeft: 10 }}>
          <Icon
            name="chevron-left"
            size={25}
            style={{ color: colors.white }}
            onPress={() => navigation.goBack()}
          />
        </View>
      )
    })
  });

I would like that when I click on the right of the header, the Drawer menu opens. This doesn't work. Nothing happens at all for now when I click on it. I'm using React-Navigation 3.0.9. The navigation.goBack() functions, and the button is correctly clicked (if I assign props.navigation.navigate('Home') to the onPress() function of the button, it navigates there as expected). I'm testing with an Android device.

How could I make it work ?

Upvotes: 1

Views: 1793

Answers (1)

AKAP
AKAP

Reputation: 526

You can't open or close drawer in a scene/screen which isn't defined inside the Drawer-Navigator.

Drawer can be toggled from any scene which is defined in it. So you should define Home inside it rather then in StackNavigator like this - 

const Drawer = createDrawerNavigator({
  Profile: { screen: Profile}
  Home: {
    screen: Home,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerStyle: {
        backgroundColor: colors.blue
      },
      headerTitle: <NavBarComponent />,
      headerRight:  <DrawerButton navigation={navigation} />,
      headerLeft: (
        <View style={{ padding: 15, paddingLeft: 10 }}>
          <Icon
            name="chevron-left"
            size={25}
            style={{ color: colors.white }}
            onPress={() => navigation.goBack()}
          />
        </View>
      )
    })
  }
});

const AppRouteConfigs = createStackNavigator({
  Drawer: {
    screen: Drawer,    
  },
  Login: {
    screen: Login,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerTransparent: true
    })
  },
});

Also you can use toggleDrawer function provided by react-navigation to toggle the drawer 

const DrawerButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={props.navigation.toggleDrawer}>
        <Image
          source={require('../assets/buttons/menu.png')}
          style={{ width: 200, height: 80, resizeMode: 'contain' }}
        />
      </TouchableOpacity>
    </View>
  );
};

Hope it helps.

Upvotes: 1

Related Questions