# Reanimated Color Picker

> A pure JavaScript color picker for React Native, supporting iOS, Android, Expo, Web and RTL layouts.

> Every document from https://alabsi91.github.io/reanimated-color-picker/llms.txt inlined in full, so no links need following.

---

## Reanimated Color Picker

- **A Pure JavaScript Color Picker for React Native.**

- **Highly customizable.**

- **Supports iOS, Android, Expo, and Web platforms.**

- **Supports right-to-left (RTL) layouts.**

### For LLMs

This documentation is also published as plain Markdown for AI coding agents:
[llms.txt](https://alabsi91.github.io/reanimated-color-picker/llms.txt) indexes every page, and
[llms-full.txt](https://alabsi91.github.io/reanimated-color-picker/llms-full.txt) contains the whole documentation in a single file.

### Screenshots

![Example_1](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_1.png) ![Example_7](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_7.png)

![Example_2](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_2.png) ![Example_3](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_3.png)

![Example_4](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_4.png) ![Example_5](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_5.png)

![Example_8](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_8.png) ![Example_9](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_9.png)

![Example_10](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_10.png) ![Example_11](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_11.png)

![Example_6](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_6.png) ![Example_12](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_12.png)

Source: https://alabsi91.github.io/reanimated-color-picker/index.md

---

## ColorKit

`colorKit` is a collection of color tools that are utilized internally within the `ColorPicker`.

### Supported Colors

##### RGB

- `"rgb(255, 0, 255)"`
- `"rgb(255 0 255)"`
- `"rgba(255, 0, 255, 1.0)"`
- `"rgb(255, 0, 255, 1.0)"`
- `"rgba(255 0 255 / 1.0)"`
- `"rgb(255 0 255 / 1.0)"`
- `{r: number, g: number, b: number, a: number}`
- `{r: number, g: number, b: number}`

##### HEX

- `"#f0f"` (#rgb)
- `"#ff00ff"` (#rrggbb)
- `"#f0ff"` (#rgba)
- `"#ff00ff00"` (#rrggbbaa)

##### HSL

- `"hsl(360, 100%, 100%)"`
- `"hsl(360deg, 100%, 100%)"`
- `"hsl(360 100% 100%)"`
- `"hsl(360deg 100% 100%)"`
- `"hsla(360, 100%, 100%, 1.0)"`
- `"hsl(360, 100%, 100%, 1.0)"`
- `"hsla(360deg, 100%, 100%, 1.0)"`
- `"hsl(360deg, 100%, 100%, 1.0)"`
- `"hsla(360 100% 100% / 1.0)"`
- `"hsl(360 100% 100% / 1.0)"`
- `"hsla(360deg 100% 100% / 1.0)"`
- `"hsl(360deg 100% 100% / 1.0)"`
- `{h: number, s: number, l: number}`
- `{h: number, s: number, l: number, a: number}`

##### HSV

- `"hsv(360, 100%, 100%)"`
- `"hsv(360deg, 100%, 100%)"`
- `"hsv(360 100% 100%)"`
- `"hsv(360deg 100% 100%)"`
- `"hsva(360, 100%, 100%, 1.0)"`
- `"hsv(360, 100%, 100%, 1.0)"`
- `"hsva(360deg, 100%, 100%, 1.0)"`
- `"hsv(360deg, 100%, 100%, 1.0)"`
- `"hsva(360 100% 100% / 1.0)"`
- `"hsv(360 100% 100% / 1.0)"`
- `"hsva(360deg 100% 100% / 1.0)"`
- `"hsv(360deg 100% 100% / 1.0)"`
- `{h: number, s: number, v: number}`
- `{h: number, s: number, v: number, a: number}`

##### HWB

- `"hwb(360, 100%, 100%)"`
- `"hwb(360deg, 100%, 100%)"`
- `"hwb(360 100% 100%)"`
- `"hwb(360deg 100% 100%)"`
- `"hwba(360, 100%, 100%, 1.0)"`
- `"hwb(360, 100%, 100%, 1.0)"`
- `"hwba(360deg, 100%, 100%, 1.0)"`
- `"hwb(360deg, 100%, 100%, 1.0)"`
- `"hwba(360 100% 100% / 1.0)"`
- `"hwb(360 100% 100% / 1.0)"`
- `"hwba(360deg 100% 100% / 1.0)"`
- `"hwb(360deg 100% 100% / 1.0)"`
- `{h: number, w: number, b: number}`
- `{h: number, w: number, b: number, a: number}`

##### Color ints

- `0xff00ffff` (0xrrggbbaa)

##### Color keywords

The named colors implementation follows the [CSS3/SVG specification](https://www.w3.org/TR/css-color-3/#svg-color).

- aliceblue (`#f0f8ff`)
- antiquewhite (`#faebd7`)
- aqua (`#00ffff`)
- aquamarine (`#7fffd4`)
- azure (`#f0ffff`)
- and more ...

> [!info] HOW TO RUN ON THE UI THREAD
> To execute any of the `colorKit` methods, you can use `runOnUI`. For example:
>
> ```js
> function workletFunction() {
>   "worklet";
>   const rgb = colorKit.runOnUI().RGB("#f0ff").object();
> }
> ```

### Color Conversion

#### RGB

Convert any of the [supported color](#supported-colors) formats into the `RGB` format.

##### Syntax

```ts
colorKit.RGB(color: SupportedColorFormats).string(forceRGBA = false): string;
colorKit.RGB(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.RGB(color: SupportedColorFormats).object(roundValues = true): { r: number; g: number; b: number; a: number };
```

##### Example

```js
import { colorKit } from "reanimated-color-picker";

colorKit.RGB("hsl(360, 100%, 100%)").string(); // rgb(255, 255, 255)
colorKit.RGB("hsl(360, 100%, 100%)").string(true); // rgba(255, 255, 255, 1) force rgba
colorKit.RGB("#f0ff").object(); // { r: 255, g: 0, b: 255, a: 1 }
colorKit.RGB({ h: 360, s: 100, v: 50 }).array(); // [128, 0, 0, 1]
```

#### HEX

Convert any of the [supported color](#supported-colors) formats into the `HEX` format.

##### Syntax

```ts
colorKit.HEX(color: SupportedColorFormats, forceAlpha?: boolean): string;
```

##### Example

```js
import { colorKit } from "reanimated-color-picker";

colorKit.HEX("red"); //  #ff0000
colorKit.HEX("hsv(360, 10%, 100%)"); // #ffe6e6
colorKit.HEX("rgba(25, 255, 255, 1)"); // #19ffff
colorKit.HEX({ h: 360, s: 100, l: 50 }); // #ff0000
```

#### HSL

Convert any of the [supported color](#supported-colors) formats into the `HSL` format.

##### Syntax

```ts
colorKit.HSL(color: SupportedColorFormats).string(forceHSLA = false): string;
colorKit.HSL(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.HSL(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; l: number; a: number };
```

##### Example

```js
import { colorKit } from "reanimated-color-picker";

colorKit.HSL("orange").string(); // hsl(39, 100%, 50%)
colorKit.HSL("#503e7a").string(true); // hsla(258, 33%, 36%, 1)
colorKit.HSL("rgb(114, 99, 29)").object(); // { h: 49, s: 59, l: 28, a: 1 }
colorKit.HSL({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 28, 22, 1]
```

#### HSV

Convert any of the [supported color](#supported-colors) formats into the `HSV` format.

##### Syntax

```ts
colorKit.HSV(color: SupportedColorFormats).string(forceHSVA = false): string;
colorKit.HSV(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.HSV(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; v: number; a: number };
```

##### Example

```js
import { colorKit } from "reanimated-color-picker";

colorKit.HSV("orange").string(true); // hsva(39, 100%, 100%, 1)
colorKit.HSV("#503e7a").string(); // hsv(258, 49%, 48%)
colorKit.HSV("rgb(114, 99, 29)").object(); // { h: 49, s: 75, v: 45, a: 1 }
colorKit.HSV({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 44, 28, 1]
```

#### HWB

Convert any of the [supported color](#supported-colors) formats into the `HWB` format.

##### Syntax

```ts
colorKit.HWB(color: SupportedColorFormats).string(forceHWBA = false): string;
colorKit.HWB(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.HWB(color: SupportedColorFormats).object(roundValues = true): { h: number; w: number; b: number; a: number };
```

##### Example

```js
import { colorKit } from "reanimated-color-picker";

colorKit.HWB("orange").string(); // hwb(39 0% 0%)
colorKit.HWB("#503e7a").string(true); // hwb(258 24% 52% / 1)
colorKit.HWB("rgb(114, 99, 29)").object(); // { h: 49, w: 11, b: 55, a: 1 }
colorKit.HWB({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 16, 72, 1]
```

### Color Information

#### `getFormat`

Identify the color format of a given `string` or `object`, and return `null` for invalid colors.

```js
colorKit.getFormat("orange"); // named

colorKit.getFormat("rgb(211, 168, 151)"); // rgb
colorKit.getFormat("rgba(211, 168, 151, 1)"); // rgba
colorKit.getFormat({ r: 211, g: 168, b: 151 }); // rgb
colorKit.getFormat({ r: 211, g: 168, b: 151, a: 1 }); // rgba

colorKit.getFormat("hsl(224, 77%, 28%)"); // hsl
colorKit.getFormat("hsla(224, 77%, 28%, 1)"); // hsla
colorKit.getFormat({ h: 224, s: 77, l: 28 }); // hsl
colorKit.getFormat({ h: 224, s: 77, l: 28, a: 1 }); // hsla

colorKit.getFormat("hsva(289, 99%, 40%, 1)"); // hsva
colorKit.getFormat("hsv(289, 99%, 40%)"); // hsv
colorKit.getFormat({ h: 289, s: 99, v: 40 }); // hsv
colorKit.getFormat({ h: 289, s: 99, v: 40, a: 1 }); // hsva

colorKit.getFormat("hwba(289, 99%, 40%, 1)"); // hwba
colorKit.getFormat("hwb(289, 99%, 40%)"); // hwb
colorKit.getFormat({ h: 289, w: 99, b: 40 }); // hwb
colorKit.getFormat({ h: 289, w: 99, b: 40, a: 1 }); // hwba

colorKit.getFormat("#fff"); // hex3
colorKit.getFormat("#ffff"); // hex4
colorKit.getFormat("#ffffffff"); // hex8

colorKit.getFormat("rgb(211, 168)"); // null (missing the blue channel)
```

#### `getRed`

Get the `red` channel value of a given color.

```js
colorKit.getRed("red"); // 255
```

#### `getGreen`

Get the `green` channel value of a given color.

```js
colorKit.getGreen("rgb(0, 200, 0)"); // 200
```

#### `getBlue`

Get the `blue` channel value of a given color.

```js
colorKit.getBlue("hsl(200, 60%, 50%)"); // 204
```

#### `getHue`

Get the `hue` channel value of a given color.

```js
colorKit.getHue("#87c270"); // 103
```

#### `getLuminance`

Get the color's HSL `luminosity` channel value.

If you want the overall `luminosity` of a color, use the [`getLuminanceWCAG`](#getluminancewcag) method.

```js
colorKit.getLuminance({ r: 67, g: 59, b: 79, a: 1 }); // 27
```

#### `getBrightness`

Get the HSV's `value` (brightness) channel value of a given color.

```js
colorKit.getBrightness({ h: 127, s: 36, l: 8, a: 1 }); // 11
```

#### `getAlpha`

Get the `alpha` channel value of a given color.

```js
colorKit.getAlpha("#d2c765c7"); // 0.78
```

#### `getLuminanceWCAG`

Returns the perceived `luminance` of the given color, from `0-1` as defined by [Web Content Accessibility Guidelines (Version 2.0)](https://www.w3.org/TR/WCAG20/).

```js
colorKit.getLuminanceWCAG("rgba(176, 7, 120, 1)"); // 0.10738130030129947
```

#### `areColorsEqual`

Check if two colors are similar within a specified tolerance.

```js
const tolerance = 0;
const isEqual = colorKit.areColorsEqual("#F00", "red", tolerance); // true
```

#### `contrastRatio`

Calculates the contrast ratio between two colors, useful for ensuring accessibility and readability.

```js
colorKit.contrastRatio("yellow", "rgba(40, 38, 43, 1)"); // 13.95
```

#### `isDark`

Returns a boolean indicating whether the color is considered "dark" or not.

```js
colorKit.isDark("hsla(224, 77%, 28%, 1)"); // true
```

#### `isLight`

Returns a boolean indicating whether the color is considered "light" or not.

```js
colorKit.isLight("hsla(224, 77%, 28%, 1)"); // false
```

### Color Manipulation

#### `setRed`

Set the `red` value of a color to a specific amount.

```js
colorKit.setRed("#a5a2a1", 150).hex(); // #96a2a1
colorKit.setRed("#a5a2a1", 200).rgb().string(); // rgb(200, 162, 161)
colorKit.setRed("#a5a2a1", 200).rgb().object(); // { r: 200, g: 162, b: 161, a: 1 }
colorKit.setRed("#a5a2a1", 200).rgb().array(); // [200, 162, 161, 1]
colorKit.setRed("#a5a2a1", 200).hsl().string(); // hsl(2, 26%, 71%)
colorKit.setRed("#a5a2a1", 200).hsl().object(); // { h: 2, s: 26, l: 71, a: 1 }
colorKit.setRed("#a5a2a1", 200).hsl().array(); // [2, 26, 71, 1]
colorKit.setRed("#a5a2a1", 200).hsv().string(); // hsv(2, 20%, 78%)
colorKit.setRed("#a5a2a1", 200).hsv().object(); // { h: 2, s: 20, v: 78, a: 1 }
colorKit.setRed("#a5a2a1", 200).hsv().array(); // [2, 20, 78, 1]
```

#### `increaseRed`

Increase the `red` value of a color by the given percentage/amount.

```js
colorKit.increaseRed("#bb661b", 50).hex(); // #ed661b
colorKit.increaseRed("#bb661b", "50%").hex(); // #ff661b
```

#### `decreaseRed`

Decrease the `red` value of a color by the given percentage/amount.

```js
colorKit.decreaseRed("#bb661b", 50).hex(); // #89661b
colorKit.decreaseRed("#bb661b", "50%").hex(); // #5e661b
```

#### `setGreen`

Set the `green` value of a color to a specific amount.

```js
colorKit.setGreen("#d7e2d0", 50).hex(); // #d732d0
```

#### `increaseGreen`

Increase the `green` value of a color by the given percentage/amount.

```js
colorKit.increaseGreen("#d7e2d0", 50).hex(); // #d7ffd0
colorKit.increaseGreen("#d7e2d0", "10%").hex(); // #d7f9d0
```

#### `decreaseGreen`

Decrease the `green` value of a color by the given percentage/amount.

```js
colorKit.decreaseGreen("#d7e2d0", 50).hex(); // #d7b0d0
colorKit.decreaseGreen("#d7e2d0", "10%").hex(); // #d7cbd0
```

#### `setBlue`

Set the `blue` value of a color to a specific amount.

```js
colorKit.setBlue("#5d8e92", 50).hex(); // #5d8e32
```

#### `increaseBlue`

Increase the `blue` value of a color by the given percentage/amount.

```js
colorKit.increaseBlue("#5d8e92", 50).hex(); // #5d8ec4
colorKit.increaseBlue("#5d8e92", "50%").hex(); // #5d8edb
```

#### `decreaseBlue`

Decrease the `blue` value of a color by the given percentage/amount.

```js
colorKit.decreaseBlue("#5d8e92", 50).hex(); // #5d8e60
colorKit.decreaseBlue("#5d8e92", "50%").hex(); // #5d8e49
```

#### `setHue`

Set the `hue` value of a color to a specific amount.

```js
colorKit.setHue("#2c1a51", 50).hex(); // #51481a
```

#### `increaseHue`

Increase the `hue` value of a color by the given percentage/amount.

```js
colorKit.increaseHue("#2c1a51", 50).hex(); // #511a48
colorKit.increaseHue("#2c1a51", "50%").hex(); // #511a1a
```

#### `decreaseHue`

Decrease the `hue` value of a color by the given percentage/amount.

```js
colorKit.decreaseHue("#2c1a51", 50).hex(); // #1a3651
colorKit.decreaseHue("#2c1a51", "50%").hex(); // #1a5123
```

#### `spin`

Spin the `hue` channel by a certain percentage/amount.

```js
colorKit.spin("#2c1a51", 350).hex(); // #231a51
colorKit.spin("#2c1a51", "350%").hex(); // #40511a
```

#### `setSaturation`

Set the `saturation` value of a color to a specific amount.

```js
colorKit.setSaturation("#482e45", 100).hex(); // #750068
```

#### `saturate`

Increase the `saturation` value of a color by the given percentage/amount.

```js
colorKit.saturate("#482e45", 50).hex(); // #65105b
colorKit.saturate("#482e45", "50%").hex(); // #4e2749
```

#### `desaturate`

Decrease the `saturation` value of a color by the given percentage/amount.

```js
colorKit.desaturate("#482e45", 50).hex(); // #3b3b3b
colorKit.desaturate("#482e45", "50%").hex(); // #413440
```

#### `setLuminance`

Set HSL's `luminosity` channel for a given color to a specific amount.

```js
colorKit.setLuminance("#dadafc", 50).hex(); // #1313ec
```

#### `brighten`

Increase the `brightness` of the given color by a certain percentage/amount.

```js
colorKit.brighten("#dadafc", 50).hex(); // #ffffff
colorKit.brighten("#dadafc", "5%").hex(); // #efeffe
```

#### `darken`

Decrease the `brightness` of the given color by a certain percentage/amount.

```js
colorKit.darken("#dadafc", 50).hex(); // #1010c6
colorKit.darken("#dadafc", "50%").hex(); // #1212d9
```

#### `setBrightness`

Set HSV's `value` (brightness) channel for a given color to a specific amount.

```js
colorKit.setBrightness("#dadafc", 50).hex(); // #6f6f80
```

#### `increaseBrightness`

Increase HSV's `value` (brightness) channel value of a color by the given percentage/amount.

```js
colorKit.increaseBrightness("#dadafc", 50).hex(); // #dedeff
colorKit.increaseBrightness("#dadafc", "5%").hex(); // #dedeff
```

#### `decreaseBrightness`

Decrease HSV's `value` (brightness) channel value of a color by the given percentage/amount.

```js
colorKit.decreaseBrightness("#dadafc", 50).hex(); // #6d6d7d
colorKit.decreaseBrightness("#dadafc", "50%").hex(); // #6e6e7e
```

#### `setAlpha`

Set the `alpha` value of a color to a specific amount.

#### `increaseAlpha`

Increase the `alpha` value of a color by the given percentage/amount.

#### `decreaseAlpha`

Decrease the `alpha` value of a color by the given percentage/amount.

### Color Utilities

#### `parse`

Parse any supported color format into a typed `{ format, value }` object. Returns `undefined` if the input is invalid.

```ts
colorKit.parse("#ff0000");
// → { format: 'hex6', value: { r: 255, g: 0, b: 0 } }

colorKit.parse("hsl(120, 100%, 50%)");
// → { format: 'hsl', value: { h: 120, s: 100, l: 50 } }

colorKit.parse({ r: 255, g: 0, b: 0, a: 0.5 });
// → { format: 'rgba', value: { r: 255, g: 0, b: 0, a: 0.5 } }

colorKit.parse("not-a-color");
// → undefined
```

#### `blend`

Blends two colors by a certain amount.

```js
colorKit.blend("red", "yellow", 50).hex(); // #ff8000
```

#### `invert`

Invert (negate) a color: black becomes white, white becomes black, blue becomes orange, and so on.

```js
colorKit.invert("#000").hex(); // #ffffff
```

#### `grayscale`

Completely desaturates a color into grayscale.

```js
colorKit.grayscale("#172140").hex(); // #212121
```

#### `adjustContrast`

Returns the first color (text color) with the desired contrast ratio against the second color (background color).

```js
colorKit.adjustContrast("rgb(50, 50, 50)", "#fff", 4.5).hex(); // #777777
```

#### `randomHslColor`

Generate a random color from `HSL` values.

You can provide a range between two values for each channel.

```js
colorKit.randomHslColor({ h: [0, 360], s: [0, 100], l: [0, 100], a: [1, 1] }).hex(); // #b07345
colorKit.randomHslColor().hex(); // #d0bfd6
```

#### `randomHsvColor`

Generate a random color from `HSV` values.

You can provide a range between two values for each channel.

```js
colorKit.randomHsvColor({ h: [0, 360], s: [0, 100], v: [0, 100], a: [1, 1] }).hex(); // #59078c
colorKit.randomHsvColor().hex(); // #2b553f
```

#### `randomRgbColor`

Generate a random color from `rgb` values.

You can provide a range between two values for each channel.

```js
colorKit.randomRgbColor({ r: [0, 360], g: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b
colorKit.randomRgbColor().hex(); // #b07345
```

#### `randomHwbColor`

Generate a random color from `hwb` values.

You can provide a range between two values for each channel.

```js
colorKit.randomHwbColor({ h: [0, 360], w: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b
colorKit.randomHwbColor().hex(); // #b07345
```

Source: https://alabsi91.github.io/reanimated-color-picker/colorkit/index.md

---

## All Examples

The full source of every example app, shared by the bare and Expo workflows.

### Shared Components

Every example below imports these from `./components`.

#### `BaseContainer`

```tsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import { Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, type SharedValue } from 'react-native-reanimated';

type RegisterBackgroundColor = (color: SharedValue<string>) => void;

const RegisterBackgroundColorContext = createContext<RegisterBackgroundColor | null>(null);

/**
 * The color the example follows, tinting the modal background while the example runs inside a `BaseContainer`.
 *
 * Rendered on its own, outside a container, it is an ordinary shared value and nothing paints with it.
 */
export function useContainerBackgroundColor(initialColor: string): SharedValue<string> {
  const color = useSharedValue(initialColor);
  const registerBackgroundColor = useContext(RegisterBackgroundColorContext);

  useEffect(() => registerBackgroundColor?.(color), [registerBackgroundColor, color]);

  return color;
}

type BaseContainerProps = {
  name: string;
  children: React.ReactNode;
};

export default function BaseContainer({ name, children }: BaseContainerProps) {
  const [showModal, setShowModal] = useState(false);
  const [backgroundColor, setBackgroundColor] = useState<SharedValue<string> | null>(null);

  const backgroundColorStyle = useAnimatedStyle(() => {
    return { backgroundColor: backgroundColor ? backgroundColor.value : '#aaa' };
  });

  return (
    <>
      <Pressable style={styles.btn} onPress={() => setShowModal(true)}>
        <Text style={styles.btnTxt}>{name} </Text>
      </Pressable>

      <Modal onRequestClose={() => setShowModal(false)} visible={showModal} animationType='slide'>
        <Animated.View style={[styles.wrapper, backgroundColorStyle]}>
          <View style={styles.container}>
            <RegisterBackgroundColorContext.Provider value={setBackgroundColor}>
              {children}
            </RegisterBackgroundColorContext.Provider>
          </View>
          <View style={styles.closeBtnContainer}>
            <Pressable style={styles.btn} onPress={() => setShowModal(false)}>
              <Text style={styles.btnTxt}>Close</Text>
            </Pressable>
          </View>
        </Animated.View>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  btnTxt: {
    color: '#707070',
    fontWeight: 'bold',
    fontFamily: 'Quicksand',
    textAlign: 'center',
  },
  btn: {
    alignSelf: 'center',
    width: '100%',
    maxWidth: 300,
    borderRadius: 20,
    paddingHorizontal: 40,
    paddingVertical: 10,
    backgroundColor: '#fff',

    ...Platform.select({
      web: { boxShadow: 'rgba(0, 0, 0, 0.3) 0px 0px 2px' },
      default: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,

        elevation: 2,
      },
    }),
  },
  closeBtnContainer: {
    marginVertical: 24,
    marginHorizontal: 16,
    alignItems: 'center',
  },
});
```

#### `Divider`

```tsx
import React from 'react';
import { View } from 'react-native';

export default function Divider() {
  return <View style={{ height: 1, backgroundColor: '#bebdbe' }} />;
}
```

#### `colorPickerStyle`

```ts
import { Platform, StyleSheet } from "react-native";

const shadow = Platform.select({
  web: { boxShadow: "rgba(0, 0, 0, 0.3) 0px 0px 2px" },
  default: {
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
});

export const colorPickerStyle = StyleSheet.create({
  title: {
    textAlign: "center",
    fontFamily: "Quicksand",
    fontWeight: "bold",
    marginVertical: 20,
    color: "gray",
  },
  picker: {
    gap: 20,
  },
  pickerContainer: {
    alignSelf: "center",
    width: 300,
    backgroundColor: "#eee",
    padding: 20,
    borderRadius: 20,
    ...shadow,
  },
  panelStyle: {
    borderRadius: 16,
    ...shadow,
  },
  sliderStyle: {
    borderRadius: 20,
    ...shadow,
  },
  sliderVerticalStyle: {
    borderRadius: 20,
    height: 300,
    ...shadow,
  },
  sliderTitle: {
    color: "#000",
    fontWeight: "bold",
    marginBottom: 5,
    paddingHorizontal: 4,
    fontFamily: "Quicksand",
  },
  previewStyle: {
    height: 40,
    borderRadius: 14,
  },
  previewTxt: {
    color: "#707070",
    fontFamily: "Quicksand",
  },
  inputStyle: {
    color: "#707070",
    paddingVertical: 2,
    borderColor: "#707070",
    fontSize: 12,
    marginLeft: 5,
  },
  swatchesContainer: {
    alignItems: "center",
    flexWrap: "nowrap",
    gap: 10,
  },
  swatchStyle: {
    borderRadius: 20,
    height: 30,
    width: 30,
    margin: 0,
    marginBottom: 0,
    marginHorizontal: 0,
    marginVertical: 0,
  },
});
```

### Panel1

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { colorKit, HueSlider, OpacitySlider, Panel1, PreviewText, Swatches } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={24}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        boundedThumb
      >
        <Panel1 style={colorPickerStyle.panelStyle} />
        <HueSlider style={colorPickerStyle.sliderStyle} />
        <OpacitySlider style={colorPickerStyle.sliderStyle} />

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hwba' />
      </ColorPicker>
    </View>
  );
}
```

### Panel2 — Saturation

```tsx
import React, { useState } from 'react';
import { KeyboardAvoidingView, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { BrightnessSlider, InputWidget, OpacitySlider, Panel2, colorKit } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// initial random color
const initialColor = colorKit.randomRgbColor().hex();

export default function Example() {
  const [resultColor, setResultColor] = useState(initialColor);

  const currentColor = useContainerBackgroundColor(initialColor);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <KeyboardAvoidingView behavior='position'>
      <View style={colorPickerStyle.pickerContainer}>
        <ColorPicker
          value={resultColor}
          sliderThickness={25}
          thumbSize={30}
          thumbShape='rect'
          onChange={onColorChange}
          onCompleteJS={onColorPick}
          style={colorPickerStyle.picker}
        >
          <Panel2 style={colorPickerStyle.panelStyle} thumbShape='ring' reverseVerticalChannel reverseHue />
          <BrightnessSlider style={colorPickerStyle.sliderStyle} />
          <OpacitySlider style={colorPickerStyle.sliderStyle} />
          <Divider />
          <InputWidget inputStyle={colorPickerStyle.inputStyle} iconColor='#707070' />
        </ColorPicker>
      </View>
    </KeyboardAvoidingView>
  );
}
```

### Panel2 — Brightness

```tsx
import React, { useState } from 'react';
import { KeyboardAvoidingView, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { colorKit, InputWidget, OpacitySlider, Panel2, SaturationSlider } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// initial random color
const initialColor = colorKit.randomRgbColor().hex();

export default function Example() {
  const [resultColor, setResultColor] = useState(initialColor);

  const currentColor = useContainerBackgroundColor(initialColor);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <KeyboardAvoidingView behavior='position'>
      <View style={colorPickerStyle.pickerContainer}>
        <ColorPicker
          value={resultColor}
          sliderThickness={26}
          thumbSize={13}
          thumbShape='doubleTriangle'
          onChange={onColorChange}
          onCompleteJS={onColorPick}
          style={colorPickerStyle.picker}
          adaptSpectrum
        >
          <Panel2 style={colorPickerStyle.panelStyle} verticalChannel='brightness' thumbShape='ring' thumbSize={30} />
          <SaturationSlider style={colorPickerStyle.sliderStyle} />
          <OpacitySlider style={colorPickerStyle.sliderStyle} />
          <Divider />
          <InputWidget inputStyle={colorPickerStyle.inputStyle} iconColor='#707070' />
        </ColorPicker>
      </View>
    </KeyboardAvoidingView>
  );
}
```

### Panel2 — HSL Saturation

```tsx
import React, { useState } from 'react';
import { KeyboardAvoidingView, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { InputWidget, LuminanceSlider, OpacitySlider, Panel2, colorKit } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// initial random color
const initialColor = colorKit.randomRgbColor().hex();

export default function Example() {
  const [resultColor, setResultColor] = useState(initialColor);

  const currentColor = useContainerBackgroundColor(initialColor);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <KeyboardAvoidingView behavior='position'>
      <View style={colorPickerStyle.pickerContainer}>
        <ColorPicker
          value={resultColor}
          sliderThickness={25}
          thumbSize={30}
          thumbShape='rect'
          onChange={onColorChange}
          onCompleteJS={onColorPick}
          style={colorPickerStyle.picker}
          adaptSpectrum
        >
          <Panel2 style={colorPickerStyle.panelStyle} thumbShape='ring' verticalChannel='hsl-saturation' />
          <LuminanceSlider style={colorPickerStyle.sliderStyle} />
          <OpacitySlider style={colorPickerStyle.sliderStyle} />
          <Divider />
          <InputWidget inputStyle={colorPickerStyle.inputStyle} iconColor='#707070' />
        </ColorPicker>
      </View>
    </KeyboardAvoidingView>
  );
}
```

### Panel3 — Saturation

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  BrightnessSlider,
  ExtraThumb,
  OpacitySlider,
  Panel3,
  Preview,
  Swatches,
  colorKit,
} from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={27}
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
      >
        <Preview style={colorPickerStyle.previewStyle} textStyle={colorPickerStyle.previewTxt} />
        <Divider />
        <Panel3 style={colorPickerStyle.panelStyle} renderCenterLine adaptSpectrum>
          <ExtraThumb thumbShape='circle' hueTransform={120} />
          <ExtraThumb thumbShape='circle' hueTransform={140} />
          <ExtraThumb thumbShape='circle' hueTransform={160} />
          <ExtraThumb thumbShape='circle' hueTransform={180} />
          <ExtraThumb thumbShape='circle' hueTransform={200} />
          <ExtraThumb thumbShape='circle' hueTransform={220} />
          <ExtraThumb thumbShape='circle' hueTransform={240} />
        </Panel3>
        <BrightnessSlider style={colorPickerStyle.sliderStyle} />
        <OpacitySlider style={colorPickerStyle.sliderStyle} />
        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
      </ColorPicker>
    </View>
  );
}
```

### Panel3 — Brightness

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { colorKit, OpacitySlider, Panel3, Preview, SaturationSlider, Swatches } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbShape='circle'
        thumbSize={25}
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
      >
        <Preview style={colorPickerStyle.previewStyle} textStyle={colorPickerStyle.previewTxt} />
        <Divider />
        <Panel3 style={colorPickerStyle.panelStyle} centerChannel='brightness' />
        <SaturationSlider style={colorPickerStyle.sliderStyle} />
        <OpacitySlider style={colorPickerStyle.sliderStyle} />
        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
      </ColorPicker>
    </View>
  );
}
```

### Panel3 — HSL Saturation

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { LuminanceSlider, OpacitySlider, Panel3, Preview, Swatches, colorKit } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbShape='circle'
        thumbSize={25}
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
      >
        <Preview style={colorPickerStyle.previewStyle} textStyle={colorPickerStyle.previewTxt} />
        <Divider />
        <Panel3 style={colorPickerStyle.panelStyle} centerChannel='hsl-saturation' />
        <LuminanceSlider style={colorPickerStyle.sliderStyle} />
        <OpacitySlider style={colorPickerStyle.sliderStyle} />
        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
      </ColorPicker>
    </View>
  );
}
```

### Panel4

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { colorKit, OpacitySlider, Panel4, PreviewText } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// initial random color, within the range that `Panel4` can display
const initialColor = colorKit.randomHsvColor({ s: [100, 100], v: [100, 100] }).hex();

export default function Example() {
  const [resultColor, setResultColor] = useState(initialColor);

  const currentColor = useContainerBackgroundColor(initialColor);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={24}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
      >
        <Panel4 style={colorPickerStyle.panelStyle} thumbShape='ring' />
        <OpacitySlider style={colorPickerStyle.sliderStyle} />
        <Divider />
        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hwba' />
      </ColorPicker>
    </View>
  );
}
```

### Panel5

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { OpacitySlider, Panel5, PreviewText } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// initial color; one of the grid colors
const initialColor = '#ad3e00';

export default function Example() {
  const [resultColor, setResultColor] = useState(initialColor);

  const currentColor = useContainerBackgroundColor(initialColor);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={24}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
      >
        <Panel5 style={[colorPickerStyle.panelStyle, { borderRadius: 4 }]} />
        <OpacitySlider style={colorPickerStyle.sliderStyle} adaptSpectrum />
        <Divider />
        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsla' />
      </ColorPicker>
    </View>
  );
}
```

### Circular Hue

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { colorKit, HueCircular, Panel1, PreviewText, Swatches } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={20}
        thumbSize={24}
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        boundedThumb
      >
        <HueCircular containerStyle={{ justifyContent: 'center' }} thumbShape='pill'>
          <Panel1 style={{ borderRadius: 16, width: '70%', height: '70%', alignSelf: 'center' }} />
        </HueCircular>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsl' />
      </ColorPicker>
    </View>
  );
}
```

### Circular Luminance

```tsx
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { LuminanceCircular, Panel3, PreviewText, Swatches, colorKit } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={24}
        thumbSize={24}
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <LuminanceCircular
          containerStyle={styles.hueContainer}
          thumbShape='circle'
          thumbInnerStyle={styles.thumbInner}
          thumbScaleAnimationValue={1}
        >
          <Panel3 style={styles.panelStyle} centerChannel='hsl-saturation' />
        </LuminanceCircular>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsl' />
      </ColorPicker>
    </View>
  );
}

const styles = StyleSheet.create({
  hueContainer: {
    justifyContent: 'center',
  },
  panelStyle: {
    width: '90%',
    height: '90%',
    alignSelf: 'center',
    borderRadius: 16,
  },
  thumbInner: {
    borderWidth: 4,
  },
});
```

### HSB — Horizontal

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  BrightnessSlider,
  colorKit,
  HueSlider,
  OpacitySlider,
  PreviewText,
  SaturationSlider,
  Swatches,
} from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={24}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <View>
          <Text style={colorPickerStyle.sliderTitle}>Hue</Text>
          <HueSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Saturation</Text>
          <SaturationSlider style={colorPickerStyle.sliderStyle} reverse />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Brightness</Text>
          <BrightnessSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Opacity</Text>
          <OpacitySlider style={colorPickerStyle.sliderStyle} />
        </View>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsva' />
      </ColorPicker>
    </View>
  );
}
```

### HSB — Vertical

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  BrightnessSlider,
  colorKit,
  HueSlider,
  OpacitySlider,
  PreviewText,
  SaturationSlider,
  Swatches,
} from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={30}
        thumbSize={30}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>H</Text>
            <HueSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>S</Text>
            <SaturationSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>B</Text>
            <BrightnessSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>A</Text>
            <OpacitySlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>
        </View>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsva' />
      </ColorPicker>
    </View>
  );
}
```

### HSL — Horizontal

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  HSLSaturationSlider,
  HueSlider,
  LuminanceSlider,
  OpacitySlider,
  PreviewText,
  Swatches,
  colorKit,
} from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={24}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <View>
          <Text style={colorPickerStyle.sliderTitle}>Hue</Text>
          <HueSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Saturation</Text>
          <HSLSaturationSlider style={colorPickerStyle.sliderStyle} reverse />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Luminance</Text>
          <LuminanceSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Opacity</Text>
          <OpacitySlider style={colorPickerStyle.sliderStyle} />
        </View>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsla' />
      </ColorPicker>
    </View>
  );
}
```

### HSL — Vertical

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  HSLSaturationSlider,
  HueSlider,
  LuminanceSlider,
  OpacitySlider,
  PreviewText,
  Swatches,
  colorKit,
} from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={30}
        thumbSize={30}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>H</Text>
            <HueSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>S</Text>
            <HSLSaturationSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>L</Text>
            <LuminanceSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>A</Text>
            <OpacitySlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>
        </View>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='hsla' />
      </ColorPicker>
    </View>
  );
}
```

### RGB — Horizontal

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  BlueSlider,
  colorKit,
  GreenSlider,
  OpacitySlider,
  PreviewText,
  RedSlider,
  Swatches,
} from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={25}
        thumbSize={24}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        thumbAnimationDuration={100}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <View>
          <Text style={colorPickerStyle.sliderTitle}>Red</Text>
          <RedSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Green</Text>
          <GreenSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Blue</Text>
          <BlueSlider style={colorPickerStyle.sliderStyle} />
        </View>

        <View>
          <Text style={colorPickerStyle.sliderTitle}>Opacity</Text>
          <OpacitySlider style={colorPickerStyle.sliderStyle} />
        </View>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='rgba' />
      </ColorPicker>
    </View>
  );
}
```

