ColorPicker

Picking color for background, typography and other elements is possible by various means, among these are:
Color Swatch, Color Palette and Color Picker Dialog.
All these can be implemented in the color picking flow.

Overview

Usage ExampleIn this example, user picks his own theme color.

1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
2. Using HLS controls (or even typing actual HEX value) user can achieve any color.

3. Changes are saved by tapping on ‘V’.
4. New color styles is saved in the Color Palette and selected as the theme color.

Additional entry points examplesAs mentioned, Color Picker dialog can be triggered by various entry points.

Adding HEX values manuallyColor Picker dialog allows manual entry of the HEX values:

1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value.
2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color.

3. ‘#’ symbol is permanent and cant be deleted.
4. Once hex value is valid (6 characters), background color changes accordingly.

Spec

Dev

PlaygroundCode Example

APIThis is the list of additional props for the component

accessibilityLabels

{ addButton: string, dismissButton: string, doneButton: string, input: string}

Accessibility labels as an object of strings. Default is { addButton: 'add custom color using hex code', dismissButton: 'dismiss', doneButton: 'done', input: 'custom hex color code' }

animatedIndex

number

The index of the item to animate at first renderDefault is last

backgroundColor

string

The ColorPicker's background color

colors

string[]

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

onValueChange

(value: string, colorInfo: ColorInfo) => void

Callback for the picker's color palette change

testID

string

The test id for e2e tests

value

string

The value of the selected swatch