'How to add section divider in navigation drawer using react navigation

Suppose I have five items in drawer navigation. I want to add separator after three items. How to add this using react-navigation.

react-native react-navigation

Solution 1:^[1]

As mentioned vonovak, you could achieve this by using contentComponent which allows complete customization of drawer. For this you will need to create custom component which will override default drawer. Code sample:

Navigation Drawer

 const NavigationDrawer = DrawerNavigator({
  screen1: { screen: Screen1 },
  screen2: { screen: Screen2 },
  screen3: { screen: Screen3 },
}, {
  contentComponent: SideMenu
})

Custom component which overrides default drawer (DrawerContainer)

 class SideMenu extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                    <Text
                        onPress={() => this.props.navigation.navigate('Screen1')}
                        style={styles.item}>
                        Page1
                    </Text>
                    // 'separator' line
                    <View
                        style={{
                        borderBottomColor: 'black',
                        borderBottomWidth: 1
                    }}/>
                    <Text
                        onPress={() => this.props.navigation.navigate('Screen2')}
                        style={styles.item}>
                        Page2
                    </Text>
                    <Text
                        onPress={() => this.props.navigation.navigate('Screen3')}
                        style={styles.item}>
                        Page3
                    </Text>
                </ScrollView>
            </View>
        );
    }
}

Solution 2:^[2]

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.

Add this styling prop:

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

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

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	meta4
Solution 2	Nikola
Solution 3

'How to add section divider in navigation drawer using react navigation

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]