React native disable StackNavigator and DrawerNavigator - react-native

Question

I'm trying to disable some of the menus of my app according to the user access level.
Here are my Navigators:
const MainStackNavigator = createStackNavigator({
Home,
Company: {
screen: CompanyDetails,
navigationOptions: {
headerTitle: 'Company Details'
}
},
Tenants: {
screen: Tenants,
navigationOptions: {
headerTitle: 'Tenants'
}
}
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Ionicons
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
});
const AppDrawerNavigator = createDrawerNavigator({
myApp: {
screen: MainStackNavigator
},
Home: {
screen: Home,
navigationOptions: {
drawerIcon: <FontAwesome name="home" size={20} />
}
},
Company: {
screen: CompanyDetails,
navigationOptions: {
drawerIcon: <FontAwesome name="building-o" size={20} />
}
},
Tenants: {
screen: TenantDetails,
navigationOptions: {
drawerIcon: <Ionicons name="ios-person" size={20} />
}
},
LogOut: {
screen: Login,
navigationOptions: {
title: 'Log Out',
drawerIcon: <Entypo name="log-out" size={20} />
}
}
});
I would like to disable the Company menu (showing but no clickable) if the userAccessLevel is not 1. I can get the userAccessLevel from my authentication: AsyncStorage.getItem('UserLevel')
Is it possible?
Thanks

Answer 1

It's possible, You can use customdrawernaivgation.
const AppDrawerNavigator = createDrawerNavigator({
myApp: {
screen: MainStackNavigator
},
Home: {
screen: Home,
navigationOptions: {
drawerIcon: <FontAwesome name="home" size={20} />
}
},
Company: {
screen: CompanyDetails,
navigationOptions: {
drawerIcon: <FontAwesome name="building-o" size={20} />
}
},
Tenants: {
screen: TenantDetails,
navigationOptions: {
drawerIcon: <Ionicons name="ios-person" size={20} />
}
},
LogOut: {
screen: Login,
navigationOptions: {
title: 'Log Out',
drawerIcon: <Entypo name="log-out" size={20} />
}
}
}, {
drawerPosition: 'left',
drawerType: 'slide',
contentComponent: CustomDrawerNavigation,
drawerBackgroundColor: '#091b40',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerWidth: (width / 3) * 2,
});
class CustomDrawerNavigation extends React.Component {
render() {
return (
<SafeAreaView>
<ScrollView>
{data.map((each, index) => {
if(each.name === 'Company' && level !== 1) {
return <View/>;
}
return (
<TouchableOpacity
key={each.name}
onPress={() => this.props.navigation.navigate(each.route)}>
<View style={styles.menuContainer}>
<Icon style={styles.iconStyle} name={each.icon} />
<Text style={styles.textStyle}>{translate(each.name)}</Text>
</View>
</TouchableOpacity>
);
});
}
)};
}
Hope this will help you