How to add dynamic drawer elements in react-navigation V5?

Question

I'm trying to add a dynamic drawer to my app.

function CustomDrawerContent(props) {
  return (
    <SideMenu/>
  );
}

function DrawerStack() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerStyle={{
        backgroundColor: '#ffffff',
        width: metrices.DEVICE_WIDTH * 0.7,
      }}
      drawerContent={props => <CustomDrawerContent {...props} />}
      >
      <Drawer.Screen name="Home" component={Home} />
    </Drawer.Navigator>
  );
}

Like the previous react-navigation, there is no contentComponent. so i have done this as suggested by the official docs of react navigation. but cannot get the dynamic sidemenu.

Answer 1

Your SideMenu should look like this :

Each line will be a DrawerItem, you have an example from the official website.

import {
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem
} from '@react-navigation/drawer'

function DynamicList(props) {
    const { elements } = props 
    return elements.map(element => (
        <DrawerItem
            key={emenet.key}
            label={element.label}
            onPress={element.onPress}
        />
    ))
}

function SideMenu(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => Linking.openUrl('https://mywebsite.com/help')}
      />

      {/* Here you can add as many as DrawerItems you want */}

      <DynamicList />
    </DrawerContentScrollView>
  );
}