Add a submenu to react navigation drawer - react-native

Question

I'm using react navigator 4, but I don't seem to find a simple way to add sumbenus to just one item of my drawer. My drawer looks like this:
Current drawer
But my goal is to achive something like this:
Drawer with submenu
How can I add a submenu (or a group) to the drawer navigator?
This is my current navigator code:
import { Image, StyleSheet } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { HiddenItem } from 'react-navigation-header-buttons';
import { createStackNavigator } from 'react-navigation-stack';
import Colors from '../constants/Colors';
import HomeScreen from '../screens/HomeScreen';
import SubItem1Screen from '../screens/SubItem1Screen';
import SubItem2Screen from '../screens/SubItem2Screen';
import OtherScreen from '../screens/OtherScreen';
import LoginNavigator from './LoginNavigator';
const ImageHeader = () => (
<Image
style={styles.imageHeader}
resizeMode="stretch"
source={require('../assets/images/header/background.png')}
/>
);
const styles = StyleSheet.create({
imageHeader: {
...StyleSheet.absoluteFillObject,
width: null,
height: null,
backgroundColor: '#FFF',
},
});
const defaultStackNavigatorOptions = {
headerTintColor: Colors.primary,
headerBackground: ImageHeader,
};
const HomeNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
},
{
defaultNavigationOptions: defaultStackNavigatorOptions,
}
);
const SubItem1Navigator = createStackNavigator(
{
SubItem1: {
screen: SubItem1Screen,
},
},
{
defaultNavigationOptions: defaultStackNavigatorOptions,
}
);
const SubItem2Navigator = createStackNavigator(
{
SubItem2: {
screen: SubItem2Screen,
},
},
{
defaultNavigationOptions: defaultStackNavigatorOptions,
}
);
const OtherNavigator = createStackNavigator(
{
Other: {
screen: OtherScreen,
},
},
{
defaultNavigationOptions: defaultStackNavigatorOptions,
}
);
const MainNavigator = createDrawerNavigator(
{
Home: {
screen: HomeNavigator,
navigationOptions: {
title: 'Home',
},
},
SubItem1: {
screen: SubItem1Navigator,
},
SubItem2: {
screen: SubItem2Navigator,
},
Other: {
screen: OtherNavigator,
},
},
{
contentOptions: {
activeTintColor: Colors.primary,
labelStyle: {
fontWeight: 'normal',
},
},
}
);
const AppNavigator = createSwitchNavigator({
Login: LoginNavigator,
Main: MainNavigator,
});
export default createAppContainer(AppNavigator);

Answer 1

Need to show Expandable list view inside navigation drawer
This answer above may help you out a bit. A brief summary:
You can try to implement your own navigation drawer as follows. Similar answers are given in the link above.
const DrawerScreen = DrawerNavigator({
Screen1: {
screen: MyHomeScreen
},
Screen2: {
screen: MyNotificationsScreen
}
}, {
headerMode: 'none',
contentComponent: MyDrawer
})
const MyDrawer = (props) => ...