Chip

Chips can be used to display entities in small blocks.

Flat chip

Outlined chip

Usage

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

const MyComponent = () => (
  <Chip icon="information" onPress={() => console.log('Pressed')}>Example Chip</Chip>
);

export default MyComponent;

Props

mode Type: 'flat' | 'outlined'

Default value: 'flat'

Mode of the chip.

flat - flat chip without outline.
outlined - chip with an outline.

children (required) Type: React.ReactNode

Text content of the Chip.

icon Type: IconSource

Icon to display for the Chip. Both icon and avatar cannot be specified.

avatar Type: React.ReactNode

Avatar to display for the Chip. Both icon and avatar cannot be specified.

closeIcon Type: IconSource

Icon to display as the close button for the Chip. The icon appears only when the onClose prop is specified.

selected Type: boolean

Default value: false

Whether chip is selected.

selectedColor Type: string

Whether to style the chip color as selected.

disabled Type: boolean

Default value: false

Whether the chip is disabled. A disabled chip is greyed out and onPress is not called on touch.

accessibilityLabel Type: string

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

closeIconAccessibilityLabel Type: string

Default value: 'Close'

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

onPress Type: () => void

Function to execute on press.

onLongPress Type: () => void

Function to execute on long press.

onClose Type: () => void

Function to execute on close button press. The close button appears only when this prop is specified.

textStyle Type: StyleProp<TextStyle>

Style of chip's text

style Type: StyleProp<ViewStyle>

theme Type: ReactNativePaper.Theme

testID Type: string

Pass down testID from chip props to touchable for Detox tests.

ellipsizeMode Type: EllipsizeProp

Ellipsize Mode for the children text

Edit this page