# react-native-reanimated-color-picker [![npm version](https://badge.fury.io/js/react-native-reanimated-color-picker.svg?t=1495378566925)](https://badge.fury.io/js/react-native-reanimated-color-picker) [![CircleCI](https://circleci.com/gh/iyegoroff/react-native-reanimated-color-picker.svg?style=svg)](https://circleci.com/gh/iyegoroff/react-native-reanimated-color-picker) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/standard/standard) [![Dependency Status](https://david-dm.org/iyegoroff/react-native-reanimated-color-picker.svg?t=1495378566925)](https://david-dm.org/iyegoroff/react-native-reanimated-color-picker) [![devDependencies Status](https://david-dm.org/iyegoroff/react-native-reanimated-color-picker/dev-status.svg)](https://david-dm.org/iyegoroff/react-native-reanimated-color-picker?type=dev) [![typings included](https://img.shields.io/badge/typings-included-brightgreen.svg?t=1495378566925)](package.json) [![npm](https://img.shields.io/npm/l/express.svg?t=1495378566925)](https://www.npmjs.com/package/react-native-reanimated-color-picker) Natively animated HSV color picker for iOS & Android ## Installation - Install peer dependencies: [react-native-image-filter-kit](https://github.com/iyegoroff/react-native-image-filter-kit#react-native-image-filter-kit), [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated#getting-started), [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#installation) - `$ npm install react-native-reanimated-color-picker --save` ## Demo

## Example ```jsx 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 = ( ) ``` ## 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](https://github.com/kmagiera/react-native-reanimated/blob/master/Example/colors/index.js) by @kmagiera

	Stars	Issues	Version	Updated	Created
react-native-color-palette	53	12	2.2.0	4 years ago	6 years ago
react-native-reanimated-color-picker	28	10	0.0.11	3 years ago	5 years ago
react-native-wheel-color-picker	90	3	1.3.1	4 months ago	4 years ago

react-native-color-palette vs react-native-reanimated-color-picker vs react-native-wheel-color-picker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past