Skip to main content

ColorPalette

A component for displaying a color palette
(code example)

note

This is a screen width component

Usage#

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

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