react-navigation nested drawer items - react-native

Question

I'm trying to create nested menu in react native drawer. I can create the menu as below but I have to find a way to group items and put them into accordion. This is how I currently create the menu:
import React from 'react';
import PropTypes from 'prop-types';
import { SafeAreaView, ScrollView, StyleSheet,View } from 'react-native';
import { DrawerItems,createDrawerNavigator } from 'react-navigation';
import { Container, Content, Text, List, ListItem } from "native-base";
import {Image,ImageBackground} from "react-native";
import logo from '../images/logofullwhite200.png';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20
}
});
const DrawerComponent = props => {
const skippedItems = Object.keys(props.drawerItems).filter(name => props.drawerItems[name].skip);
return (
<ScrollView style={styles.container}>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<Content>
<ImageBackground
source={{
uri: "https://raw.githubusercontent.com/GeekyAnts/NativeBase-KitchenSink/master/assets/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 50, width: 150 }}
source={logo}
/>
</ImageBackground>
<DrawerItems
{...props}
onItemPress={({ focused, route }) => {
if (!skippedItems.includes(route.routeName)) {
props.onItemPress({ focused, route });
}
}}
/>
</Content>
</SafeAreaView>
</ScrollView>
);
};
DrawerComponent.propTypes = {
onItemPress: PropTypes.func,
drawerItems: PropTypes.object
};
export default DrawerComponent;
this is the data example
"CreateSale": Object {
"navigationOptions": Object {
"drawerLabel": Object {
"$$typeof": Symbol(react.element),
"_owner": null,
"_store": Object {},
"key": null,
"props": Object {
"i18nKey": "sale.create_sale",
},
"ref": null,
"type": [Function I18nextWithTranslation],
},
},
"screen": [Function KeyboardAwareNavigator],
"userInfo": Object {
"showOnLogin": true,
},
},
"Customer": Object {
"navigationOptions": Object {
"drawerLabel": Object {
"$$typeof": Symbol(react.element),
"_owner": null,
"_store": Object {},
"key": null,
"props": Object {
"i18nKey": "list.title",
},
"ref": null,
"type": [Function I18nextWithTranslation],
},
},
"screen": [Function KeyboardAwareNavigator],
"userInfo": Object {
"showOnLogin": true,
},
}
This is how index.tsx looks
export default new ClientModule({
router: <MainScreenNavigator />,
onAppCreate: [
async (modules: ClientModule) =>
(ref.navigator = createDrawerNavigator(
{
...modules.drawerItems
},
{
// eslint-disable-next-line
contentComponent: props => <DrawerComponent {...props} drawerItems={modules.drawerItems} />
}
))
]
});
I have to put the items in to accordion, they have to look nested such as as below:
Outlets
Customers
Customer

Answer 1

no need to make nested drawer. you can use react-native-collapsible and make custom drawerItem like accordion
yarn add react-native-collapsible
import Collapsible from 'react-native-collapsible';
() => (
<Collapsible collapsed={isCollapsed}>
<SomeCollapsedView />
</Collapsible>
);