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

PradeepSapkota
March 20, 2023
255 views
0 votes
2 Answers

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.

Answers

Chosen as BEST ANSWER

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>

(Edit)

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/