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