Question 32845 in React native Question posted in
The official React Native documentation can be found here.

How to hide navigation Item in react-native navigator? – React native

I’m new to React Native. I have to make an app for the WordPress backend. I’ve four items in DrawerNavigaton, Home and Categories, PostPage and Category screens.

<NavigationContainer>
      <Drawer.Navigator>
             <Drawer.Screen name="Home" component={Home}/>
             <Drawer.Screen name='Categories' component={Categories} 
             <Drawer.Screen name="PostPage" component={PostPage}/>
             <Drawer.Screen name='Category' component={Category}/>
      </Drawer.Navigator>
 </NavigationContainer>

I just want to hide the last two items.
Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Just this piece of code did magic:

    <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home}/>
        <Drawer.Screen name="Offices" component={Offices}/>
        <Drawer.Screen name="PostPage"
                       options={{
                           drawerItemStyle: {
                               display: 'none'
                           }
                       }} component={PostPage}/>
        <Drawer.Screen name="Category"
                       options={{
                           drawerItemStyle: {
                               display: 'none'
                           }
                       }}
                       component={Category}/>
    </Drawer.Navigator>

  2. 0

    Then use custom drawer

    Sample code:

    import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
  useDrawerProgress,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';

function Home() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function Categories() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Categories Screen</Text>
    </View>
  );
}

function PostPage() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>PostPage Screen</Text>
    </View>
  );
}

function Category() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Category Screen</Text>
    </View>
  );
}

function CustomDrawerContent(props) {
  const progress = useDrawerProgress();

  const translateX = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <DrawerContentScrollView {...props}>
      <Animated.View style={{ transform: [{ translateX }] }}>
        <DrawerItem label="Home" onPress={() => alert('Link to Home')} />
        <DrawerItem
          label="Categories"
          onPress={() => alert('Link to Categories')}
        />
      </Animated.View>
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      useLegacyImplementation
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Categories" component={Categories} />
      <Drawer.Screen name="PostPage" component={PostPage} />
      <Drawer.Screen name="Category" component={Category} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

    Demo link https://snack.expo.dev/mYo_6RI0a

    Reference: https://reactnavigation.org/docs/drawer-navigator/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search