How to add section divider in navigation drawer using react navigation
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>
);
}
}
`
You'll need to use the contentComponent
prop to make custom changes. Check out the docs