Side Menu

It will get the routing from the drawer function

Menu item

We need to loop through the routing array to get the active screen and inactive screen.

var sideItemList = arr.map((route) => {
  return (
    <View key={route.key} style={styles.sideItemContainer}>
      <Text
        onPress={this.navigateToScreen(route.key)}
        style={activeKey === route.key ? styles.sideItemTextActive : styles.sideItemTextInactive}
        >
      {route.key}
      </Text>
    </View>
  );
})

As you see, the appropriate styling will be apply on their own stylesheet.