ColorPalette

A component for displaying a color palette
(code example)

note

This is a screen width component

Usage

Live Editor

<ColorPalette
 colors={['transparent', Colors.green30, Colors.yellow30, Colors.red30]}
 value={selectedColor}
 onValueChange={() => console.log('value changed')}
/>

Result

Loading...

API

animatedIndex

Default is last

The index of the item to animate at first render number

backgroundColor

The ColorPalette's background color string

colors

Array of colors to render in the palette string[]

containerStyle

Component's container style ViewStyle

containerWidth

The container margins number

loop

Whether the colors pagination scrolls in a loop boolean

numberOfRows

The number of color rows from 2 to 5 number

onValueChange

Invoked once when value changes by selecting one of the swatches in the palette (value: string, colorInfo: ColorInfo) => void

style

Component's style ViewStyle

swatchStyle

Style to pass all the ColorSwatches in the palette ViewStyle

testID

The test id for e2e tests string

usePagination

Whether to use pagination when number of colors exceeds the number of rows boolean

value

The value of the selected swatch string