/Javascript/React/How to hide a screen from drawer in react navigation 5

How to hide a screen from drawer in react navigation 5

Hide screen links in drawerNavigation in react native

import { DrawerItems } from 'react-navigation';

const visibleItems = ['HomeScreen', 'SettingsScreen', 'HelpScreen'];

const getVisible = item => contains(item.key, visibleItems);

const getFilteredAndStyledItems = ({ items, ...other }) => (
  <DrawerItems
    items={filter(getVisible, items)}
    {...other}
  />
);

Source: github.com

Hide screen links in drawerNavigation in react native

//custom drawer content
export default props => {
    const { state, ...rest } = props;
    const newState = { ...state}  //copy from state before applying any filter. do not change original state
    newState.routes = newState.routes.filter(item => item.name !== 'Login') //replace "Login' with your route name

    return (
         <DrawerContentScrollView {...props}>
             <DrawerItemList state={newState} {...rest} />
        </DrawerContentScrollView>
    )
}

Source: github.com

How to hide a screen from drawer in react navigation 5

function DrawerNavigator() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Home"
        drawerContent={props => {
          const filteredProps = {
            ...props,
            state: {
              ...props.state,
              routeNames: props.state.routeNames.filter(routeName => {
                routeName !== 'Home';
              }),
              routes: props.state.routes.filter(route => route.name !== 'Home'),
            },
          };
          return (
            <DrawerContentScrollView {...filteredProps}>
              <DrawerItemList {...filteredProps} />
            </DrawerContentScrollView>
          );
        }}>
        <Drawer.Screen name="Notifications" component={ProfileScreen} />
        <Drawer.Screen name="Notifications2" component={ProfileScreen} />
        <Drawer.Screen name="Home" component={StackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Source: stackoverflow.com

Similar codes

0 vote409 views1 answer
Traduire text with api translate google in react
Javascript React
42 votes342 views3 answers
React onchange multiple functions
Javascript React
20 votes361 views6 answers
Useeffect react example
Javascript React
0 vote375 views1 answer
Custom react native product rating
Javascript React
0 vote366 views2 answers
Background transparent react native
Javascript React
1 vote370 views1 answer
How to call create react app
Javascript React
2 votes348 views2 answers
Vscode react extensions
Javascript React
2 votes349 views1 answer
Redux React redux
Javascript React
2 votes368 views2 answers
Await in react in function component
Javascript React
0 vote328 views1 answer
React animated text yarn package
Javascript React