### RGB — Vertical

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, {
  BlueSlider,
  colorKit,
  GreenSlider,
  OpacitySlider,
  PreviewText,
  RedSlider,
  Swatches,
} from 'reanimated-color-picker';
import { useContainerBackgroundColor } from './components/BaseContainer';
import Divider from './components/Divider';
import { colorPickerStyle } from './components/colorPickerStyle';

// generate 6 random colors for swatches
const customSwatches = new Array(6).fill('#fff').map(() => colorKit.randomRgbColor().hex());

export default function Example() {
  const [resultColor, setResultColor] = useState(customSwatches[0]);

  const currentColor = useContainerBackgroundColor(customSwatches[0]);

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <View style={colorPickerStyle.pickerContainer}>
      <ColorPicker
        value={resultColor}
        sliderThickness={30}
        thumbSize={30}
        thumbShape='circle'
        onChange={onColorChange}
        onCompleteJS={onColorPick}
        thumbAnimationDuration={100}
        style={colorPickerStyle.picker}
        adaptSpectrum
        boundedThumb
      >
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>R</Text>
            <RedSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>G</Text>
            <GreenSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>B</Text>
            <BlueSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>

          <View style={{ alignItems: 'center' }}>
            <Text style={colorPickerStyle.sliderTitle}>A</Text>
            <OpacitySlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
          </View>
        </View>

        <Divider />
        <Swatches style={colorPickerStyle.swatchesContainer} swatchStyle={colorPickerStyle.swatchStyle} colors={customSwatches} />
        <Divider />

        <PreviewText style={colorPickerStyle.previewTxt} colorFormat='rgba' />
      </ColorPicker>
    </View>
  );
}
```

### Inside a Gesture Handler `ScrollView`

```tsx
import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { HSLSaturationSlider, HueSlider, LuminanceSlider, OpacitySlider } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import { colorPickerStyle } from './components/colorPickerStyle';

