Panel1

The classic Adobe-style layout: a square panel for saturation and brightness, with hue and opacity on their own sliders. Drag the panel handle horizontally to change saturation and vertically to change brightness, or pick one of the swatches below to jump straight to a color.

Code

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>
  );
}

The colorPickerStyle object is shared by every example. Divider is a 1px line, and useContainerBackgroundColor only tints the modal of the example app.

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,
  },
});