@darthrapid/react-native-color-picker

Lightweight HSB color picker for React Native with alpha channel support, color palettes, modal/inline modes, and i18n. Pure JS, Expo compatible.

Installation

bun add @darthrapid/react-native-color-picker

Peer dependency

bun add react-native-svg

Basic Usage

By default, renders as a small color swatch. Tap it to open the picker modal.

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

export default function App() {
  const [color, setColor] = useState("#007AFF");

  return <ColorPicker value={color} onChange={setColor} />;
}

Inline Mode

Renders the picker directly in your layout without a modal — adapts to parent width.

<ColorPicker value={color} onChange={setColor} inline />

Tabs

The picker has 3 tabs — only selected ones are shown:

// All (default)
<ColorPicker tabs={["picker", "values", "palettes"]} />

// Picker and values only
<ColorPicker tabs={["picker", "values"]} />

// Picker only — tab bar is hidden
<ColorPicker tabs={["picker"]} />

Tab	Content
picker	Saturation/brightness pad + hue slider (+ alpha slider when enabled)
values	Hex input, RGB and HSB values, save button
palettes	Color palettes + saved colors grid

Alpha Channel

Enable alpha channel support with showAlpha. The picker will show an alpha slider and return 8-digit hex colors (#RRGGBBAA).

const [color, setColor] = useState("#007AFFCC");

<ColorPicker
  value={color}
  onChange={setColor}
  showAlpha
/>

Color Palettes

The palettes tab supports custom color palettes. Each palette can contain simple colors or color groups with shades.

import { ColorPicker, tailwindPalette } from "@darthrapid/react-native-color-picker";

// Use built-in Tailwind palette
<ColorPicker
  value={color}
  onChange={setColor}
  palettes={[tailwindPalette]}
/>

// Custom palette with simple colors
<ColorPicker
  value={color}
  onChange={setColor}
  palettes={[
    {
      name: "Brand",
      colors: {
        primary: "#007AFF",
        secondary: "#5856D6",
        accent: "#FF2D55",
      },
    },
  ]}
/>

// Custom palette with color shades
<ColorPicker
  value={color}
  onChange={setColor}
  palettes={[
    {
      name: "Brand",
      colors: {
        blue: {
          100: "#DBEAFE",
          500: "#3B82F6",
          900: "#1E3A8A",
        },
        gray: {
          100: "#F3F4F6",
          500: "#6B7280",
          900: "#111827",
        },
      },
    },
  ]}
/>

Saved Colors

The palettes tab includes a "Saved" section where users can save colors. Use controlled mode for persistence:

const [savedColors, setSavedColors] = useState<string[]>([]);

<ColorPicker
  value={color}
  onChange={setColor}
  savedColors={savedColors}
  onSaveColor={(hex) => setSavedColors((prev) => [hex, ...prev])}
  onClearSaved={() => setSavedColors([])}
/>

Or let the component manage saved colors internally (non-persistent):

<ColorPicker value={color} onChange={setColor} />

i18n / Custom Labels

<ColorPicker
  labels={{
    picker: "Výber",
    values: "Hodnoty",
    palettes: "Palety",
    save: "Uložiť",
    saved: "Uložené",
    clearSaved: "Vymazať",
    noSavedColors: "Žiadne uložené farby",
  }}
/>

Only pass the labels you want to override — the rest stays English by default.

Light / Dark Theme

<ColorPicker theme="dark" />  // default
<ColorPicker theme="light" />

Props

Prop	Type	Default	Description
value	string	"#007AFF"	Current color (6 or 8 digit hex)
onChange	(hex: string) => void	–	Called when color changes
tabs	TabId[]	["picker", "values", "palettes"]	Which tabs to show
panelWidth	DimensionValue	"100%"	Panel width in modal mode. Ignored when inline
hueStripHeight	number	28	Hue/alpha slider height
theme	"light" | "dark"	"dark"	Color theme
disabled	boolean	false	Disables touch input
style	ViewStyle	–	Style for the picker panel
swatchSize	number	48	Swatch trigger size
swatchBorderRadius	number	12	Swatch border radius
swatchStyle	ViewStyle	–	Style for the swatch trigger
inline	boolean	false	Renders picker inline without modal
labels	ColorPickerLabels	–	Custom labels (i18n)
contentStyle	ViewStyle	–	Style for the modal content wrapper
showAlpha	boolean	false	Show alpha channel slider
palettes	ColorPalette[]	–	Color palettes for the palettes tab
savedColors	string[]	–	Saved colors (controlled mode)
onSaveColor	(hex: string) => void	–	Called when user saves a color
onClearSaved	() => void	–	Called when user clears saved colors

Ref API

import { useRef } from "react";
import { ColorPicker, type ColorPickerRef } from "@darthrapid/react-native-color-picker";

const ref = useRef<ColorPickerRef>(null);

<ColorPicker ref={ref} value={color} onChange={setColor} />

Method	Description
getColor()	Returns current color as hex string
setColor(hex)	Sets color programmatically
clearSaved()	Clears saved colors
open()	Opens the modal (no-op when inline)
close()	Closes the modal (no-op when inline)

Exports

import {
  ColorPicker,
  type ColorPickerProps,
  type ColorPickerRef,
  type ColorPickerLabels,
  type ColorPalette,
  tailwindPalette,
} from "@darthrapid/react-native-color-picker";

Examples

Full-featured picker with alpha and Tailwind palette

import { useState } from "react";
import { ColorPicker, tailwindPalette } from "@darthrapid/react-native-color-picker";

export default function App() {
  const [color, setColor] = useState("#3B82F6");
  const [savedColors, setSavedColors] = useState<string[]>([]);

  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      showAlpha
      palettes={[tailwindPalette]}
      savedColors={savedColors}
      onSaveColor={(hex) => setSavedColors((prev) => [hex, ...prev])}
      onClearSaved={() => setSavedColors([])}
    />
  );
}

Custom swatch size

<ColorPicker
  value={color}
  onChange={setColor}
  swatchSize={40}
  swatchBorderRadius={8}
/>

Programmatic control

ref.current?.setColor("#FF3B30");
ref.current?.open();

License

MIT