Chip

info

This component extends TouchableOpacity, View props.

Usage#

<Chip label={'Chip'} onPress={() => console.log('pressed')}/>

API#

avatarProps#

Avatar props object
AvatarProps

backgroundColor#

Background color
string

badgeProps#

Badge props object
BadgeProps

borderRadius#

Border radius
number

containerStyle#

Component's container style
ViewStyle

dismissColor#

Dismiss color
string

dismissContainerStyle#

Dismiss container style
ImageStyle

dismissIcon#

Dismiss asset
ImageSourcePropType

dismissIconStyle#

Dismiss style
ImageStyle

iconProps#

Additional icon props
Omit<ImageProps, 'source'>

iconSource#

Left icon's source
ImageSourcePropType

iconStyle#

Icon style
ImageStyle

label#

Main Chip text
string

labelStyle#

Label's style
TextStyle

leftElement#

Left custom element
JSX.Element

onDismiss#

Adds a dismiss button and serves as its callback
(props: any) => void

onPress#

On Chip press callback
(props: any) => void

resetSpacings#

Disables all internal elements default spacings. Helps reach a custom design
boolean

rightElement#

Right custom element
JSX.Element

rightIconSource#

Right icon's source
ImageSourcePropType

size#

Chip's size. Number or a width and height object
number | {{width: number, height: number}}

testID#

The test id for e2e tests
string

useCounter#

Display badge as counter (no background)
boolean

useSizeAsMinimum#

Uses size as minWidth and minHeight
boolean