/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

21 votes224 views6 answers
React native vector icons
Javascript React
2 votes218 views1 answer
Passing multiple props to child component in react
Javascript React
2 votes290 views3 answers
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.
Javascript React
17 votes227 views5 answers
React native icons
Javascript React
1 vote231 views1 answer
React counter input
Javascript React
0 vote216 views2 answers
Datepicker react native
Javascript React
0 vote194 views1 answer
Hide urls in .env in react app
Javascript React
2 votes206 views2 answers
How to export multiple functions react from one file
Javascript React
0 vote223 views1 answer
How to set the id attr to a var in reactjs
Javascript React
0 vote220 views1 answer
React native cors origin
Javascript React