react-native-hsv-color-picker

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

Preview

View Live Demo

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
3. Fully Controlled - no inner state involved
4. Fully Supported - support both React Native & Expo projects

Install

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

Use with Expo Project

You are all set.

Use with React Native Project

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

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',
  },
});

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

   $ 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 simulator

3. Run on device

   • require the installation of corresponding iOS client or android client on the device
   • scan the QR code from Terminal using the device

4. More on Expo Guide

Related

• scaffolded by react-native-component-cli

License

MIT