How to add section divider in navigation drawer using react navigation

You'll need to use the contentComponent prop to make custom changes. Check out the docs

If you are using DrawerItem component you can use itemStyle prop to add style as follows

const props = {
        itemStyle: {
            borderBottomWidth: 1,
            borderColor: '#E2E4E8',
        }
}

<DrawerItems {...props} />

You can also modify the style of container containing all items with itemsContainerStyle prop.

Check official docs here.

• 3.x: https://reactnavigation.org/docs/3.x/drawer-navigator#contentoptions-for-draweritems

• 4.x: https://reactnavigation.org/docs/4.x/drawer-navigator#contentoptions-for-draweritems

• 5.x: DrawerContent is default drawer Item from v.5 You can pass props to it using drawerContentOptions object in Drawer.Navigator component. https://reactnavigation.org/docs/5.x/drawer-navigator#drawercontentoptions

  You can also pass custom drawer component using drawerContent prop. https://reactnavigation.org/docs/5.x/drawer-navigator#drawercontent

• 6.x: Custom component can be added using drawerContent prop https://reactnavigation.org/docs/drawer-navigator#drawercontent

  Style to drawerItem is changed to https://reactnavigation.org/docs/drawer-navigator#draweritemstyle

1. Just add this code:

const Seperator = () => <View style={styles.separator} />; 

at the top of your code that you want to have the section divider/separator on. If it's a navigation drawer, menu, categories or etc.

2. Add this styling prop:

  separator: {
    marginVertical: 8,
    borderBottomColor: "#737373",
    borderBottomWidth: StyleSheet.hairlineWidth
  }

3. Add section divider/separator between each section, menu, category block of code that you want to separate them like this:

//Block of code of first section/menu/category starts from here

   <Icon.Button
          name="th-large"
          raised={true}
          backgroundColor="#ffa500"
          size={30}
          onPress={() => {
            Linking.openURL("https://www.buymeacoffee.com/splendor");
          }}
        >
          <Text style={{ fontSize: 15 }}>
            Herat: The "Academy" of Prince Bay Sunghur (1420-1433)
          </Text>
        </Icon.Button>
        **<Seperator />**

//Block of code of first section/menu/category ends here

//Block of code of second section/menu/category starts from here

        <Icon.Button
          name="th-large"
          raised={true}
          backgroundColor="#ffa500"
          size={30}
          onPress={() => {
            Linking.openURL("https://www.buymeacoffee.com/splendor");
          }}
        >
          <Text style={{ fontSize: 15 }}>
            Venice, Istanbul, and Herat (15th Century)
          </Text>
        </Icon.Button>
        **<Seperator />**

//Block of code of second section/menu/category ends here

//Block of code of third section/menu/category starts from here

        <Icon.Button
          name="th-large"
          raised={true}
          backgroundColor="#ffa500"
          size={30}
          onPress={() => {
            Linking.openURL("https://www.buymeacoffee.com/splendor");
          }}
        >
          <Text style={{ fontSize: 15 }}>
            The Age of Bihzad of Herat (1465-1535)
          </Text>
        </Icon.Button>
        **<Seperator />**

//Block of code of thirds section/menu/category ends here