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

label

Type: string

The label text of the item.

badge

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.

focusedIcon

Type: IconSource

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

unfocusedIcon

Type: IconSource

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

active

Type: boolean

Whether to highlight the drawer item as active.

onPress

Type: (e: GestureResponderEvent) => void

Function to execute on press.

accessibilityLabel

Type: string

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

style

Type: StyleProp<ViewStyle>

theme

Type: InternalTheme

testID

Type: string

Default value: 'drawer-collapsed-item'

TestID used for testing purposes

Edit this page