CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
joshkmartinez
joshkmartinez

Reputation: 664

react-native: react-navigation drawer labels

I want to have drawer labels/separators in the drawer navigator.

Somewhat like this

How would I do this?

Upvotes: 1

Views: 4231

Answers (1)

Rex Low
Rex Low

Reputation: 2177

Easy. What you are looking at is called contentComponent. Basically you will need to inject a contentComponent prop into your Drawer navigator.

contentComponent Component used to render the content of the drawer, for example, navigation items. Receives the navigation prop for the drawer. Read more here

import DrawerContent from '../app/components/DrawerContent'
const drawerConfiguration = {
    initialRouteName: 'MainStackNavigatior',
    headerMode: 'screen',
    drawerWidth: deviceWidth / 1.38,
    contentComponent: DrawerContent
}

Where contentComponent is just a ScrollView containing a list of customisable items.

class DrawerContent extends Component {
  onItemPress(item) {
    const { navigation } = this.props;
    navigation.navigate(item.key);
  }

  renderDrawerItem(route) {
    const { drawerItems } = this.props;
    if (drawerItems.indexOf(route.key) > -1) {
      return (
        <TouchableOpacity style={styles.drawerItem} key={route.key} onPress={() => this.onItemPress(route)}>
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      );
    }
    return null;
  }

  render() {
    const { navigation, isFetching, drawerItemsTitle } = this.props;
    return (
      <View style={styles.container}>
        {!isFetching && <View style={styles.drawerItemTitle}>
          <Text style={styles.drawerItemTitleText}>{drawerItemsTitle}</Text>
        </View>}
        {!isFetching && <View>
          {navigation.state.routes.map(route => this.renderDrawerItem(route))}
        </View>}
        {isFetching && <View style={styles.spinnerViewBg}>
          <View style={styles.spinner}>
            <ActivityIndicator
              size="small"
              animating
            />
          </View>
        </View>}
      </View>
    );
  }
}

Here's a good example from Infinite Red. Tutorial link

As for the separators, it is basically a View with minimal height and certain width. I believe you can figure it out :) Good luck!

Upvotes: 2

Related Questions