reactjsreact-nativereact-navigationside-menu

Is possible react-navigation-drawer with subpages?


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:

myscreens


Solution

  • 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

    https://snack.expo.io/cXuBvzs87