I am trying to hide the ability to press one of my routes in the drawer navigator as it is another navigator and the default location in the app. I want the drawer to simply be used for navigating to extraneous routes that don't fit well into user flow elsewhere. Before React Navigation 5 I was able to achieve this by simply setting drawerLabel: () => null
. However now with the changes I cannot figure out how to hide this in the same manner.
Below is my current navigator code:
const DrawerNavigator = () => {
const dispatch = useDispatch();
return (
<MainDrawerNavigator.Navigator
drawerContent={props => customDrawerContent(props, dispatch)}
drawerStyle={drawerStyle}
>
<MainDrawerNavigator.Screen
name="DrawerNav"
component={MainTabNavigator}
options={{
drawerLabel: () => null,
title: null,
drawerIcon: () => null
}}
/>
<MainDrawerNavigator.Screen
name="FAQNav"
component={FAQStackNavigator}
options={
{
drawerLabel: "FAQ",
drawerIcon: ({tintColor}) => <EvilIcons name={'question'} size={30} color={tintColor} />
}
}
/>
</MainDrawerNavigator.Navigator>
)
}
const customDrawerContent = (props, dispatch) => {
console.log(props.descriptors)
return (
<View style={{flex: 1}}>
<View style={{height: '90%'}}>
<DrawerContentScrollView {...props}>
<View style={styles.logoContainer}>
<Image
style={styles.image}
fadeDuration={0}
resizeMode={'contain'}
source={require('../assets/images/spikeball-logo-horizontal.png')}
/>
</View>
<TouchableOpacity style={styles.contactUsContainer} onPress={() => { Linking.openURL('https://spikeball.com/')}}>
<AntDesign style={styles.iconStyle} name={'shoppingcart'} size={25} color={'black'} />
<Text style={styles.drawerText}>Shop</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.contactUsContainer} onPress={() => { Linking.openURL('https://support.spikeball.com/')}}>
<AntDesign style={styles.iconStyle} name={'contacts'} size={25} color={'black'} />
<Text style={styles.drawerText}>Contact Us</Text>
</TouchableOpacity>
<DrawerItemList
{...props}
/>
</DrawerContentScrollView>
</View>
<TouchableOpacity
style={styles.logoutContainer}
onPress={() => {
dispatch(authActions.logout());
}}>
<Text style={styles.logoutText}>SIGN OUT</Text>
</TouchableOpacity>
</View>
)
}
Link to image showing the undesired output. Basically I want the blue focus and entire nav item hidden from the naw bar specifically. UNDESIRED Output
Best solution will be filter the props before pass it to DrawerItemList . This will only work 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>
)
}