react-native-hsv-picker

react-native-hsv-picker

a react native HSV(hue, saturation, value) color picker

Originally authored by Yuan Fu react-native-hsv-color-picker Forked and converted to TypeScript : 04/2021

Preview

View Live Demo

react-native-hsv-picker is a React Native component for selection of an HSV (hue, saturation, value) color value.

Highlighted Features:

1. Real Rendering - no image involved / all colors are truly rendered
2. Performance - empowered by native gradient lib
3. Fully Controlled - no inner state involved
4. Fully Supported - support both React Native & Expo projects

Install

$ npm install react-native-hsv-picker --save

Use with Expo Project

You are all set.

Use with React Native Project

react-native-hsv-picker is powered by expo-linear-gradient. If you're not using a Managed Expo project, you have to follow these instructions to properly install it.

Usage

a minimally-configured HSV color picker

import React from 'react';
import { StyleSheet, View } from 'react-native';
import HsvColorPicker from 'react-native-hsv-picker';

type ExampleProps = {}; 
type ExampleState = {hue: number, sat: number, val: number };
export default class Example extends React.Component<ExampleProps, ExampleState> {
  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 }: { saturation: number, value: number }) {
    this.setState({
      sat: saturation,
      val: value,
    });
  }

  onHuePickerChange({ hue }: { hue: number }) {
    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',
  },
});

Props

Basic Props

Prop	Type	Default	Description
containerStyle	StyleProp	{}	style for the outmost container
huePickerContainerStyle	StyleProp	{}	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	StyleProp	{}	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 purposes.

react-native - 0.63
react - 16.13

License

MIT