react-native-reanimated-color-picker

Natively animated HSV color picker for iOS & Android

Usage no npm install needed!

<script type="module">
  import reactNativeReanimatedColorPicker from 'https://cdn.skypack.dev/react-native-reanimated-color-picker';
</script>

README

react-native-reanimated-color-picker

npm version CircleCI js-standard-style Dependency Status devDependencies Status typings included npm

Natively animated HSV color picker for iOS & Android

Installation

Demo

Example

import * as React from 'react'
import { HueSaturationValuePicker } from 'react-native-reanimated-color-picker'

const wheelStyle = { width: '100%' }
const sliderStyle = { height: 50, width: '100%' }

const colorChanged = ({ h, s, v }) => {
  console.warn(h, s, v)
}

const picker = (
  <HueSaturationValuePicker
    wheelStyle={wheelStyle}
    sliderStyle={sliderStyle}
    onColorChangeComplete={colorChanged}
  />
)

Description

There are three components:

  • HueSaturationWheel - a wheel for selecting hue and saturation with constant value = 1
  • ValueSlider - a slider for selecting value
  • HueSaturationValuePicker - a composition of two first components

The library doesn't provide any color conversion functions, so you have to use a third-party module for color conversion

Reference

HueSaturationWheel props

prop type default desc
style ViewStyle - required
snapToCenter number - Thumb will snap to center of the wheel when the distance is less than snapToCenter
onColorChangeComplete 
(color: {
  h: number,
  s: number,
  v: number
}) => void
 - Called when touch ended
onColorChange 
(color: {
  h: number,
  s: number,
  v: number
}) => void
 - Called when touch moved
value Animated.Node<number> new Animated.Value(1) value node from ValueSlider
valueGestureState Animated.Node<number> new Animated.Value(State.END) ValueSlider gesture state
thumbRadius number 50
initialHue number 0 hue in degrees
initialSaturation number 0 [0..1]

ValueSlider props

prop type default desc
style ViewStyle - required
thumbWidth number 50
initialValue number 1 [0..1]
onValueInit 
(value: Animated.Node<number>,
 gestureState: Animated.Node<number>) => void
 - used to wire ValudeSlider with HueSaturationWheel

HueSaturationValuePicker props

prop type default desc
wheelStyle ViewStyle - required
sliderStyle ViewStyle - required
snapToCenter number - Thumb will snap to center of the wheel when the distance is less than snapToCenter
onColorChangeComplete 
(color: {
  h: number,
  s: number,
  v: number
}) => void
 - Called when touch ended
onColorChange 
(color: {
  h: number,
  s: number,
  v: number
}) => void
 - Called when touch moved
thumbSize number 50 thumbRadius and thumbWidth
initialHue number 0 hue in degrees
initialSaturation number 0 [0..1]
initialValue number 1 [0..1]

Credits

  • colorHSV function was taken from react-native-reanimated example by @kmagiera