ColorSwatchA swatch is a sample of a color. Swatches behavior is somewhat similar to this of a RadioButton, so only a single swatch can be selected at a given moment.

Overview

Swatch Styles and States

Style	Default state	Selected	Unavailable
Light color
Dark color
Transparent

Spec

Border width 1px.

‘Unavailable’ swatch can be either tappable or “disabled”.

Dev

PlaygroundCode Example

APIThis is the list of additional props for the component

animated

boolean

Is first render should be animated

color

string

The color of the ColorSwatch

index

number

The index of the Swatch if in array

onPress

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

Callback from press event

selected

boolean

Is the initial state is selected

size

number

Color Swatch size

style

ViewStyle

Component's style

unavailable

boolean

Is the initial state is unavailable

value

string

The identifier value of the ColorSwatch in a ColorSwatch paletteMust be different than other ColorSwatches in the same group