how to hide a screen from drawer in react navigation 5

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

0
0

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

0
0
4.43
7
Fficsori 105 points

                                    import { DrawerItems } from 'react-navigation';

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

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

const getFilteredAndStyledItems = ({ items, ...other }) =&gt; (
  &lt;DrawerItems
    items={filter(getVisible, items)}
    {...other}
  /&gt;
);

4.43 (7 Votes)
0
Are there any code examples left?
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
hide screen links in drawerNavigation in react native react navigation drawer hide header react navigation drawer not hide full drawer navigation react native invisible screen reactnative hide drawer item react navigation drawer screen hidden hide drawer in react react navigation drawer hide hide drawer screen react navigation hide item in react navigation drawer hide item in react drawer navigation hide screen in react drawer navigation react navigation v5 how to put component in drawer but hide it drawer navigation hide screen from side menu drawer navigator hide screen from side menu react native drawer navigation hide from menu react native drawer navigatior hide screen how to hide a screen from drawer in react navigation 5 how to hide a screen form drawer in react navigation 5 NavigationContainer Drawer.Screen hide how to hide a screen in drawernavigation hide drawer screen react native hide drawer on open @react-navigation Hide screen from drawer navigation hide on drawer react navigation drawer.screen react native hide react native navigation drawer hide route react native navigation drawer hide label drawer navigation hide item hide name in drawer screen react native hide screen from drawer navigation react native react navigation hide item in drawer item list drawer screen options react navigation to hide it drawer navigator crashes after navigate react native hide header drawer navigation hide drawer screen name react native hide drawer item in react navigation 4 hide drawer navigation react native how to hide navigation drawer reaact native hide drawer screen in react native\ react native drawer nave hide name navigation drawer hide status bar react native navigation drawer hide status react native react navigation add screen to drawer without showing react navigation setDrawer visible react native hide android navigation bar react native hide android bottom bar disable drawer navigation/react-native create a short drawer from below react native drawer screen navigation react native react navigation hide drawer item screen reactnavigation hide drawer item screen react-navigation change only one item in drawer content hide some screens in drawer react navigation what to use instead of Drawer Item in Navigation Drawer in React native hoe to hide some drawer menu item in rect native hide a item in navigation bar react navigation bottom navigation hide item drawer react disable visibility of navigator.screen react native drawer how to make navigate to a screen without it showing up in drawer react native react navigation drawer menu not show option
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source