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