react-native-reanimated-color-picker

Natively animated HSV color picker for iOS & Android

Installation

• Install peer dependencies: react-native-image-filter-kit, react-native-reanimated, react-native-gesture-handler

• $ npm install react-native-reanimated-color-picker --save

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