/*
 * Using react-native-gesture-handler ScrollView to prevent scrolling while using the color picker
 */
export default function Example() {
  const [resultColor, setResultColor] = useState('#f00');

  const currentColor = useContainerBackgroundColor('#f00');

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ScrollView contentContainerStyle={{ height: '150%', justifyContent: 'center' }}>
        <Text style={colorPickerStyle.title}>Color Picker in a RNGH ScrollView</Text>

        <View style={colorPickerStyle.pickerContainer}>
          <ColorPicker
            value={resultColor}
            sliderThickness={30}
            thumbSize={30}
            onChange={onColorChange}
            onCompleteJS={onColorPick}
            style={colorPickerStyle.picker}
            boundedThumb
          >
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <View style={{ alignItems: 'center' }}>
                <Text style={colorPickerStyle.sliderTitle}>H</Text>
                <HueSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
              </View>

              <View style={{ alignItems: 'center' }}>
                <Text style={colorPickerStyle.sliderTitle}>S</Text>
                <HSLSaturationSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
              </View>

              <View style={{ alignItems: 'center' }}>
                <Text style={colorPickerStyle.sliderTitle}>L</Text>
                <LuminanceSlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
              </View>

              <View style={{ alignItems: 'center' }}>
                <Text style={colorPickerStyle.sliderTitle}>A</Text>
                <OpacitySlider style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
              </View>
            </View>
          </ColorPicker>
        </View>
      </ScrollView>
    </GestureHandlerRootView>
  );
}
```

### Inside a Reanimated `ScrollView`

```tsx
import React, { useState } from 'react';
import { Platform, Text, View } from 'react-native';
import { Gesture } from 'react-native-gesture-handler';
import Animated, { useAnimatedProps, useSharedValue } from 'react-native-reanimated';

