Package Exports

react-native-reanimated-color-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-reanimated-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`	`0`	[0..1]

Credits

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