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

<th>prop</th>
<th>type</th>
<th>default</th>
<th>desc</th>

<td>style</td>
<td><code>ViewStyle</code></td>
<td>-</td>
<td><strong>required</strong></td>

<td>snapToCenter</td>
<td><code>number</code></td>
<td>-</td>
<td>Thumb will snap to center of the wheel when the distance is less than <code>snapToCenter</code></td>

<td>onColorChangeComplete</td>
<td><pre>(color: {

h: number, s: number, v: number }) => void

<td>-</td>
<td>Called when touch ended</td>

<td>onColorChange</td>
<td><pre>(color: {

h: number, s: number, v: number }) => void

<td>-</td>
<td>Called when touch moved</td>

<td>value</td>
<td><code>Animated.Node<number></code></td>
<td><code>new Animated.Value(1)</code></td>
<td>value node from ValueSlider</td>

<td>valueGestureState</td>
<td><code>Animated.Node<number></code></td>
<td><code>new Animated.Value(State.END)</code></td>
<td>ValueSlider gesture state</td>

<td>thumbRadius</td>
<td><code>number</code></td>
<td><code>50</code></td>
<td></td>

<td>initialHue</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>hue in degrees</td>

<td>initialSaturation</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>[0..1]</td>

ValueSlider props

<th>prop</th>
<th>type</th>
<th>default</th>
<th>desc</th>

<td>style</td>
<td><code>ViewStyle</code></td>
<td>-</td>
<td><strong>required</strong></td>

<td>thumbWidth</td>
<td><code>number</code></td>
<td><code>50</code></td>
<td></td>

<td>initialValue</td>
<td><code>number</code></td>
<td><code>1</code></td>
<td>[0..1]</td>

<td>onValueInit</td>
<td><pre>(value: Animated.Node<number>,

gestureState: Animated.Node<number>) => void

<td>-</td>
<td>used to wire ValudeSlider with HueSaturationWheel</td>

HueSaturationValuePicker props

<th>prop</th>
<th>type</th>
<th>default</th>
<th>desc</th>

<td>wheelStyle</td>
<td><code>ViewStyle</code></td>
<td>-</td>
<td><strong>required</strong></td>

<td>sliderStyle</td>
<td><code>ViewStyle</code></td>
<td>-</td>
<td><strong>required</strong></td>

<td>snapToCenter</td>
<td><code>number</code></td>
<td>-</td>
<td>Thumb will snap to center of the wheel when the distance is less than <code>snapToCenter</code></td>

<td>onColorChangeComplete</td>
<td><pre>(color: {

h: number, s: number, v: number }) => void

<td>-</td>
<td>Called when touch ended</td>

<td>onColorChange</td>
<td><pre>(color: {

h: number, s: number, v: number }) => void

<td>-</td>
<td>Called when touch moved</td>

<td>thumbSize</td>
<td><code>number</code></td>
<td><code>50</code></td>
<td>thumbRadius and thumbWidth</td>

<td>initialHue</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>hue in degrees</td>

<td>initialSaturation</td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>[0..1]</td>

<td>initialValue</td>
<td><code>number</code></td>
<td><code>1</code></td>
<td>[0..1]</td>

Credits

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