Back to React Native Paper

Drawer.Section

docs/public/3.0/drawer-section.html

5.15.11.1 KB
Original Source

Drawer.Section

A component to group content inside a navigation drawer.

Usage

js
import * as React from 'react';
import { Drawer } from 'react-native-paper';

const MyComponent = () => {
  const [active, setActive] = React.useState('');

  return (
    <Drawer.Section title="Some title">
      <Drawer.Item
        label="First Item"
        active={active === 'first'}
        onPress={() => setActive('first')}
      />
      <Drawer.Item
        label="Second Item"
        active={active === 'second'}
        onPress={() => setActive('second')}
      />
    </Drawer.Section>
  );
};

export default MyComponent;

Props

title Type: string

Title to show as the header for the section.

children (required) Type: React.ReactNode

Content of the Drawer.Section.

style Type: StyleProp<ViewStyle>

theme Type: Theme

Edit this page