import type { ColorFormatsObject } from 'reanimated-color-picker';
import ColorPicker, { HSLSaturationSlider, HueSlider, LuminanceSlider, OpacitySlider } from 'reanimated-color-picker';

import { useContainerBackgroundColor } from './components/BaseContainer';
import { colorPickerStyle } from './components/colorPickerStyle';

/*
 * Using react-native-reanimated ScrollView and cancelling the scroll while using the color picker
 */
export default function Example() {
  const [resultColor, setResultColor] = useState('#f00');

  const currentColor = useContainerBackgroundColor('#f00');

  // runs on the ui thread on color change
  const onColorChange = (color: ColorFormatsObject) => {
    'worklet';
    currentColor.value = color.hex;
  };

  // runs on the js thread on color pick
  const onColorPick = (color: ColorFormatsObject) => {
    setResultColor(color.hex);
  };

  const isScrollEnabled = useSharedValue<boolean | undefined>(true);

  //? NOTE:
  // - You cannot use the same gesture for multiple color picker components.
  // - Either pass a new gesture or deep clone the gesture constructor.
  const [hueGesture, saturationGesture, lumGesture, opacityGesture] = Array.from({ length: 4 }, () =>
    Gesture.Pan()
      .onBegin(() => (isScrollEnabled.value = false))
      .onFinalize(() => (isScrollEnabled.value = true)),
  );

  const animatedProps = useAnimatedProps(
    () => ({ scrollEnabled: isScrollEnabled.value }),
    Platform.OS === 'web' ? [isScrollEnabled] : undefined,
  );

  return (
    <Animated.ScrollView animatedProps={animatedProps} contentContainerStyle={{ height: '150%', justifyContent: 'center' }}>
      <Text style={colorPickerStyle.title}>Color Picker in a Animated.ScrollView</Text>

      <View style={colorPickerStyle.pickerContainer}>
        <ColorPicker
          value={resultColor}
          sliderThickness={30}
          thumbSize={30}
          onChange={onColorChange}
          onCompleteJS={onColorPick}
          style={colorPickerStyle.picker}
          boundedThumb
        >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <View style={{ alignItems: 'center' }}>
              <Text style={colorPickerStyle.sliderTitle}>H</Text>
              <HueSlider gestures={[hueGesture]} style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
            </View>

            <View style={{ alignItems: 'center' }}>
              <Text style={colorPickerStyle.sliderTitle}>S</Text>
              <HSLSaturationSlider gestures={[saturationGesture]} style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
            </View>

            <View style={{ alignItems: 'center' }}>
              <Text style={colorPickerStyle.sliderTitle}>L</Text>
              <LuminanceSlider gestures={[lumGesture]} style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
            </View>

            <View style={{ alignItems: 'center' }}>
              <Text style={colorPickerStyle.sliderTitle}>A</Text>
              <OpacitySlider gestures={[opacityGesture]} style={colorPickerStyle.sliderVerticalStyle} vertical reverse />
            </View>
          </View>
        </ColorPicker>
      </View>
    </Animated.ScrollView>
  );
}
```

### Examples List

```tsx
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';

