React Native Color Palette

A versatile, customizable color picker for React Native with two flavors:

• Full Version: Uses react-native-svg for smooth gradients and precise rendering
• Lite Version: Zero external dependencies, uses pure React Native Views

Features

• Circular color wheel (hue + saturation)
• Rectangle saturation/value picker
• Hue slider bar
• Alpha slider with checkerboard background
• Value/Brightness slider
• HEX and RGB input fields
• Fully customizable (size, colors, visibility)
• TypeScript support
• iOS and Android compatible

Installation

# Using npm
npm install react-native-color-picker-palette

# Using yarn
yarn add react-native-color-picker-palette

Full Version (with react-native-svg)

If you want to use the full version with smooth SVG gradients:

npm install react-native-svg
cd ios && pod install

Lite Version (zero dependencies)

The lite version works out of the box - no additional dependencies needed!

Usage

Basic Usage (Full Version)

import React from 'react';
import { View } from 'react-native';
import { ColorPicker, useColor } from 'react-native-color-picker-palette';

function MyColorPicker() {
  const [color, setColor] = useColor('#FF0000');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ColorPicker
        color={color}
        onChange={setColor}
        onChangeComplete={(c) => console.log('Selected:', c.hex)}
      />
    </View>
  );
}

Lite Version (Zero Dependencies)

import React from 'react';
import { View } from 'react-native';
import { ColorPicker, useColor } from 'react-native-color-picker-palette/lite';

function MyColorPicker() {
  const [color, setColor] = useColor('#FF0000');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ColorPicker
        color={color}
        onChange={setColor}
        onChangeComplete={(c) => console.log('Selected:', c.hex)}
      />
    </View>
  );
}

Picker Variants

Rectangle Variant (default)

<ColorPicker variant="rectangle" ... />

• Saturation/Value rectangle with current hue
• Hue slider is always visible (required to change hue)
• Value slider is NOT shown (value is controlled in the rectangle)

Circle Variant

<ColorPicker variant="circle" ... />

• Color wheel with hue around the circle and saturation from center
• Value/Brightness slider is shown (to control brightness)
• hideHue prop works to hide the hue slider

API Reference

ColorPicker Props

| Prop | Type | Default | Variant | Description | |------|------|---------|---------|-------------| | color | IColor | required | Both | Current color value | | onChange | (color: IColor) => void | required | Both | Called on every color change during interaction | | onChangeComplete | (color: IColor) => void | - | Both | Called when interaction ends (finger lifted) | | variant | 'circle' \| 'rectangle' | 'rectangle' | - | Picker variant | | width | number | 250 | Both | Width of the picker (diameter for circle) | | barHeight | number | 10 | Both | Height of slider bars | | thumbSize | number | 24 | Both | Size of thumb indicators | | hideHue | boolean | false | Circle only | Hide the hue slider (ignored for rectangle) | | hideAlpha | boolean | false | Both | Hide the alpha slider | | hidePreview | boolean | false | Both | Hide the color preview | | hideInput | boolean | false | Both | Hide the input fields | | disabled | boolean | false | Both | Disable all interactions |

Variant-Specific Behavior

| Feature | Rectangle | Circle | |---------|-----------|--------| | Hue selection | Via Hue slider (always shown) | Via color wheel angle | | Saturation selection | X-axis of rectangle | Distance from center | | Value/Brightness selection | Y-axis of rectangle | Via Value slider | | Hue slider | Always visible | Optional (use hideHue) | | Value slider | Not shown | Always shown |

IColor Type

interface IColor {
  hex: string;      // e.g., "#FF0000" or "#FF0000FF" with alpha
  rgb: IRGB;
  hsv: IHSV;
}

interface IRGB {
  r: number;  // 0-255
  g: number;  // 0-255
  b: number;  // 0-255
  a: number;  // 0-1
}

interface IHSV {
  h: number;  // 0-360
  s: number;  // 0-100
  v: number;  // 0-100
  a: number;  // 0-1
}

Hooks

useColor

const [color, setColor] = useColor('#FF0000');

Manages color state with automatic conversion from hex string.

useColorWithCallback

const {
  color,
  setColor,
  handleChange,
  handleChangeComplete,
} = useColorWithCallback('#FF0000', (color) => {
  console.log('Color changed:', color.hex);
});

Manages color state with a callback for change completion.

ColorService

Utility for color conversions:

import { ColorService } from 'react-native-color-picker-palette';

// Create color from hex
const color = ColorService.fromHex('#FF5500');

// Create color from RGB
const color = ColorService.fromRgb({ r: 255, g: 85, b: 0, a: 1 });

// Create color from HSV
const color = ColorService.fromHsv({ h: 20, s: 100, v: 100, a: 1 });

// Get string representations
ColorService.toRgbString(color.rgb);   // "rgb(255, 85, 0)"
ColorService.toRgbaString(color.rgb);  // "rgba(255, 85, 0, 1)"
ColorService.toHslString(color.hsv);   // "hsl(20, 100%, 50%)"

Individual Components

For custom layouts, you can use individual components:

import {
  Saturation,           // Circular color wheel (for circle variant)
  RectangleSaturation,  // Rectangle saturation/value picker
  Hue,                  // Hue slider
  Alpha,                // Alpha slider
  Value,                // Brightness slider (for circle variant)
  Fields,               // HEX + RGB inputs
  HexField,             // HEX input only
  RgbFields,            // RGB inputs only
  Thumb,                // Thumb indicator
} from 'react-native-color-picker-palette';

Example: Custom Layout

import React from 'react';
import { View } from 'react-native';
import {
  RectangleSaturation,
  Hue,
  Alpha,
  useColor,
} from 'react-native-color-picker-palette';

function CustomColorPicker() {
  const [color, setColor] = useColor('#FF0000');

  return (
    <View style={{ padding: 20 }}>
      <RectangleSaturation
        color={color}
        onChange={setColor}
        width={300}
        height={200}
        thumbSize={28}
      />
      <View style={{ height: 20 }} />
      <Hue
        color={color}
        onChange={setColor}
        barHeight={12}
        thumbSize={24}
      />
      <View style={{ height: 10 }} />
      <Alpha
        color={color}
        onChange={setColor}
        barHeight={12}
        thumbSize={24}
      />
    </View>
  );
}

Full vs Lite: When to Use Which?

Use Full Version When:

• You need the smoothest possible gradients
• You're already using react-native-svg in your project
• Visual quality is the top priority

Use Lite Version When:

• You want zero additional dependencies
• You're using Expo and want to avoid native modules
• Bundle size is a concern
• You need a quick setup without pod install

Screenshots

Full Version (with react-native-svg)

| Rectangle | Circle | |:---------:|:------:| | | |

Lite Version (zero dependencies)

| Rectangle | Circle | |:---------:|:------:| | | |

TypeScript Support

This package is written in TypeScript and includes full type definitions:

import type {
  IColor,
  IRGB,
  IHSV,
  ColorModel,
  IColorPickerProps,
  ISaturationProps,
  IRectangleSaturationProps,
  IHueProps,
  IAlphaProps,
  IValueProps,
  IThumbProps,
  IFieldsProps,
  ILayout,
} from 'react-native-color-picker-palette';

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Author

Sabri Ghazali

Made with React Native