Color picker

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/color-picker.json

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/color-picker.

Usage

import { useState } from "react";
import { ColorPicker } from "@/components/goodui-native/color-picker/color-picker";

export function CalendarColor() {
  const [color, setColor] = useState("#2F6FDB");
  return (
    <ColorPicker
      value={color}
      onValueChange={setColor}
      swatches={[
        { value: "#2F6FDB", label: "Blue" },
        { value: "#1F9D6B", label: "Green" },
        { value: "#E0A21B", label: "Amber" },
        { value: "#E5484D", label: "Red" },
        { value: "#8E4EC6", label: "Purple" },
      ]}
    />
  );
}

When to use

Examples

<ColorPicker custom="inline" shape="square" size="sm" swatches={brandColors} value={brand} onValueChange={setBrand} />

<ColorPicker custom="none" swatches={["#F2F2F2", "#1C1C1E", "#C7B299"]} defaultValue="#1C1C1E" accessibilityLabel="Finish" />

API reference

Motion and haptics

• •The ring travels between swatches: the edges facing the new swatch lead on the snappy spring and the others follow on smooth, so it stretches across and settles, across rows too.
• •The selected swatch shrinks to 78 % on the bouncy spring, opening a gap inside the ring; the old one grows back on snappy.
• •The pad thumb and the hue thumb follow the finger 1:1 from touch down; the pad, the thumb fill and the preview recolor on the UI thread while dragging. A swatch tap moves the thumbs there on the smooth spring.
• •The pad opened from the custom swatch drops in on the smooth spring.
• •Reduced motion: the ring jumps, swatch scaling is a short timing, the thumbs jump to a swatch's color, and the pad appears in place.

• •Haptic: select when the color changes from a swatch, a pad or hue release, or a key
• •Haptic: haptic={false} silences it

• •Dragging updates shared values only; React renders once when the finger lifts, which is also when onValueChange fires.
• •Gradients are react-native-svg linear gradients over a view whose hue is animated, so the pad costs one view and one svg.

Accessibility

• •Swatches are radios in a radiogroup named by accessibilityLabel (default "Color"); give swatches a label so they are read as names, otherwise the hex code is read.
• •The custom swatch is a button ("Custom color", with the current custom hex) that reports expanded while the pad is open.
• •The pad is adjustable: increment and decrement change brightness, and "More saturated" and "Less saturated" actions change saturation, in 5 % steps; its value reads "Saturation 80 percent, brightness 60 percent".
• •The hue bar is adjustable in 5° steps with a value in degrees.
• •On the web the pad and the hue bar are focusable sliders with aria-valuenow, min, max and valuetext: Left and Right change saturation, Up and Down brightness on the pad; arrows change the hue on the bar.
• •Swatch touch areas are 44 pt whatever the swatch size. The preview is read as "Was #…, now #…".

Notes for AI

Related