import CircularHue from './CircularHue';
import HorizontalHsbSliders from './HsbHorizontal';
import VerticalHsbSliders from './HsbVertical';
import HorizontalHslSliders from './HslHorizontal';
import VerticalHslSliders from './HslVertical';
import LuminanceCircular from './LuminanceCircular';
import Panel1Example from './Panel1';
import Panel2Brightness from './Panel2Brightness';
import Panel2HslSaturation from './Panel2HslSaturation';
import Panel2Saturation from './Panel2Saturation';
import WheelBrightness from './Panel3Brightness';
import WheelHSLSaturation from './Panel3HslSaturation';
import WheelSaturation from './Panel3Saturation';
import Panel4Example from './Panel4';
import Panel5Example from './Panel5';
import HorizontalRgbSliders from './RgbHorizontal';
import VerticalRgbSliders from './RgbVertical';
import WithReanimatedScrollView from './WithReanimatedScrollView';
import WithRnghScrollView from './WithRnghScrollView';
import BaseContainer from './components/BaseContainer';

export default function ExamplesList() {
  return (
    <View style={{ flex: 1, paddingTop: 46, paddingBottom: 24, backgroundColor: '#202124' }}>
      <ScrollView contentContainerStyle={styles.container} fadingEdgeLength={20}>
        <BaseContainer name='Panel1'>
          <Panel1Example />
        </BaseContainer>

        <BaseContainer name='Panel2 Saturation'>
          <Panel2Saturation />
        </BaseContainer>
        <BaseContainer name='Panel2 HSL Saturation'>
          <Panel2HslSaturation />
        </BaseContainer>
        <BaseContainer name='Panel2 Brightness'>
          <Panel2Brightness />
        </BaseContainer>

        <BaseContainer name='Panel3 Saturation'>
          <WheelSaturation />
        </BaseContainer>
        <BaseContainer name='Panel3 HSL Saturation'>
          <WheelHSLSaturation />
        </BaseContainer>
        <BaseContainer name='Panel3 Brightness'>
          <WheelBrightness />
        </BaseContainer>

        <BaseContainer name='Panel4'>
          <Panel4Example />
        </BaseContainer>

        <BaseContainer name='Panel5 Grid'>
          <Panel5Example />
        </BaseContainer>

        <BaseContainer name='Circular Hue'>
          <CircularHue />
        </BaseContainer>
        <BaseContainer name='Luminance Circular'>
          <LuminanceCircular />
        </BaseContainer>

        <BaseContainer name='HSB Horizontal'>
          <HorizontalHsbSliders />
        </BaseContainer>
        <BaseContainer name='HSB Vertical'>
          <VerticalHsbSliders />
        </BaseContainer>

        <BaseContainer name='HSL Horizontal'>
          <HorizontalHslSliders />
        </BaseContainer>
        <BaseContainer name='HSL Vertical'>
          <VerticalHslSliders />
        </BaseContainer>

        <BaseContainer name='RGB Horizontal'>
          <HorizontalRgbSliders />
        </BaseContainer>
        <BaseContainer name='RGB Vertical'>
          <VerticalRgbSliders />
        </BaseContainer>

        <BaseContainer name='With RNGH ScrollView'>
          <WithRnghScrollView />
        </BaseContainer>
        <BaseContainer name='With Reanimated ScrollView'>
          <WithReanimatedScrollView />
        </BaseContainer>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    justifyContent: 'space-evenly',
    paddingTop: 16,
    paddingBottom: 54,
    gap: 20,
  },
});
```

Source: https://alabsi91.github.io/reanimated-color-picker/examples-all/index.md

---

## Installation

### Prerequisites

Before installing, make sure you have the following packages set up:

- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation) `>= 2.0.0`.
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) `>= 2.0.0`.
- For Expo users: [Expo managed workflow](https://docs.expo.dev/get-started/installation/) `>= 44`.

### Install

Run the following command in your project root:

```bash
npm install reanimated-color-picker
```

Source: https://alabsi91.github.io/reanimated-color-picker/installation/index.md

---

## Usage

You can add, remove, rearrange, or style the built-in components of the color picker. See [Panel1](https://alabsi91.github.io/reanimated-color-picker/examples/panel1/) and the
examples beside it for working demos, or [Example Apps](https://alabsi91.github.io/reanimated-color-picker/examples/example-apps/) to run them yourself.

> [!tip] Using inside a `ScrollView`
>
> If you experience gesture conflicts when using the color picker inside a `ScrollView`, simply import the `ScrollView` from `react-native-gesture-handler` instead of from `react-native`.
>
> ```ts
> import { ScrollView } from "react-native-gesture-handler";
> ```

### Example

```jsx
// App.tsx
import React, { useState } from "react";
import { Button, Modal, StyleSheet, View } from "react-native";
import ColorPicker, { Panel1, Swatches, Preview, OpacitySlider, HueSlider } from "reanimated-color-picker";

