Drawer

Drawer is a sliding navigation panel typically used for app-wide navigation. It supports grouped items, a header, and a footer.

Import

import { Drawer, DrawerGroup, DrawerItem } from '@ui-kitten/components';

Basic Usage

import React, { useState } from 'react';
import { Layout, Drawer, DrawerGroup, DrawerItem, Icon, Text } from '@ui-kitten/components';

const Header = (props) => (
  <Layout {...props} style={{ padding: 16 }}>
    <Text category="h6">Navigation</Text>
  </Layout>
);

const DrawerExample = () => {
  const [selectedIndex, setSelectedIndex] = useState(null);

  return (
    <Drawer
      selectedIndex={selectedIndex}
      onSelect={(index) => setSelectedIndex(index)}
      header={Header}
    >
      <DrawerItem
        title="Home"
        accessoryLeft={(props) => <Icon {...props} name="home" />}
      />
      <DrawerGroup title="Settings">
        <DrawerItem title="Profile" />
        <DrawerItem title="Preferences" />
      </DrawerGroup>
      <DrawerItem title="Logout" />
    </Drawer>
  );
};

Props

Drawer

Property	Type	Default	Description
selectedIndex	IndexPath	undefined	The selected drawer item index.
onSelect	(index: IndexPath) => void	-	Called when a drawer item is selected.
header	(props) => ReactElement	undefined	Render function for the drawer header.
footer	(props) => ReactElement	undefined	Render function for the drawer footer.
children	DrawerItem[] | DrawerGroup[]	-	Drawer items and groups.
appearance	'default' | 'noDivider'	'default'	Appearance defined in the Eva mapping. Use noDivider to hide the separators.

DrawerGroup

Property	Type	Default	Description
title	string | number | (props) => ReactElement	-	Group title text or render function.
accessoryLeft	(props) => ReactElement	undefined	Render function for the left accessory.
children	DrawerItem[]	-	Nested drawer items.

DrawerItem

Property	Type	Default	Description
title	string | number | (props) => ReactElement	undefined	Item title text or render function.
accessoryLeft	(props) => ReactElement	undefined	Render function for the left accessory.
accessoryRight	(props) => ReactElement	undefined	Render function for the right accessory.
selected	boolean	false	Whether the item is rendered as selected. Managed by Drawer.

DrawerItem and DrawerGroup are aliases of MenuItem and MenuGroup and accept exactly the same properties, including initiallyExpanded on the group and all React Native TouchableOpacity props on the item. onPress is called with (descriptor: MenuItemDescriptor, event?: GestureResponderEvent).

Storybook

Live examples coming soon via Storybook.