a react native HSV(hue, saturation, value) color picker
react-native-hsv-color-picker
is a fork of hsv-color-picker that doesn't require expo dependencies. If you are working with an expo managed workflow, feel free to use that library instead.
Highlighted Features:
- Real Rendering - no image involved / all colors are truly rendered
- Performance - empowered by native gradient lib
- Fully Controlled - no inner state involved
- Fully Supported - support both React Native & Expo projects
- No Expo required - removed dependencies that required installation of expo-unimodules
$ npm install react-native-hsv-color-picker
or
$ yarn add react-native-hsv-color-picker
a minimally-configured HSV color picker
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 (
<View style={styles.container}>
<HsvColorPicker
huePickerHue={hue}
onHuePickerDragMove={this.onHuePickerChange}
onHuePickerPress={this.onHuePickerChange}
satValPickerHue={hue}
satValPickerSaturation={sat}
satValPickerValue={val}
onSatValPickerDragMove={this.onSatValPickerChange}
onSatValPickerPress={this.onSatValPickerChange}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
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 |
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 |
Use
ref
to call instance methods
Method | Params | Return Type | Description |
---|---|---|---|
getCurrentColor |
- | string |
get current picked color in hex format |
The
demo
folder contains a standalone Expo project, which can be used for dev purpose.
react-native - 0.61
react - 16.9
-
Start Expo
$ npm install $ npm start
-
Run on
simulator
- type the following command in the
Terminal
after the project is booted up a
forandroid
simulatori
foriOS
simulator
- type the following command in the
-
Run on
device
- require the installation of corresponding
iOS client
orandroid client
on the device - scan the QR code from
Terminal
using the device
- require the installation of corresponding
-
More on
Expo Guide
- scaffolded by react-native-component-cli
MIT