export default function App() {
  const [showModal, setShowModal] = useState(false);

  // Note: use `onCompleteJS` and `onChangeJS` for non-worklet functions
  const onSelectColor = ({ hex }) => {
    "worklet";
    // do something with the selected color.
    console.log(hex);
  };

  return (
    <View style={styles.container}>
      <Button title="Color Picker" onPress={() => setShowModal(true)} />

      <Modal visible={showModal} animationType="slide">
        <ColorPicker style={{ width: "70%" }} value="red" onComplete={onSelectColor}>
          <Preview />
          <Panel1 />
          <HueSlider />
          <OpacitySlider />
          <Swatches />
        </ColorPicker>

        <Button title="Ok" onPress={() => setShowModal(false)} />
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});
```

Source: https://alabsi91.github.io/reanimated-color-picker/usage/index.md

---

## `<ColorPicker />`

The `ColorPicker` component is responsible for managing all built-in components.

> [!caution] All built-in components must be wrapped within the `ColorPicker` component.

You can nest components freely to achieve any layout:

```jsx
<ColorPicker>
  <Preview />

  <View>
    <Panel1 />
    <HueSlider vertical />
  </View>

  <View>
    <Text>Opacity</Text>
    <OpacitySlider />
  </View>

  <Swatches />
</ColorPicker>
```

### Props

#### `value`

The initial color displayed when the picker loads. If updated, the picker reflects the new color automatically.

Accepts `hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hsv`, `hsva`, `hwb`, `hwba`, and named colors.

`type: string` · `default: "#fff"`

---

#### `adaptSpectrum`

A global property that allows slider background color spectrums to adapt to changes in brightness and saturation across all descendant slider components.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

A global property for all descendant sliders and panels. Determines whether the thumb is constrained within the boundaries of the slider. When `false`, half of the thumb extends beyond the slider edges.

`type: boolean` · `default: false`

---

#### `sliderThickness`

A global property for the thickness of all descendant sliders. Refers to `width` for vertical sliders and `height` for horizontal ones.

`type: number` · `default: 25`

---

#### `thumbAnimationDuration`

A global property for the duration of the thumb animation when the `value` prop changes.

`type: number` · `default: 200`

---

#### `thumbSize`

A global property for the thumb size of all descendant slider components.

`type: number` · `default: 35`

---

#### `thumbColor`

A global property for the thumb color of all descendant slider components.

`type: string` · `default: undefined`

---

#### `thumbShape`

A global property for the thumb shape and appearance of all descendant slider components.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

A global property for the thumb's `View` style across all descendant slider components.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

A global property for the thumb's inner `View` style across all descendant slider components.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

A global property for the scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

A global property for the duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `style`

The container style of the `ColorPicker`.

`type: ViewStyle`[^style-override]

---

#### `enableColorAnnouncements`

Enables accessibility announcements when the color changes.

When enabled, color updates are announced using the format defined by [`colorAnnouncementFormat`](#colorannouncementformat).

`type: boolean` · `default: true`

---

#### `colorAnnouncementFormat`

Defines the format used when announcing color values for accessibility.

Accepts `hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hsv`, `hsva`, `hwb`, and `hwba`.

`type: keyof ColorFormatsObject` · `default: "rgb"`

---

### Events

#### `onChange`

Fires every time the user modifies the color. Accepts `worklet` functions only — use [`onChangeJS`](#onchangejs) for regular functions.

`type: (color: ColorFormatsObject) => void` · `default: undefined`

```ts
type ColorFormatsObject = {
  hex: string;
  rgb: string;
  rgba: string;
  hsl: string;
  hsla: string;
  hsv: string;
  hsva: string;
  hwb: string;
  hwba: string;
};
```

---

#### `onChangeJS`

Fires every time the user modifies the color. Accepts regular functions only — use [`onChange`](#onchange) for `worklet` functions.

> [!important]
> Avoid using `setState` inside `onChange` to prevent performance issues. Instead, use `useSharedValue` from `react-native-reanimated`.

`type: (color: ColorFormatsObject) => void` · `default: undefined`

```ts
type ColorFormatsObject = {
  hex: string;
  rgb: string;
  rgba: string;
  hsl: string;
  hsla: string;
  hsv: string;
  hsva: string;
  hwb: string;
  hwba: string;
};
```

---

#### `onComplete`

Fires when the user releases the slider handle or taps a swatch. Accepts `worklet` functions only — use [`onCompleteJS`](#oncompletejs) for regular functions.

`type: (color: ColorFormatsObject) => void` · `default: undefined`

```ts
type ColorFormatsObject = {
  hex: string;
  rgb: string;
  rgba: string;
  hsl: string;
  hsla: string;
  hsv: string;
  hsva: string;
  hwb: string;
  hwba: string;
};
```

---

#### `onCompleteJS`

Fires when the user releases the slider handle or taps a swatch. Accepts regular functions only — use [`onComplete`](#oncomplete) for `worklet` functions.

`type: (color: ColorFormatsObject) => void` · `default: undefined`

```ts
type ColorFormatsObject = {
  hex: string;
  rgb: string;
  rgba: string;
  hsl: string;
  hsla: string;
  hsv: string;
  hsva: string;
  hwb: string;
  hwba: string;
};
```

---

### Methods

#### `setColor`

Sets the displayed color without triggering `onChange` or `onComplete`. Useful for updating the picker color independently of the `value` prop.

`type: (color: SupportedColorFormats, duration?: number) => void`

```tsx
import ColorPicker from "reanimated-color-picker";

