Logo

Drawer.CollapsedItem

Available in v5.x with theme version 3

Collapsed component used to show an action item with an icon and optionally label in a navigation drawer.

Usage

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

const MyComponent = () => (
   <Drawer.CollapsedItem
     focusedIcon="inbox"
     unfocusedIcon="inbox-outline"
     label="Inbox"
   />
);

export default MyComponent;

Props

Type: string

The label text of the item.

Type: string | number | boolean
Default value: false

Badge to show on the icon, can be true to show a dot, string or number to show text.

Icon to use as the focused destination icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x

Icon to use as the unfocused destination icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x

Type: boolean

Whether to highlight the drawer item as active.

Type: (e: GestureResponderEvent) => void

Function to execute on press.

Type: string

Accessibility label for the button. This is read by the screen reader when the user taps the button.

Type: InternalTheme
Type: string
Default value: 'drawer-collapsed-item'

TestID used for testing purposes

Edit this page