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

ValueSlider props

HueSaturationValuePicker props

Credits

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