i'm using react-native with react-navigation-drawer to generate a side menu for navigate beetwen screens.
My question is: Exist a way or a guide to put subpages in the side menu?
any suggestion is welcome and thank you in advance
On left how appear my menu and on right is what i want:
you can customized it using
CustomDrawerContent
it has alot of option please do read about it not all of item needs to be customized i just made this example fast for you
documentaion
https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent
import React from 'react';
import { View, Text,TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';
function Feed() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Feed Screen</Text>
</View>
);
}
function Article() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Article Screen</Text>
</View>
);
}
function CustomDrawerContent({ navigation ,progress, ...rest }) {
const translateX = Animated.interpolate(progress, {
inputRange: [0, 1],
outputRange: [-100, 0],
});
const [isshow,show] = React.useState(false)
return (
<DrawerContentScrollView {...rest}>
<Animated.View style={{ transform: [{ translateX }] }}>
<TouchableOpacity onPress={()=>{show(true)}}>
<Text>
press me
</Text>
</TouchableOpacity>
<View>
{isshow ? (
<View>
<TouchableOpacity onPress={()=>{navigation.navigate('Feed')}}>
<Text> page one 1</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{navigation.navigate('Article')}}>
<Text> page one 2</Text>
</TouchableOpacity>
</View>
):null}
</View>
</Animated.View>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
expo link