React native disable StackNavigator and DrawerNavigator

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