0

I've found various examples using version 5 like this https://snack.expo.dev/Bkd0MKqb7 but can't seem to get this working using version 6.

Here's a snippet of my code showing the main drawer menu which is set to the left and then there is a nested drawer menu which is positioned to the right. When the button is clicked it opens the left menu, not the right. Is this possible?

This is how it looks so far...

Two drawers on the same page, but not in the same header

Thanks.

const MainDrawerNavigator = () => {
  return (
    <Drawer.Navigator screenOptions={{ drawerPosition: "left" }}>
      <Drawer.Screen
        name="Home"
        component={RightDrawerNavigator}
        options={({ navigation }) => ({
          headerRight: () => (
            <Button
              onPress={() => navigation.toggleDrawer()} 
              title="Options"
              color="#000000"
            />
          ),
        })}
      />
    </Drawer.Navigator>
  );
};

Here's the right drawer code:

const RightDrawerNavigator = () => {
  return (
    <Drawer.Navigator initialRouteName="TeamScreen" screenOptions={{ drawerPosition: "right", drawerType: "slide" }}>
      <Drawer.Screen name="TeamScreen" component={TeamScreen} options={{ headerShown: false, title: 'Team Home' }} />
    </Drawer.Navigator>
  );
};
Peter
  • 1
  • 2

0 Answers0