Add a submenu to react navigation drawer

Viewed 3714

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);

1 Answers

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) => ...
Related