🚀React Native🚀 - react-navigation - force drawer item route navigation

13 Mar 2021

Github markdown version - can be easier to read

The main point is to overwrite navigation property passed to DrawerItemList

  const onPress = {
    dispatch: (event: any) => {
      const routeName = event?.payload?.name;
      if (routeName) {
        return props.navigation.reset({
          index: 0,
          routes: [{ name: routeName }]
       });
      }
      return props.navigation.closeDrawer();
    }
  }

Below is complete example

const FirstScreen = () => <View />;
const SecondScreen = () => <View />;

const FirstRouteStackNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Screen 1" component={FirstScreen} />
  </Stack.Navigator>
);
const SecondRouteStackNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Screen 2" component={SecondScreen} />
  </Stack.Navigator>
);

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View>
        <DrawerItemList
          {...props}
          navigation={onPress}
        />
      </View>
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Screen 1"
      drawerContent={(props) => <CustomDrawerContent {...props} />}
    >
      <Drawer.Screen name="Screen 1" component={FirstRouteStackNavigator} />
      <Drawer.Screen name="Screen 2" component={SecondRouteStackNavigator} />
    </Drawer.Navigator>
  );
};