import type { ColorPickerRef } from "reanimated-color-picker";

function MyComponent() {
  const pickerRef = useRef<ColorPickerRef>(null);

  const setNewColorHandle = () => {
    if (pickerRef.current) {
      pickerRef.current.setColor("orange");
    }
  };

  return <ColorPicker ref={pickerRef}>{/* ... */}</ColorPicker>;
}
```

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/color-picker-wrapper/index.md

---

## `<Panel1 />`

![panel1](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel1.png)

An Adobe-style square panel for adjusting color brightness and saturation. Move the handle horizontally to change saturation, and vertically to change brightness.

> [!tip]
> Add a [`<HueSlider />`](https://alabsi91.github.io/reanimated-color-picker/components/sliders/hue/hue-slider/) to gain full control over all three color channels.

### Props

#### `boundedThumb`

Determines whether the thumb is constrained within the boundaries of the panel. When `false`, part of the thumb may extend beyond the panel edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The thumb's height and width.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The panel's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Panel's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Panel's hint for accessibility.

`type: string`

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/panels/panel1/index.md

---

## `<Panel2 />`

A Windows-style square panel for adjusting hue and either saturation or brightness. Move the thumb horizontally to change hue, and vertically to adjust the channel set by `verticalChannel`.

![verticalChannel: "saturation"](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel2-saturation.png)  
_`verticalChannel: "saturation"`_

![verticalChannel: "brightness"](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel2-brightness.png)  
_`verticalChannel: "brightness"`_

![verticalChannel: "hsl-saturation"](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel2-hsl-saturation.png)  
_`verticalChannel: "hsl-saturation"`_

> [!tip]
> For more control, add a slider next to `Panel2` that adjusts the opposite channel. For example, if `verticalChannel` is `"saturation"`, pair it with a [`<BrightnessSlider />`](https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsb/brightness-slider/), and vice versa.

### Props

#### `verticalChannel`

Determines which color channel is adjusted when moving the thumb vertically.

`type: "saturation" | "brightness" | "hsl-saturation"` · `default: "saturation"`

---

#### `boundedThumb`

Determines whether the thumb is constrained within the boundaries of the panel. When `false`, part of the thumb may extend beyond the panel edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The thumb's height and width.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes in saturation and brightness.

`type: boolean` · `default: false`

---

#### `reverseHue`

Reverses the hue direction.

`type: boolean` · `default: false`

---

#### `reverseVerticalChannel`

Reverses the direction of the vertical channel (saturation or brightness).

`type: boolean` · `default: false`

---

#### `style`

The panel's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Panel's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Panel's hint for accessibility.

`type: string`

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/panels/panel2/index.md

---

## `<Panel3 />`

A wheel-style circular panel for adjusting hue and either saturation or brightness. Move the thumb around the center to change hue, and toward or away from the center to adjust the channel set by `centerChannel`.

![centerChannel: "saturation"](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel3-saturation.png)  
_`centerChannel: "saturation"`_

![centerChannel: "brightness"](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel3-brightness.png)  
_`centerChannel: "brightness"`_

![centerChannel: "hsl-saturation"](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel3-hsl-saturation.png)  
_`centerChannel: "hsl-saturation"`_

> [!tip]
> For more control, add a slider next to `Panel3` that adjusts the opposite channel. For example, if `centerChannel` is `"saturation"`, pair it with a [`<BrightnessSlider />`](https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsb/brightness-slider/), and vice versa.

### Props

#### `centerChannel`

Determines which color channel is adjusted when moving the thumb toward or away from the center.

`type: "saturation" | "brightness" | "hsl-saturation"` · `default: "saturation"`

---

#### `rotate`

The degree of rotation applied to the hue circle.

`type: number` · `default: 0`

---

#### `renderCenterLine`

Controls whether a line is rendered from the center of the panel to the thumb.

`type: boolean` · `default: false`

---

#### `boundedThumb`

Determines whether the thumb is constrained within the boundaries of the panel. When `false`, part of the thumb may extend beyond the panel edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The thumb's height and width.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes in saturation and brightness.

`type: boolean` · `default: false`

---

#### `style`

The panel's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Panel's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Panel's hint for accessibility.

`type: string`

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/panels/panel3/index.md

---

## `<Panel4 />`

![panel4](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel4.png)

A square panel for adjusting hue, saturation, and brightness. Move the handle horizontally to change saturation and brightness, and vertically to change hue.

> [!danger] Be aware
> This panel has a limited color range and cannot display all colors. For example, if the input color has 50% saturation and 50% brightness, the thumb position won't be accurate. The color you select may not exactly match what is shown in the panel.

### Props

#### `boundedThumb`

Determines whether the thumb is constrained within the boundaries of the panel. When `false`, part of the thumb may extend beyond the panel edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The thumb's height and width.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `reverseHue`

Reverses the hue direction.

`type: boolean` · `default: false`

---

#### `reverseHorizontalChannels`

Reverses the direction of the horizontal channels (brightness and saturation).

`type: boolean` · `default: false`

---

#### `style`

The panel's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Panel's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Panel's hint for accessibility.

`type: string`

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/panels/panel4/index.md

---

## `<Panel5 />`

![panel5](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel5.png)

A grid of 120 colors arranged in 12 columns and 10 rows.

> [!danger] Be aware
> This panel is limited to a fixed range of colors and cannot display all colors.

### Props

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The panel's container style.

`type: ViewStyle`[^style-override]

---

#### `selectionStyle`

The style of the square that indicates the selected color.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Panel's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Panel's hint for accessibility.

`type: string`

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/panels/panel5/index.md

---

## `<ExtraThumb />`

![panel3-extraThumbs](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/panel3-extraThumbs.png)

Adds an extra thumb to the `Panel3` component. Used exclusively as a color indicator — it does not respond to gestures.

> [!note]
> This component only works inside `Panel3`.

### Usage

```jsx
<Panel3 style={styles.panelStyle} renderCenterLine adaptSpectrum>
  <ExtraThumb thumbShape="circle" hueTransform={120} />
  <ExtraThumb thumbShape="circle" hueTransform={140} />
  <ExtraThumb thumbShape="circle" hueTransform={160} />
  {/* using colorTransform to transform the hue channel */}
  <ExtraThumb
    thumbShape="circle"
    colorTransform={color => {
      "worklet";
      return colorKit.runOnUI().spin(color, 180).hsv().object();
    }}
  />
  <ExtraThumb thumbShape="circle" hueTransform={200} />
  <ExtraThumb thumbShape="circle" hueTransform={220} />
  <ExtraThumb thumbShape="circle" hueTransform={240} />
</Panel3>
```

### Props

#### `colorTransform`

A worklet function that transforms the color in HSV space. Receives an HSVA object and returns a new HSVA object that determines the thumb's position inside the panel.

`type: (color: HSVObject) => HSVObject`

---

#### `hueTransform`

An alternative to `colorTransform` for transforming the hue channel. Accepts negative values and percentage strings (e.g. `'50%'` or `50`).

`type: string | number`

---

#### `saturationTransform`

An alternative to `colorTransform` for transforming the saturation channel. Accepts negative values and percentage strings (e.g. `'50%'` or `50`).

`type: string | number`

---

#### `brightnessTransform`

An alternative to `colorTransform` for transforming the brightness channel. Accepts negative values and percentage strings (e.g. `'50%'` or `50`).

`type: string | number`

---

#### `onChange`

Fires every time the user modifies the color, providing the transformed color via a worklet callback. Accepts `worklet` functions only — use `onChangeJS` for regular functions. The color object exposes: `hex`, `rgb`, `rgba`, `hsv`, `hsva`, `hwb`, `hwba`, `hsl`, and `hsla`.

`type: (color: object) => void` · `default: undefined`

---

#### `onChangeJS`

Fires every time the user modifies the color, providing the transformed color via a regular callback. Accepts regular functions only — use `onChange` for `worklet` functions. The color object exposes: `hex`, `rgb`, `rgba`, `hsv`, `hsva`, `hwb`, `hwba`, `hsl`, and `hsla`.

`type: (color: object) => void` · `default: undefined`

> [!tip]
> Avoid using `setState` inside `onChange` to prevent performance issues. Instead, use `useSharedValue` from `react-native-reanimated`.

---

#### `thumbSize`

The thumb's height and width.

`type: number` · `default: inherit from Panel3`

---

#### `thumbColor`

The thumb's color.

`type: string` · `default: inherit from Panel3`

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: inherit from Panel3`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override] · `default: inherit from Panel3`

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override] · `default: inherit from Panel3`

