Skip to main content

ColorPicker

A picker component for color selection
(code example)

note

This is a screen width component

Usage​

Live Editor
<ColorPicker
 colors={[Colors.green10, Colors.green20, Colors.green30, Colors.green40, Colors.green50, Colors.green60, Colors.green70]}
 initialColor={Colors.green10}
 value={currentColor}
 onDismiss={() => console.log('dismissed')}
 onSubmit={() => console.log('submit')}
 onValueChange={() => console.log('value changed')}
/>
Result
Loading...

API​

accessibilityLabels​

Accessibility labels as an object of strings { addButton: string, dismissButton: string, doneButton: string, input: string}

animatedIndex​

Default is last​

The index of the item to animate at first render number

backgroundColor​

The ColorPicker's background color string

colors​

Array of colors for the picker's color palette (hex values) string[]

onValueChange​

Callback for the picker's color palette change (value: string, colorInfo: ColorInfo) => void

testID​

The test id for e2e tests string

value​

The value of the selected swatch string