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

(color: {
  h: number,
  s: number,
  v: number
}) => void

(color: {
  h: number,
  s: number,
  v: number
}) => void

ValueSlider props

(value: Animated.Node<number>,
 gestureState: Animated.Node<number>) => void

HueSaturationValuePicker props

(color: {
  h: number,
  s: number,
  v: number
}) => void

(color: {
  h: number,
  s: number,
  v: number
}) => void

Credits

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