Breaking News: Grepper is joining You.com. Read the official announcement!

hide screen links in drawerNavigation in react native

Add Answer

Innocent Ibex answered on July 10, 2020 Popularity 9/10 Helpfulness 2/10

answer hide screen links in drawerNavigation in react native

related how to hide the header of drawer navigation react native

related how to hide a screen from drawer in react navigation 5

related hide screen links in drawerNavigation in react native

hide screen links in drawerNavigation in react native

Comment

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}
  />
);

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: github.com

Tags: hide javascript react-native screen

Link to this answer
Share Copy Link

Contributed on Jul 10 2020

Innocent Ibex

0 Answers Avg Quality 2/10

Closely Related Answers

how to hide the header of drawer navigation react native

Comment

screenOptions={{
  headerShown: false
}}

Popularity 9/10 Helpfulness 5/10 Language whatever

Source: Grepper

Tags: drawer dr

Link to this answer
Share Copy Link

Contributed on Nov 30 2022

Javasper

0 Answers Avg Quality 2/10

how to hide a screen from drawer in react navigation 5

Comment

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>
  );
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: drawer dr

Link to this answer
Share Copy Link

Contributed on Jun 24 2021

mukashwasti_

0 Answers Avg Quality 2/10

hide screen links in drawerNavigation in react native

Comment

//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>
    )
}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: github.com

Tags: hide

Link to this answer
Share Copy Link

Contributed on Jul 10 2020

Innocent Ibex

0 Answers Avg Quality 2/10

hide screen links in drawerNavigation in react native

Contents

More Related Answers

hide screen links in drawerNavigation in react native

Closely Related Answers

how to hide the header of drawer navigation react native

how to hide a screen from drawer in react navigation 5

hide screen links in drawerNavigation in react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.