a react native HSV(hue, saturation, value) color picker
npm install react-native-hsv-color-picker!npm  !GitHub issues !NPM  

react-native-hsv-color-picker is a React Native component for building an HSV (hue, saturation, value) color picker.
Highlighted Features:
1. Real Rendering - no image involved / all colors are truly rendered
2. Performance - empowered by native gradient lib
4. Fully Controlled - no inner state involved
3. Fully Supported - support both React Native & Expo projects
bash
$ npm install react-native-hsv-color-picker --save
`$3
> You are all set.$3
> react-native-hsv-color-picker is powered by the lib expo-linear-gradient. Besides above command, you have to follow this Instruction to add relevant dependencies to your project.Usage
> a minimally-configured HSV color picker
`js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import HsvColorPicker from 'react-native-hsv-color-picker';export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
hue: 0,
sat: 0,
val: 1,
};
this.onSatValPickerChange = this.onSatValPickerChange.bind(this);
this.onHuePickerChange = this.onHuePickerChange.bind(this);
}
onSatValPickerChange({ saturation, value }) {
this.setState({
sat: saturation,
val: value,
});
}
onHuePickerChange({ hue }) {
this.setState({
hue,
});
}
render() {
const { hue, sat, val } = this.state;
return (
huePickerHue={hue}
onHuePickerDragMove={this.onHuePickerChange}
onHuePickerPress={this.onHuePickerChange}
satValPickerHue={hue}
satValPickerSaturation={sat}
satValPickerValue={val}
onSatValPickerDragMove={this.onSatValPickerChange}
onSatValPickerPress={this.onSatValPickerChange}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
`
Props
#### Basic Props
| Prop | Type | Default | Description |
|--|--|--| -- |
| containerStyle | ViewPropTypes.style | {} | style for the outmost container |
| huePickerContainerStyle | ViewPropTypes.style | {} | style for the hue picker container |
| huePickerBorderRadius | number | 0 | border radius for the hue picker |
| huePickerHue | number | 0 | hue value(h in hsv, ranged in [0, 360]) for the hue picker |
| huePickerBarWidth | number | 12 | bar width for the hue picker |
| huePickerBarHeight | number | 200 | bar height for the hue picker |
| huePickerSliderSize | number | 24 | slider diameter for the hue picker |
| satValPickerContainerStyle | ViewPropTypes.style | {} | style for the saturation & value picker container |
| satValPickerBorderRadius | number | 0 | border radius for the saturation & value picker |
| satValPickerSize | number | 200 | width / height for the saturation & value picker |
| satValPickerSliderSize | number | 24 | slider diameter for the saturation & value picker |
| satValPickerHue | number | 0 | hue value(h in hsv, ranged in [0, 360]) for the saturation & value picker |
| satValPickerSaturation | number | 1 | saturation value(s in hsv, ranged in [0, 1]) for the saturation & value picker |
| satValPickerValue | number | 1 | value(v in hsv, ranged in [0, 1]) for the saturation & value picker |#### Callback Props
| Prop | Callback Params | Description |
|--|--| -- |
|
onHuePickerDragStart | {
hue: number,
gestureState: gestureState
} | called when hue picker starts to drag |
| onHuePickerDragMove | {
hue: number,
gestureState: gestureState
} | called when hue picker is dragging |
| onHuePickerDragEnd | {
hue: number,
gestureState: gestureState
} | called when hue picker stops dragging |
| onHuePickerDragTerminate | {
hue: number,
gestureState: gestureState
} | called when another component has become the responder |
| onHuePickerPress | {
hue: number,
nativeEvent: nativeEvent
} | called when hue picker is pressed |
| onSatValPickerDragStart | {
saturation: number,
value: number,
gestureState: gestureState
} | called when saturation & value picker starts to drag |
| onSatValPickerDragMove | {
saturation: number,
value: number,
gestureState: gestureState
} | called when saturation & value picker is dragging |
| onSatValPickerDragEnd | {
saturation: number,
value: number,
gestureState: gestureState
} | called when saturation & value picker stops dragging |
| onSatValPickerDragTerminate | {
saturation: number,
value: number,
gestureState: gestureState
} | called when another component has become the responder |
| onSatValPickerPress | {
saturation: number,
value: number,
nativeEvent: nativeEvent
} | called when saturation & value picker is pressed |Methods
#### Instance Methods
> Use ref to call instance methods| Method | Params | Return Type| Description |
|--|:--:|:--:| -- |
|
getCurrentColor | - | string | get current picked color in hex format |Dev
> The demo folder contains a standalone Expo project, which can be used for dev purpose.> react-native - 0.61
> react - 16.9
1. Start Expo
`bash
$ npm install $ npm start
`2. Run on
simulator
- type the following command in the Terminal after the project is booted up
- a for android simulator
- i for iOS simulator3. Run on
device
- require the installation of corresponding iOS client or android client on the device
- scan the QR code from Terminal using the deviceExpo Guide`