Skip to main content

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