Drawer.Section

A component to group content inside a navigation drawer.

How to use

import * as React from 'react';
import {Drawer} from '@gyri/native-ui-components';

const MyComponent = ({style, className}) => {
    const [active, setActive] = React.useState('');
    
    return (
      <Drawer.Section style={style} className={className} 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

#	Name	Data type	Default value	Values	Description
1	style	string			It allows you to style your components
2	className	string	''		It defined external CSS stylesheet.
3	title	string			Title to show as the header for the section.
4	showDivider	boolean	true		Whether to show Divider at the end of the section. True by default.

For more detail visit https://callstack.github.io/react-native-paper/docs/components/Drawer/DrawerItem