Skip to content
Reanimated Color Picker

<Panel1 />

panel1

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 /> 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: interactive1

thumbShape

The thumb’s shape and appearance.

type: ThumbShapeType · default: "ring"

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

thumbStyle

The thumb’s containing View style.

type: ViewStyle2

thumbInnerStyle

The thumb’s inner View style.

type: ViewStyle2

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

Function that receives ThumbProps and returns a custom thumb component. Overrides thumbShape.

type: (props: ThumbProps) => ReactElement

ThumbProps

positionStyle StyleProp
Determines the position of the thumb — must be included in the component’s style.

width number
Extracted from thumbSize, used for thumb position calculation.

height number
Extracted from thumbSize, used for thumb position calculation.

adaptiveColor SharedValue<string>
White or black based on the contrast ratio of the current color.

currentColor SharedValue<string>
Updates whenever the color changes.

initialColor string
The initial color value.

Example

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: ViewStyle2

accessibilityLabel

Panel’s label for accessibility.

type: string

accessibilityHint

Panel’s hint for accessibility.

type: string

Footnotes

  1. The thumb color adjusts automatically based on contrast ratio when no value is provided. ↩

  2. Certain style properties will be overridden. ↩ ↩2 ↩3