How to disabled or remove or hide Item selected space in react native drawer

Question

I am new to react native, and I am creating a drawer from that drawer I am navigating to different different screen. now I want to hide or disabled or remove Item selected space from that drawer. I do not want to display that selected style on this drawer.. I have uploaded the image please check it . thanks..

here is my drawer code and I want to disabled Market visit Button But I want to navigate that screen. is it possible please help

Basically I want the blue focus and entire nav item hidden from the naw bar specifically

const Drawer = createDrawerNavigator()

export default function App() {
  return (

 <NavigationContainer>
  
      <Drawer.Navigator initialRouteName="Browse" openByDefault>
        <Drawer.Screen name="Browse" component={Browse} />  
        <Drawer.Screen style={{}} name="MarketVisit" component={MarketVisit}   options={{
                drawerLabel: () => null,
                title: null,
            }} 
           // enabled={false}
            />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Basically I want the blue focus and entire nav item hidden from the naw bar specifically

score 0 · Answer 1 · answered Jan 12 '21 at 10:34

0

you can make conditional style that will work:

<Drawer.Screen style={enables>0?styles.enable:style.disable} name="MarketVisit" component={MarketVisit}   options={{
                drawerLabel: () => null,
                title: null,
            }} 
           // enabled={false}
            />

answered Jan 12 '21 at 10:34

Rajshekhar

571
5
9

Error showing like this => cant find varibale: enables – Jan 12 '21 at 10:37
please help.. I am new to react native – Jan 12 '21 at 10:45

score 0 · Answer 2 · answered Jan 21 '21 at 04:36

You can still use mine as an example: React Navigation 5 Hide Drawer Item

To summarize and give you more context with your example:

        drawerContent={props => customDrawerContent(props)}

add to your Drawer.Navigator component. Then define the customDrawerContent similar to:

const customDrawerContent = (props) => {
    return (
        <View style={{flex: 1}}>
            <View style={{height: '90%'}}>
                <DrawerContentScrollView {...props}>

                        {/* Tried just disabling using DrawerItemList but wasn't working so made
                        complete custom drawer component and navigate properly using props.navigation.navigate */}
                        {/* <DrawerItemList 
                            {...props}
                        /> */}

                </DrawerContentScrollView>
            </View>

        </View>
    )
}

The DrawerItemList portion will just spread out the item defined but hidden in your Drawer.Navigator so that it is still accessible with navigation actions. You'll need the following import: import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';

You'll have to take care of some styling with your custom drawer but it will solve the issue where the blue highlight is present which is the exact issue I ran into before I did a custom drawer component.

score 0 · Answer 3 · answered Jan 21 '21 at 05:43

You want to store the selected item in a state variable and then iterate throug children using React.Children.map to iterate through children. If the index of the child is the stored index in selectedNavItem, return null. React won't render null in your DOM, so it won't display anything. If you wanted to render a component that looks different you can also pass a className prop to the child that is selected quite easily.

const NavigationDrawer = (props) => {
  // the children of this component would be <NavigationDrawerItem /> components.
  const {
    children,
  } = props

  // the selected nav item
  const [selectedNavItem, setSelectedNavItem] = React.useState(null)

  // the index of the nav item is passed here and stored in the state variable
  const handleNavItemOnClick = (index) => {
    setSelectedNavItem(index)
  }

  }, [children])

  return <Drawer>
    {
    // iterate over the children components
    return React.Children.map(child, index) => {
      return index !== selectedNavItem
        // the first param of React.cloneElement is the component to clone, in our
        // case a child component. The second param is the props to pass that cloned
        // component.
        ? React.cloneElement(child, {
          onClick: () => handleNavItemClick(index)
        })
        : null
    })
    }
  </Drawer>
}

How to disabled or remove or hide Item selected space in react native drawer

3 Answers3

Linked