Back to React Native Paper

DrawerSection

docs/public/1.0/drawer-section.html

5.15.1993 B
Original Source

DrawerSection

A DrawerSection groups content inside a navigation drawer.

Usage

js
import * as React from 'react';
import { DrawerSection, DrawerItem } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    active: 'First Item',
  };

  render() {
    const { active } = this.state;
    return (
      <DrawerSection title="Some title">
        <DrawerItem
          label="First Item"
          active={active === 'First Item'}
          onPress={() => { this.setState({ active: 'First Item' }); }}
       />
        <DrawerItem
          label="Second Item"
          active={active === 'Second Item'}
          onPress={() => { this.setState({ active: 'Second Item' }); }}
       />
     </DrawerSection>
    );
  }
}

Props

title Type: string

Title to show as the header for the section.

children (required) Type: React.Node

Content of the DrawerSection.

theme Type: Theme