How to add section divider in navigation drawer using react navigation

Question

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

Answer 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 (
            
                
                     this.props.navigation.navigate('Screen1')}
                        style={styles.item}>
                        Page1
                    
                    // 'separator' line
                    
                     this.props.navigation.navigate('Screen2')}
                        style={styles.item}>
                        Page2
                    
                     this.props.navigation.navigate('Screen3')}
                        style={styles.item}>
                        Page3
                    
                
            
        );
    }
}

`