Show / hide box items

Question

React native with React Navigation - Show / hide drawer element

I was wondering if you guys, or maybe someone came up with a better idea to show or hide some menu or drawer element in DrawerNavigator.

Basically, I have user roles, and I want to show / hide the selected menu based on the user role.

My setup now is that I have a DrawerNavigator embedded in the StackNavigator.

The menu that contains my box items

Hide some items in a box based on user role

Currently used:

reaction version 16.0.0-alpha.12

reaction-native version 0.46.0

reaction version version 1.0.0-beta.11

Answer 1

,

contentComponent: CustomDrawerContentComponent

:

const CustomItems = ({
  navigation: { state, navigate },
  items,
  activeItemKey,
  activeTintColor,
  activeBackgroundColor,
  inactiveTintColor,
  inactiveBackgroundColor,
  getLabel,
  renderIcon,
  onItemPress,
  style,
  labelStyle,
}: Props) => (
  <View style={[styles.container, style]}>
    {items.map((route: NavigationRoute, index: number) => {
      const focused = activeItemKey === route.key;
      const color = focused ? activeTintColor : inactiveTintColor;
      const backgroundColor = focused
        ? activeBackgroundColor
        : inactiveBackgroundColor;
      const scene = { route, index, focused, tintColor: color };
      const icon = renderIcon(scene);
      const label = getLabel(scene);
      return (
        <TouchableOpacity
          key={route.key}
          onPress={() => {
            console.log('pressed')
            onItemPress({ route, focused });
          }}
          delayPressIn={0}
        >
          <View style={[styles.item, { backgroundColor }]}>
            {icon ? (
              <View style={[styles.icon, focused ? null : styles.inactiveIcon]}>
                {icon}
              </View>
            ) : null}
            {typeof label === 'string' ? (
              <Text style={[styles.label, { color }, labelStyle]}>{label}</Text>
            ) : (
              label
            )}
          </View>
        </TouchableOpacity>
      );
    })}
  </View>
);

, , , , , , .

,