Skip to main content

<HueSlider />

hue

  • A slider to change the color's hue.​

Props​

adaptSpectrum​

  • Slider background color spectrum adapts to changes in saturation and brightness.
  • type: boolean
  • default: false

boundedThumb​

boundedThumb

  • Determines whether the slider thumb (or handle) should be constrained to stay within the boundaries of the slider.
  • When set to true, the thumb will not be allowed to move beyond the edges of the slider.
  • When set to false, part of it will be outside of the slider bounds.
  • type: boolean
  • default: false

thumbSize​

  • The size of the slider's thumb.
  • type: number
  • default: 35

thumbColor​

  • The color of the slider's thumb.
  • type: string
  • default: interactive*
*interactive
  • The color of the thumb will be adjusted according to the contrast ratio, in the absence of a specific color value.

sliderThickness​

  • The thickness is the width of the slider in vertical mode or the height in horizontal mode.
  • type: number
  • default: 25

thumbShape​

  • The shape and appearance of the slider's thumb.
  • type: string
  • default: 'ring'
  • values:'ring' | 'solid' | 'hollow' | 'line' | 'plus' | 'pill' | 'triangleUp' | 'triangleDown' | 'doubleTriangle' | 'rect' | 'circle'

thumbStyle​

  • Thumb's containing View's style.
  • type: ViewStyle

thumbInnerStyle​

  • Thumb's inner View(s) style.
  • type: ViewStyle

thumbScaleAnimationValue​

  • Controls the scale value animation of the thumb when active.
  • type: number
  • default: 1.2

thumbScaleAnimationDuration​

  • Sets the duration of the scale animation of the thumb when active.
  • type: number
  • default: 100

renderThumb​

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

ThumbProps​

Prop Type Description
positionStyle StyleProp This style determines the position of the thumb and is a crucial element that should be included.
width number Extracted from the thumbSize prop and it's important for thumb position calculation.
height number Extracted from the thumbSize prop and it's important for thumb position calculation.
adaptiveColor SharedValue<string> White or black based on the contrast ratio.
currentColor SharedValue<string> This shared value will update whenever the color changes.
initialColor string The initial color value as a string.
  • Example Usage:
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​

  • Reverse the slider direction.
  • type: boolean
  • default: false

vertical​

  • Change the slider orientation.
  • type: boolean
  • default: false

gestures​

  • An array of gestures or composed gestures from react-native-gesture-handler.
  • These gestures will run simultaneously with the color picker gestures.
  • type: Gesture[]
  • default: []

style​

  • The style of the slider's container.
  • type: ViewStyle
note
  • Certain style properties will be overridden.