---

#### `renderCenterLine`

Controls whether a line is rendered from the center of the panel to the thumb.

`type: boolean` · `default: inherit from Panel3`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/preview/extra-thumb/index.md

---

## `<InputWidget />`

![InputWidget](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/InputWidgets.png)

An input component for entering color values in RGB, HEX, HSL, HWB, and HSV formats. Includes a cycle button to switch between formats.

### Props

#### `defaultFormat`

The initial color format shown when the component loads.

`type: 'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'`

---

#### `formats`

The color formats included in the cycle and the order they appear.

`type: Array<'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'>`

---

#### `disableAlphaChannel`

Disables the alpha channel input, preventing users from setting the color's opacity.

`type: boolean` · `default: false`

---

#### `inputStyle`

The style of the text input fields.

`type: TextStyle`[^style-override]

---

#### `inputProps`

Additional props passed to the `TextInput` components.

`type: InputProps`

---

#### `inputTitleStyle`

The style of the title displayed below the input fields indicating the current color format.

`type: TextStyle`[^style-override]

---

#### `containerStyle`

The style of the container wrapping the input fields and cycle button.

`type: ViewStyle`[^style-override]

---

#### `iconColor`

The color of the cycle button icon.

`type: string`

---

#### `iconStyle`

The style of the cycle button icon.

`type: ImageStyle`[^style-override]

---

#### `cycleButtonAccessibilityLabel`

Accessibility label for the cycle button. Used by screen readers to identify the button.

`type: string`

---

#### `cycleButtonAccessibilityHint`

Accessibility hint for the cycle button. Describes what happens when the user activates it.

`type: string`

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/preview/input-widget/index.md

---

## `<Preview />`

![preview](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/preview.png)

A preview of the selected and initial color.

> [!tip]
> For a text-only preview, use the [`<PreviewText />`](https://alabsi91.github.io/reanimated-color-picker/components/preview/preview-text/) component instead.

### Props

#### `colorFormat`

The color format displayed in the preview.

`type: ColorFormat` · `default: "hex"`

```ts
type ColorFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "hsv" | "hsva" | "hwb" | "hwba";
```

---

#### `hideInitialColor`

Hides the initial color section of the preview.

`type: boolean` · `default: false`

---

#### `hideText`

Hides the preview text.

`type: boolean` · `default: false`

---

#### `disableOpacityTexture`

Hides the background texture that appears when the color has an opacity less than 1.

`type: boolean` · `default: false`

---

#### `style`

The preview container style.

`type: ViewStyle`[^style-override]

---

#### `textStyle`

The preview text style.

`type: TextStyle`[^style-override]

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/preview/preview/index.md

---

## `<PreviewText />`

A React Native `<Text>` component that displays the current color as text.

### Props

#### `colorFormat`

The color format displayed in the preview text.

`type: ColorFormat`

```ts
type ColorFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "hsv" | "hsva" | "hwb" | "hwba";
```

---

#### `style`

The preview text style.

`type: TextStyle`[^style-override]

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/preview/preview-text/index.md

---

## `<Swatches />`

![swatches](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/swatches.png)

A list of color swatches for quick color selection.

### Props

#### `colors`

The swatch colors. Defaults to Material Design colors.

`type: string[]` · `default: material colors`

---

#### `style`

The swatches container style.

`type: ViewStyle`[^style-override]

---

#### `swatchStyle`

The individual swatch style.

`type: ViewStyle`[^style-override]

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/preview/swatches/index.md

---

## `<OpacitySlider />`

![opacity](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/opacity.png)

A slider for adjusting the color's opacity.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/opacity-slider/index.md

---

## `<BrightnessSlider />`

![brightness](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/brightness.png)

A slider for adjusting the color's brightness channel in the HSV color space.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsb/brightness-slider/index.md

---

## `<SaturationSlider />`

![saturation](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/saturation.png)

A slider for adjusting the color's saturation channel in the HSV color space.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsb/saturation-slider/index.md

---

## `<LuminanceCircular />`

![LuminanceCircular](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/LuminanceCircular.png)

A circular slider for adjusting the color's luminance channel in the HSL color space.

### Props

#### `rotate`

The degree of rotation applied to the luminance circle.

`type: number` · `default: 0`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `sliderThickness`

The slider's thickness.

`type: number` · `default: 25`

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes in saturation and brightness.

`type: boolean` · `default: false`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `containerStyle`

The style of the container that wraps the given children.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsl/luminance-circular-slider/index.md

---

## `<LuminanceSlider />`

![luminance](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/luminance.png)

A slider for adjusting the color's luminance channel in the HSL color space.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsl/luminance-slider/index.md

---

## `<HSLSaturationSlider />`

![hsl_saturation](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/hsl_saturation.png)

A slider for adjusting the color's saturation channel in the HSL color space.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hsl/saturation-slider/index.md

---

## `<HueCircular />`

![HueCircular](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/HueCircular.png)

A circular slider for adjusting the color's hue.

### Props

#### `rotate`

The degree of rotation applied to the hue circle.

`type: number` · `default: 0`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `sliderThickness`

The slider's thickness.

`type: number` · `default: 25`

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes in saturation and brightness.

`type: boolean` · `default: false`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `containerStyle`

The style of the container that wraps the given children.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hue/hue-circular-slider/index.md

---

## `<HueSlider />`

![hue](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/hue.png)

A slider for adjusting the color's hue.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/hue/hue-slider/index.md

---

## `<BlueSlider />`

![blue](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/blue.png)

A slider for adjusting the color's blue channel.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/rgb/blue-slider/index.md

---

## `<GreenSlider />`

![green](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/green.png)

A slider for adjusting the color's green channel.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/rgb/green-slider/index.md

---

## `<RedSlider />`

![red](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/red.png)

A slider for adjusting the color's red channel.

### Props

#### `sliderThickness`

The slider's thickness — `width` in `vertical` mode, `height` in `horizontal` mode.

`type: number` · `default: 25`

---

#### `adaptSpectrum`

The slider background color spectrum adapts to changes.

`type: boolean` · `default: false`

---

#### `boundedThumb`

![boundedThumb](https://alabsi91.github.io/reanimated-color-picker/sources/assets/images/boundedThumb.png)

Determines whether the thumb is constrained within the boundaries of the slider. When `false`, part of the thumb may extend beyond the slider edges.

`type: boolean` · `default: false`

---

#### `thumbSize`

The size of the slider's thumb.

`type: number` · `default: 35`

---

#### `thumbColor`

The thumb's color. Defaults to an adaptive color based on contrast ratio.

`type: string` · `default: interactive`[^interactive]

---

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: "ring"`

```ts
type ThumbShapeType =
  | "ring"
  | "solid"
  | "hollow"
  | "line"
  | "plus"
  | "pill"
  | "triangleUp"
  | "triangleDown"
  | "doubleTriangle"
  | "rect"
  | "circle";
```

---

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override]

---

#### `thumbScaleAnimationValue`

The scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

#### `thumbScaleAnimationDuration`

The duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

#### `renderThumb`

A function that receives `RenderThumbProps` and returns a custom thumb component. Overrides `thumbShape`.

`type: (props: RenderThumbProps) => ReactElement`

```ts
interface RenderThumbProps {
  /** Positions the thumb. Must be applied to a Reanimated component. */
  positionStyle: StyleProp<AnimatedStyle<ViewStyle>>;

  /** The thumb's width in pixels, taken from `thumbSize`. */
  width: number;

  /** The thumb's height in pixels, taken from `thumbSize`. */
  height: number;

  /** `"white"` or `"black"`, whichever contrasts with the current color. */
  adaptiveColor: SharedValue<string>;

  /** The current color without the alpha channel. Updates whenever the color changes. */
  currentColor: SharedValue<string>;

  /** The initial color passed to the color picker. */
  initialColor: string;
}
```

##### Example

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

---

#### `reverse`

Reverses the slider direction.

`type: boolean` · `default: false`

---

#### `vertical`

Changes the slider orientation to vertical.

`type: boolean` · `default: false`

---

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

`type: Gesture[]` · `default: []`

---

#### `style`

The slider's container style.

`type: ViewStyle`[^style-override]

---

#### `accessibilityLabel`

Slider's label for accessibility.

`type: string`

---

#### `accessibilityHint`

Slider's hint for accessibility.

`type: string`

[^interactive]: The thumb color adjusts automatically based on contrast ratio when no value is provided.

[^style-override]: Certain style properties will be overridden.

Source: https://alabsi91.github.io/reanimated-color-picker/components/sliders/rgb/red-slider/index.md