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 lastThe index of the item to animate at first render
number
#
backgroundColorThe ColorPalette's background color
string
#
colorsArray of colors to render in the palette
string[]
#
containerStyleComponent's container style
ViewStyle
#
containerWidthThe container margins
number
#
loopWhether the colors pagination scrolls in a loop
boolean
#
numberOfRowsThe number of color rows from 2 to 5
number
#
onValueChangeInvoked once when value changes by selecting one of the swatches in the palette
(value: string, colorInfo: ColorInfo) => void
#
styleComponent's style
ViewStyle
#
swatchStyleStyle to pass all the ColorSwatches in the palette
ViewStyle
#
testIDThe test id for e2e tests
string
#
usePaginationWhether to use pagination when number of colors exceeds the number of rows
boolean
#
valueThe value of the selected swatch
string