├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── README.md
├── babel.config.js
├── demo
    ├── App.js
    ├── AppEntry.js
    ├── app.json
    └── metro.config.js
├── package-lock.json
├── package.json
├── setup-tests.js
├── src
    ├── HsvColorPicker.js
    ├── HuePicker.js
    ├── SaturationValuePicker.js
    ├── index.js
    └── utils.js
└── test
    ├── __snapshots__
        └── index.test.js.snap
    └── index.test.js


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = {
 4 |     parser: 'babel-eslint',
 5 |     extends: 'airbnb',
 6 |     plugins: [
 7 |       'react',
 8 |       'react-native'
 9 |     ],
10 |     env: {
11 |       'jest': true,
12 |       'react-native/react-native': true
13 |     },
14 |     rules: {
15 |       // allow js file extension
16 |       'react/jsx-filename-extension': [
17 |         'error',
18 |         {
19 |             extensions: ['.js', '.jsx']
20 |         }
21 |       ],
22 |       // for post defining style object in react-native
23 |       'no-use-before-define': ['error', { variables: false }],
24 |       // react-native rules
25 |       'react-native/no-unused-styles': 2,
26 |       'react-native/split-platform-components': 2,
27 |       'react-native/no-inline-styles': 2,
28 |       'react-native/no-raw-text': 2,
29 |       // allow devDependencies
30 |       'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # npm
 2 | npm-debug.*
 3 | yarn-error.log
 4 | node_modules
 5 | 
 6 | # mac
 7 | .DS_Store
 8 | 
 9 | # windows
10 | Thumbs.db
11 | 
12 | # webstorm
13 | .idea/
14 | 
15 | # jest
16 | coverage/
17 | 
18 | # expo
19 | .expo/*
20 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |     - "node"
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # react-native-hsv-color-picker
  3 | > a react native HSV(hue, saturation, value) color picker
  4 | 
  5 | ![npm](https://img.shields.io/npm/v/react-native-hsv-color-picker.svg?style=flat-square) ![](https://img.shields.io/travis/yuanfux/react-native-hsv-color-picker/master.svg?style=flat-square) ![GitHub issues](https://img.shields.io/github/issues/yuanfux/react-native-hsv-color-picker.svg?style=flat-square) ![NPM](https://img.shields.io/npm/l/react-native-hsv-color-picker.svg?style=flat-square) ![](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square) ![](https://img.shields.io/maintenance/yes/2021.svg?style=flat-square)
  6 | 
  7 | <p align="center">
  8 |   <img width="300" src="https://user-images.githubusercontent.com/6414178/53297993-aef84480-3861-11e9-99ad-b957639414fa.gif">
  9 | </p>
 10 | 
 11 | ## Preview
 12 | [View Live Demo](https://snack.expo.io/@fuyuanx/react-native-hsv-color-picker)
 13 | 
 14 | `react-native-hsv-color-picker` is a React Native component for building an [HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) (hue, saturation, value) color picker. 
 15 | 
 16 | Highlighted Features:
 17 | 1. **Real Rendering** - no image involved / all colors are truly rendered
 18 | 2. **Performance** - empowered by native gradient lib
 19 | 4. **Fully Controlled** - no inner state involved
 20 | 3. **Fully Supported** - support both React Native & Expo projects
 21 | 
 22 | ## Install
 23 | ```bash
 24 | $ npm install react-native-hsv-color-picker --save
 25 | ```
 26 | 
 27 | ### Use with Expo Project
 28 | > You are all set.
 29 | 
 30 | ### Use with React Native Project
 31 | > `react-native-hsv-color-picker` is powered by the lib [`expo-linear-gradient`](https://github.com/react-native-community/react-native-linear-gradient). Besides above command, you have to follow this [Instruction](https://github.com/expo/expo/tree/master/packages/expo-linear-gradient#installation-in-bare-react-native-projects) to add relevant dependencies to your project.
 32 | 
 33 | ## Usage
 34 | > a minimally-configured HSV color picker
 35 | ```js
 36 | import React from 'react';
 37 | import { StyleSheet, View } from 'react-native';
 38 | import HsvColorPicker from 'react-native-hsv-color-picker';
 39 | 
 40 | export default class Example extends React.Component {
 41 |   constructor(props) {
 42 |     super(props);
 43 |     this.state = {
 44 |       hue: 0,
 45 |       sat: 0,
 46 |       val: 1,
 47 |     };
 48 |     this.onSatValPickerChange = this.onSatValPickerChange.bind(this);
 49 |     this.onHuePickerChange = this.onHuePickerChange.bind(this);
 50 |   }
 51 | 
 52 |   onSatValPickerChange({ saturation, value }) {
 53 |     this.setState({
 54 |       sat: saturation,
 55 |       val: value,
 56 |     });
 57 |   }
 58 | 
 59 |   onHuePickerChange({ hue }) {
 60 |     this.setState({
 61 |       hue,
 62 |     });
 63 |   }
 64 | 
 65 |   render() {
 66 |     const { hue, sat, val } = this.state;
 67 |     return (
 68 |       <View style={styles.container}>
 69 |         <HsvColorPicker
 70 |           huePickerHue={hue}
 71 |           onHuePickerDragMove={this.onHuePickerChange}
 72 |           onHuePickerPress={this.onHuePickerChange}
 73 |           satValPickerHue={hue}
 74 |           satValPickerSaturation={sat}
 75 |           satValPickerValue={val}
 76 |           onSatValPickerDragMove={this.onSatValPickerChange}
 77 |           onSatValPickerPress={this.onSatValPickerChange}
 78 |         />
 79 |       </View>
 80 |     );
 81 |   }
 82 | }
 83 | 
 84 | const styles = StyleSheet.create({
 85 |   container: {
 86 |     flex: 1,
 87 |     backgroundColor: '#fff',
 88 |     alignItems: 'center',
 89 |     justifyContent: 'center',
 90 |   },
 91 | });
 92 | ```
 93 | 
 94 | 
 95 | ## Props
 96 | #### Basic Props
 97 | | Prop | Type | Default | Description |
 98 | |--|--|--| -- |
 99 | | `containerStyle` | ViewPropTypes.style  | `{}` |  style for the outmost container  |
100 | | `huePickerContainerStyle` | ViewPropTypes.style  | `{}` |  style for the hue picker container  |
101 | | `huePickerBorderRadius` | number  | `0` | border radius for the hue picker  |
102 | | `huePickerHue` | number  | `0` | hue value(`h` in `hsv`, ranged in `[0, 360]`) for the hue picker |
103 | | `huePickerBarWidth` | number  | `12` | bar width for the hue picker  |
104 | | `huePickerBarHeight` | number  | `200` | bar height for the hue picker  |
105 | | `huePickerSliderSize` | number  | `24` | slider diameter for the hue picker |
106 | | `satValPickerContainerStyle` | ViewPropTypes.style  | `{}` | style for the saturation & value picker container   |
107 | | `satValPickerBorderRadius` | number  | `0` | border radius for the saturation & value picker  |
108 | | `satValPickerSize` | number  | `200` | width / height for the saturation & value picker  |
109 | | `satValPickerSliderSize` | number  | `24` | slider diameter for the saturation & value picker  |
110 | | `satValPickerHue` | number  | `0` | hue value(`h` in `hsv`, ranged in `[0, 360]`) for the saturation & value picker |
111 | | `satValPickerSaturation` | number  | `1` | saturation value(`s` in `hsv`, ranged in `[0, 1]`) for the saturation & value picker |
112 | | `satValPickerValue` | number  | `1` | value(`v` in `hsv`, ranged in `[0, 1]`) for the saturation & value picker |
113 | 
114 | #### Callback Props
115 | | Prop | Callback Params | Description |
116 | |--|--| -- |
117 | | `onHuePickerDragStart` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;hue: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when hue picker starts to drag |
118 | | `onHuePickerDragMove` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;hue: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when hue picker is dragging |
119 | | `onHuePickerDragEnd` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;hue: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when hue picker stops dragging |
120 | | `onHuePickerDragTerminate` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;hue: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when another component has become the responder |
121 | | `onHuePickerPress` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;hue: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;nativeEvent:&nbsp;[nativeEvent](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when hue picker is pressed |
122 | | `onSatValPickerDragStart` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;saturation: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;value: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when saturation & value picker starts to drag |
123 | | `onSatValPickerDragMove` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;saturation: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;value: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when saturation & value picker is dragging |
124 | | `onSatValPickerDragEnd` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;saturation: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;value: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when saturation & value picker stops dragging |
125 | | `onSatValPickerDragTerminate` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;saturation: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;value: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;gestureState:&nbsp;[gestureState](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when another component has become the responder |
126 | | `onSatValPickerPress` | {<br>&nbsp;&nbsp;&nbsp;&nbsp;saturation: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;value: number,<br>&nbsp;&nbsp;&nbsp;&nbsp;nativeEvent:&nbsp;[nativeEvent](https://facebook.github.io/react-native/docs/panresponder)<br>} | called when saturation & value picker is pressed |
127 | 
128 | ## Methods
129 | #### Instance Methods
130 | > Use [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to call instance methods
131 | 
132 | | Method | Params | Return Type| Description |
133 | |--|:--:|:--:| -- |
134 | | `getCurrentColor` | - | `string` | get current picked color in hex format |
135 | 
136 | 
137 | 
138 | ## Dev
139 | > The `demo` folder contains a standalone Expo project, which can be used for dev purpose.
140 | 
141 | > react-native - 0.61 <br />
142 | > react - 16.9
143 | 
144 | 1. Start Expo
145 | 	```bash
146 | 	$ npm install
147 | 
148 | 	$ npm start
149 | 	```
150 | 
151 | 2. Run on `simulator`
152 | 	- type the following command in the `Terminal` after the project is booted up
153 | 	- `a` for `android` simulator
154 | 	- `i` for `iOS` simulator
155 | 
156 | 3. Run on `device`
157 | 	- require the installation of corresponding [`iOS client`](https://itunes.apple.com/app/apple-store/id982107779) or [`android client`](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www) on the device
158 | 	- scan the QR code from `Terminal` using the device
159 | 
160 | 4. More on [`Expo Guide`](https://docs.expo.io/versions/v36.0.0/)
161 | 
162 | ## Related
163 | - scaffolded by [**react-native-component-cli**](https://github.com/yuanfux/react-native-component-cli) 
164 | 
165 | ## License
166 | MIT
167 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = (api) => {
 2 |   const isBabelJest = api.caller(caller => caller && caller.name === 'babel-jest');
 3 |   if (isBabelJest) {
 4 |     return {
 5 |       presets: [
 6 |         'module:metro-react-native-babel-preset',
 7 |       ],
 8 |     };
 9 |   }
10 |   return {
11 |     presets: ['babel-preset-expo'],
12 |   };
13 | };
14 | 


--------------------------------------------------------------------------------
/demo/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, View } from 'react-native';
 3 | import HsvColorPicker from '../src';
 4 | 
 5 | export default class App extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |     this.state = {
 9 |       hue: 0,
10 |       sat: 0,
11 |       val: 1,
12 |     };
13 |     this.onSatValPickerChange = this.onSatValPickerChange.bind(this);
14 |     this.onHuePickerChange = this.onHuePickerChange.bind(this);
15 |     this.hsvColorPicker = React.createRef();
16 |   }
17 | 
18 |   onSatValPickerChange({ saturation, value }) {
19 |     this.setState({
20 |       sat: saturation,
21 |       val: value,
22 |     });
23 |   }
24 | 
25 |   onHuePickerChange({ hue }) {
26 |     this.setState({
27 |       hue,
28 |     });
29 |   }
30 | 
31 |   render() {
32 |     const { hue, sat, val } = this.state;
33 |     return (
34 |       <View style={styles.container}>
35 |         <HsvColorPicker
36 |           huePickerHue={hue}
37 |           onHuePickerDragMove={this.onHuePickerChange}
38 |           onHuePickerPress={this.onHuePickerChange}
39 |           satValPickerHue={hue}
40 |           satValPickerSaturation={sat}
41 |           satValPickerValue={val}
42 |           onSatValPickerDragMove={this.onSatValPickerChange}
43 |           onSatValPickerPress={this.onSatValPickerChange}
44 |         />
45 |       </View>
46 |     );
47 |   }
48 | }
49 | 
50 | const styles = StyleSheet.create({
51 |   container: {
52 |     flex: 1,
53 |     backgroundColor: '#fff',
54 |     alignItems: 'center',
55 |     justifyContent: 'center',
56 |   },
57 | });
58 | 


--------------------------------------------------------------------------------
/demo/AppEntry.js:
--------------------------------------------------------------------------------
 1 | import { registerRootComponent } from 'expo';
 2 | import { activateKeepAwake } from 'expo-keep-awake';
 3 | 
 4 | import App from './App';
 5 | 
 6 | if (__DEV__) {
 7 |   activateKeepAwake();
 8 | }
 9 | 
10 | registerRootComponent(App);
11 | 


--------------------------------------------------------------------------------
/demo/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "react-native-demo-app",
 4 |     "slug": "react-native-demo-app",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "36.0.0",
 7 |     "entryPoint": "demo/AppEntry.js",
 8 |     "platforms": [
 9 |       "ios",
10 |       "android"
11 |     ],
12 |     "version": "1.0.0",
13 |     "orientation": "portrait",
14 |     "splash": {
15 |       "backgroundColor": "#ffffff"
16 |     },
17 |     "updates": {
18 |       "fallbackToCacheTimeout": 0
19 |     },
20 |     "assetBundlePatterns": [
21 |       "**/*"
22 |     ],
23 |     "ios": {
24 |       "supportsTablet": true
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/demo/metro.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | 
3 | module.exports = {
4 |   projectRoot: path.resolve(__dirname),
5 |   watchFolders: [
6 |     path.resolve(__dirname, '..', 'src'),
7 |   ],
8 | };
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-hsv-color-picker",
 3 |   "version": "1.0.2",
 4 |   "description": "a react native HSV(hue, saturation, value) color picker",
 5 |   "author": "Yuan Fu",
 6 |   "bugs": {
 7 |     "url": "https://github.com/yuanfux/react-native-hsv-color-picker/issues"
 8 |   },
 9 |   "homepage": "https://github.com/yuanfux/react-native-hsv-color-picker",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/yuanfux/react-native-hsv-color-picker.git"
13 |   },
14 |   "keywords": [
15 |     "react native",
16 |     "react-native",
17 |     "color",
18 |     "picker",
19 |     "color picker",
20 |     "hsv color picker"
21 |   ],
22 |   "main": "src/index.js",
23 |   "files": [
24 |     "src/*"
25 |   ],
26 |   "dependencies": {
27 |     "chroma-js": "^2.1.0",
28 |     "expo-linear-gradient": "^8.0.0"
29 |   },
30 |   "peerDependencies": {
31 |     "prop-types": "^15.7.2"
32 |   },
33 |   "devDependencies": {
34 |     "@babel/core": "^7.2.2",
35 |     "@babel/runtime": "^7.3.1",
36 |     "babel-eslint": "^10.0.1",
37 |     "babel-jest": "^24.0.0",
38 |     "babel-preset-expo": "~8.0.0",
39 |     "enzyme": "^3.10.0",
40 |     "enzyme-adapter-react-16": "^1.14.0",
41 |     "enzyme-to-json": "^3.3.5",
42 |     "escape-regex-string": "^1.0.6",
43 |     "eslint": "^5.13.0",
44 |     "eslint-config-airbnb": "^17.1.0",
45 |     "eslint-plugin-import": "^2.16.0",
46 |     "eslint-plugin-jsx-a11y": "^6.2.1",
47 |     "eslint-plugin-react": "^7.12.4",
48 |     "eslint-plugin-react-native": "^3.6.0",
49 |     "expo": "~36.0.0",
50 |     "expo-keep-awake": "^8.0.0",
51 |     "jest": "^24.0.0",
52 |     "jest-enzyme": "^7.0.2",
53 |     "jest-expo": "^36.0.1",
54 |     "jsdom": "^15.1.1",
55 |     "react": "~16.9.0",
56 |     "react-dom": "~16.9.0",
57 |     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz"
58 |   },
59 |   "scripts": {
60 |     "start": "npx expo-cli start --config \"./demo/app.json\" -c",
61 |     "eject": "npx expo-cli eject --config \"./demo/app.json\"",
62 |     "test:lint": "npx eslint \"src/*.js\"",
63 |     "test": "npm run test:lint && npx jest"
64 |   },
65 |   "jest": {
66 |     "preset": "jest-expo",
67 |     "snapshotSerializers": [
68 |       "enzyme-to-json/serializer"
69 |     ],
70 |     "setupFilesAfterEnv": [
71 |       "<rootDir>/setup-tests.js"
72 |     ],
73 |     "modulePathIgnorePatterns": [
74 |       "<rootDir>/demo/"
75 |     ],
76 |     "collectCoverage": true
77 |   },
78 |   "license": "MIT"
79 | }
80 | 


--------------------------------------------------------------------------------
/setup-tests.js:
--------------------------------------------------------------------------------
 1 | // setup-tests.js
 2 | 
 3 | import 'react-native';
 4 | import 'jest-enzyme';
 5 | import Adapter from 'enzyme-adapter-react-16';
 6 | import Enzyme from 'enzyme';
 7 | 
 8 | /**
 9 |  * Set up DOM in node.js environment for Enzyme to mount to
10 |  */
11 | const { JSDOM } = require('jsdom');
12 | 
13 | const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
14 | const { window } = jsdom;
15 | 
16 | function copyProps(src, target) {
17 |   const props = Object.getOwnPropertyNames(src)
18 |     .filter(prop => typeof target[prop] === 'undefined')
19 |     .map(prop => Object.getOwnPropertyDescriptor(src, prop));
20 |   Object.defineProperties(target, props);
21 | }
22 | 
23 | global.window = window;
24 | global.document = window.document;
25 | global.navigator = {
26 |   userAgent: 'node.js',
27 | };
28 | copyProps(window, global);
29 | 
30 | /**
31 |  * Set up Enzyme to mount to DOM, simulate events,
32 |  * and inspect the DOM in tests.
33 |  */
34 | Enzyme.configure({ adapter: new Adapter() });
35 | 
36 | // Ignore React Web errors when using React Native
37 | console.error = message => message;
38 | 


--------------------------------------------------------------------------------
/src/HsvColorPicker.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import {
  3 |   View,
  4 |   ViewPropTypes,
  5 |   StyleSheet,
  6 | } from 'react-native';
  7 | import PropTypes from 'prop-types';
  8 | import HuePicker from './HuePicker';
  9 | import SaturationValuePicker from './SaturationValuePicker';
 10 | 
 11 | export default class HsvColorPicker extends Component {
 12 |   constructor(props) {
 13 |     super(props);
 14 |     this.satValPicker = React.createRef();
 15 |   }
 16 | 
 17 |   getCurrentColor() {
 18 |     return this.satValPicker.current.getCurrentColor();
 19 |   }
 20 | 
 21 |   render() {
 22 |     const {
 23 |       containerStyle,
 24 |       huePickerContainerStyle,
 25 |       huePickerBorderRadius,
 26 |       huePickerHue,
 27 |       huePickerBarWidth,
 28 |       huePickerBarHeight,
 29 |       huePickerSliderSize,
 30 |       onHuePickerDragStart,
 31 |       onHuePickerDragMove,
 32 |       onHuePickerDragEnd,
 33 |       onHuePickerDragTerminate,
 34 |       onHuePickerPress,
 35 |       satValPickerContainerStyle,
 36 |       satValPickerBorderRadius,
 37 |       satValPickerSize,
 38 |       satValPickerSliderSize,
 39 |       satValPickerHue,
 40 |       satValPickerSaturation,
 41 |       satValPickerValue,
 42 |       onSatValPickerDragStart,
 43 |       onSatValPickerDragMove,
 44 |       onSatValPickerDragEnd,
 45 |       onSatValPickerDragTerminate,
 46 |       onSatValPickerPress,
 47 |     } = this.props;
 48 |     return (
 49 |       <View style={[styles.container, containerStyle]}>
 50 |         <SaturationValuePicker
 51 |           containerStyle={satValPickerContainerStyle}
 52 |           borderRadius={satValPickerBorderRadius}
 53 |           size={satValPickerSize}
 54 |           sliderSize={satValPickerSliderSize}
 55 |           hue={satValPickerHue}
 56 |           saturation={satValPickerSaturation}
 57 |           value={satValPickerValue}
 58 |           onDragStart={onSatValPickerDragStart}
 59 |           onDragMove={onSatValPickerDragMove}
 60 |           onDragEnd={onSatValPickerDragEnd}
 61 |           onDragTerminate={onSatValPickerDragTerminate}
 62 |           onPress={onSatValPickerPress}
 63 |           ref={this.satValPicker}
 64 |         />
 65 |         <HuePicker
 66 |           containerStyle={huePickerContainerStyle}
 67 |           borderRadius={huePickerBorderRadius}
 68 |           hue={huePickerHue}
 69 |           barWidth={huePickerBarWidth}
 70 |           barHeight={huePickerBarHeight}
 71 |           sliderSize={huePickerSliderSize}
 72 |           onDragStart={onHuePickerDragStart}
 73 |           onDragMove={onHuePickerDragMove}
 74 |           onDragEnd={onHuePickerDragEnd}
 75 |           onDragTerminate={onHuePickerDragTerminate}
 76 |           onPress={onHuePickerPress}
 77 |         />
 78 |       </View>
 79 |     );
 80 |   }
 81 | }
 82 | 
 83 | const styles = StyleSheet.create({
 84 |   container: {
 85 |     flexDirection: 'row',
 86 |     justifyContent: 'center',
 87 |     alignItems: 'center',
 88 |   },
 89 | });
 90 | 
 91 | HsvColorPicker.propTypes = {
 92 |   containerStyle: ViewPropTypes.style,
 93 |   huePickerContainerStyle: ViewPropTypes.style,
 94 |   huePickerBorderRadius: PropTypes.number,
 95 |   huePickerHue: PropTypes.number,
 96 |   huePickerBarWidth: PropTypes.number,
 97 |   huePickerBarHeight: PropTypes.number,
 98 |   huePickerSliderSize: PropTypes.number,
 99 |   onHuePickerDragStart: PropTypes.func,
100 |   onHuePickerDragMove: PropTypes.func,
101 |   onHuePickerDragEnd: PropTypes.func,
102 |   onHuePickerDragTerminate: PropTypes.func,
103 |   onHuePickerPress: PropTypes.func,
104 |   satValPickerContainerStyle: ViewPropTypes.style,
105 |   satValPickerBorderRadius: PropTypes.number,
106 |   satValPickerSize: PropTypes.number,
107 |   satValPickerSliderSize: PropTypes.number,
108 |   satValPickerHue: PropTypes.number,
109 |   satValPickerSaturation: PropTypes.number,
110 |   satValPickerValue: PropTypes.number,
111 |   onSatValPickerDragStart: PropTypes.func,
112 |   onSatValPickerDragMove: PropTypes.func,
113 |   onSatValPickerDragEnd: PropTypes.func,
114 |   onSatValPickerDragTerminate: PropTypes.func,
115 |   onSatValPickerPress: PropTypes.func,
116 | };
117 | 
118 | HsvColorPicker.defaultProps = {
119 |   containerStyle: {},
120 |   huePickerContainerStyle: {},
121 |   huePickerBorderRadius: 0,
122 |   huePickerHue: 0,
123 |   huePickerBarWidth: 12,
124 |   huePickerBarHeight: 200,
125 |   huePickerSliderSize: 24,
126 |   onHuePickerDragStart: null,
127 |   onHuePickerDragMove: null,
128 |   onHuePickerDragEnd: null,
129 |   onHuePickerDragTerminate: null,
130 |   onHuePickerPress: null,
131 |   satValPickerContainerStyle: {},
132 |   satValPickerBorderRadius: 0,
133 |   satValPickerSize: 200,
134 |   satValPickerSliderSize: 24,
135 |   satValPickerHue: 0,
136 |   satValPickerSaturation: 1,
137 |   satValPickerValue: 1,
138 |   onSatValPickerDragStart: null,
139 |   onSatValPickerDragMove: null,
140 |   onSatValPickerDragEnd: null,
141 |   onSatValPickerDragTerminate: null,
142 |   onSatValPickerPress: null,
143 | };
144 | 


--------------------------------------------------------------------------------
/src/HuePicker.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import {
  3 |   Animated,
  4 |   View,
  5 |   TouchableWithoutFeedback,
  6 |   ViewPropTypes,
  7 |   PanResponder,
  8 |   StyleSheet,
  9 | } from 'react-native';
 10 | import { LinearGradient } from 'expo-linear-gradient';
 11 | import PropTypes from 'prop-types';
 12 | import chroma from 'chroma-js';
 13 | import normalizeValue from './utils';
 14 | 
 15 | export default class HuePicker extends Component {
 16 |   constructor(props) {
 17 |     super(props);
 18 |     this.hueColors = [
 19 |       '#ff0000',
 20 |       '#ffff00',
 21 |       '#00ff00',
 22 |       '#00ffff',
 23 |       '#0000ff',
 24 |       '#ff00ff',
 25 |       '#ff0000',
 26 |     ];
 27 |     this.firePressEvent = this.firePressEvent.bind(this);
 28 |     this.sliderY = new Animated.Value(props.barHeight * props.hue / 360);
 29 |     this.panResponder = PanResponder.create({
 30 |       onStartShouldSetPanResponder: () => true,
 31 |       onStartShouldSetPanResponderCapture: () => true,
 32 |       onMoveShouldSetPanResponder: () => true,
 33 |       onMoveShouldSetPanResponderCapture: () => true,
 34 |       onPanResponderGrant: (evt, gestureState) => {
 35 |         const { hue } = this.props;
 36 |         this.dragStartValue = hue;
 37 |         this.fireDragEvent('onDragStart', gestureState);
 38 |       },
 39 |       onPanResponderMove: (evt, gestureState) => {
 40 |         this.fireDragEvent('onDragMove', gestureState);
 41 |       },
 42 |       onPanResponderTerminationRequest: () => true,
 43 |       onPanResponderRelease: (evt, gestureState) => {
 44 |         this.fireDragEvent('onDragEnd', gestureState);
 45 |       },
 46 |       onPanResponderTerminate: (evt, gestureState) => {
 47 |         this.fireDragEvent('onDragTerminate', gestureState);
 48 |       },
 49 |       onShouldBlockNativeResponder: () => true,
 50 |     });
 51 |   }
 52 | 
 53 |   componentDidUpdate(prevProps) {
 54 |     const { hue, barHeight } = this.props;
 55 |     if (
 56 |       prevProps.hue !== hue
 57 |       || prevProps.barHeight !== barHeight
 58 |     ) {
 59 |       this.sliderY.setValue(barHeight * hue / 360);
 60 |     }
 61 |   }
 62 | 
 63 |   getContainerStyle() {
 64 |     const { sliderSize, barWidth, containerStyle } = this.props;
 65 |     const paddingTop = sliderSize / 2;
 66 |     const paddingLeft = sliderSize - barWidth > 0 ? (sliderSize - barWidth) / 2 : 0;
 67 |     return [
 68 |       styles.container,
 69 |       containerStyle,
 70 |       {
 71 |         paddingTop,
 72 |         paddingBottom: paddingTop,
 73 |         paddingLeft,
 74 |         paddingRight: paddingLeft,
 75 |       },
 76 |     ];
 77 |   }
 78 | 
 79 |   getCurrentColor() {
 80 |     const { hue } = this.props;
 81 |     return chroma.hsl(hue, 1, 0.5).hex();
 82 |   }
 83 | 
 84 |   computeHueValueDrag(gestureState) {
 85 |     const { dy } = gestureState;
 86 |     const { barHeight } = this.props;
 87 |     const { dragStartValue } = this;
 88 |     const diff = dy / barHeight;
 89 |     const updatedHue = normalizeValue(dragStartValue / 360 + diff) * 360;
 90 |     return updatedHue;
 91 |   }
 92 | 
 93 |   computeHueValuePress(event) {
 94 |     const { nativeEvent } = event;
 95 |     const { locationY } = nativeEvent;
 96 |     const { barHeight } = this.props;
 97 |     const updatedHue = normalizeValue(locationY / barHeight) * 360;
 98 |     return updatedHue;
 99 |   }
100 | 
101 |   fireDragEvent(eventName, gestureState) {
102 |     const { [eventName]: event } = this.props;
103 |     if (event) {
104 |       event({
105 |         hue: this.computeHueValueDrag(gestureState),
106 |         gestureState,
107 |       });
108 |     }
109 |   }
110 | 
111 |   firePressEvent(event) {
112 |     const { onPress } = this.props;
113 |     if (onPress) {
114 |       onPress({
115 |         hue: this.computeHueValuePress(event),
116 |         nativeEvent: event.nativeEvent,
117 |       });
118 |     }
119 |   }
120 | 
121 |   render() {
122 |     const { hueColors } = this;
123 |     const {
124 |       sliderSize,
125 |       barWidth,
126 |       barHeight,
127 |       borderRadius,
128 |     } = this.props;
129 |     return (
130 |       <View style={this.getContainerStyle()}>
131 |         <TouchableWithoutFeedback onPress={this.firePressEvent}>
132 |           <LinearGradient
133 |             colors={hueColors}
134 |             style={{
135 |               borderRadius,
136 |             }}
137 |           >
138 |             <View style={{
139 |               width: barWidth, height: barHeight,
140 |             }}
141 |             />
142 |           </LinearGradient>
143 |         </TouchableWithoutFeedback>
144 |         <Animated.View
145 |           {...this.panResponder.panHandlers}
146 |           style={[
147 |             styles.slider,
148 |             {
149 |               width: sliderSize,
150 |               height: sliderSize,
151 |               borderRadius: sliderSize / 2,
152 |               borderWidth: sliderSize / 10,
153 |               backgroundColor: this.getCurrentColor(),
154 |               transform: [{
155 |                 translateY: this.sliderY,
156 |               }],
157 |             },
158 |           ]}
159 |         />
160 |       </View>
161 |     );
162 |   }
163 | }
164 | 
165 | const styles = StyleSheet.create({
166 |   container: {
167 |     justifyContent: 'center',
168 |     alignItems: 'center',
169 |   },
170 |   slider: {
171 |     top: 0,
172 |     position: 'absolute',
173 |     borderColor: '#fff',
174 |   },
175 | });
176 | 
177 | HuePicker.propTypes = {
178 |   containerStyle: ViewPropTypes.style,
179 |   borderRadius: PropTypes.number,
180 |   hue: PropTypes.number,
181 |   barWidth: PropTypes.number,
182 |   barHeight: PropTypes.number,
183 |   sliderSize: PropTypes.number,
184 |   onDragStart: PropTypes.func,
185 |   onDragMove: PropTypes.func,
186 |   onDragEnd: PropTypes.func,
187 |   onDragTerminate: PropTypes.func,
188 |   onPress: PropTypes.func,
189 | };
190 | 
191 | HuePicker.defaultProps = {
192 |   containerStyle: {},
193 |   borderRadius: 0,
194 |   hue: 0,
195 |   barWidth: 12,
196 |   barHeight: 200,
197 |   sliderSize: 24,
198 |   onDragStart: null,
199 |   onDragMove: null,
200 |   onDragEnd: null,
201 |   onDragTerminate: null,
202 |   onPress: null,
203 | };
204 | 


--------------------------------------------------------------------------------
/src/SaturationValuePicker.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import {
  3 |   View,
  4 |   TouchableWithoutFeedback,
  5 |   ViewPropTypes,
  6 |   PanResponder,
  7 |   StyleSheet,
  8 | } from 'react-native';
  9 | import { LinearGradient } from 'expo-linear-gradient';
 10 | import PropTypes from 'prop-types';
 11 | import chroma from 'chroma-js';
 12 | import normalizeValue from './utils';
 13 | 
 14 | export default class SaturationValuePicker extends Component {
 15 |   constructor(props) {
 16 |     super(props);
 17 |     this.firePressEvent = this.firePressEvent.bind(this);
 18 |     this.panResponder = PanResponder.create({
 19 |       onStartShouldSetPanResponder: () => true,
 20 |       onStartShouldSetPanResponderCapture: () => true,
 21 |       onMoveShouldSetPanResponder: () => true,
 22 |       onMoveShouldSetPanResponderCapture: () => true,
 23 |       onPanResponderGrant: (evt, gestureState) => {
 24 |         const { saturation, value } = this.props;
 25 |         this.dragStartValue = {
 26 |           saturation,
 27 |           value,
 28 |         };
 29 |         this.fireDragEvent('onDragStart', gestureState);
 30 |       },
 31 |       onPanResponderMove: (evt, gestureState) => {
 32 |         this.fireDragEvent('onDragMove', gestureState);
 33 |       },
 34 |       onPanResponderTerminationRequest: () => true,
 35 |       onPanResponderRelease: (evt, gestureState) => {
 36 |         this.fireDragEvent('onDragEnd', gestureState);
 37 |       },
 38 |       onPanResponderTerminate: (evt, gestureState) => {
 39 |         this.fireDragEvent('onDragTerminate', gestureState);
 40 |       },
 41 |       onShouldBlockNativeResponder: () => true,
 42 |     });
 43 |   }
 44 | 
 45 |   getCurrentColor() {
 46 |     const { hue, saturation, value } = this.props;
 47 |     return chroma.hsv(
 48 |       hue,
 49 |       saturation,
 50 |       value,
 51 |     ).hex();
 52 |   }
 53 | 
 54 |   computeSatValDrag(gestureState) {
 55 |     const { dx, dy } = gestureState;
 56 |     const { size } = this.props;
 57 |     const { saturation, value } = this.dragStartValue;
 58 |     const diffx = dx / size;
 59 |     const diffy = dy / size;
 60 |     return {
 61 |       saturation: normalizeValue(saturation + diffx),
 62 |       value: normalizeValue(value - diffy),
 63 |     };
 64 |   }
 65 | 
 66 |   computeSatValPress(event) {
 67 |     const { nativeEvent } = event;
 68 |     const { locationX, locationY } = nativeEvent;
 69 |     const { size } = this.props;
 70 |     return {
 71 |       saturation: normalizeValue(locationX / size),
 72 |       value: 1 - normalizeValue(locationY / size),
 73 |     };
 74 |   }
 75 | 
 76 |   fireDragEvent(eventName, gestureState) {
 77 |     const { [eventName]: event } = this.props;
 78 |     if (event) {
 79 |       event({
 80 |         ...this.computeSatValDrag(gestureState),
 81 |         gestureState,
 82 |       });
 83 |     }
 84 |   }
 85 | 
 86 |   firePressEvent(event) {
 87 |     const { onPress } = this.props;
 88 |     if (onPress) {
 89 |       onPress({
 90 |         ...this.computeSatValPress(event),
 91 |         nativeEvent: event.nativeEvent,
 92 |       });
 93 |     }
 94 |   }
 95 | 
 96 |   render() {
 97 |     const {
 98 |       size,
 99 |       sliderSize,
100 |       hue,
101 |       value,
102 |       saturation,
103 |       containerStyle,
104 |       borderRadius,
105 |     } = this.props;
106 |     return (
107 |       <View
108 |         style={[
109 |           styles.container,
110 |           containerStyle,
111 |           {
112 |             height: size + sliderSize,
113 |             width: size + sliderSize,
114 |           },
115 |         ]}
116 |       >
117 |         <TouchableWithoutFeedback onPress={this.firePressEvent}>
118 |           <LinearGradient
119 |             style={[{ borderRadius }, styles.linearGradient]}
120 |             colors={[
121 |               '#fff',
122 |               chroma.hsl(hue, 1, 0.5).hex(),
123 |             ]}
124 |             start={[0, 0.5]}
125 |             end={[1, 0.5]}
126 |           >
127 |             <LinearGradient
128 |               colors={[
129 |                 'rgba(0, 0, 0, 0)',
130 |                 '#000',
131 |               ]}
132 |             >
133 |               <View
134 |                 style={{
135 |                   height: size,
136 |                   width: size,
137 |                 }}
138 |               />
139 |             </LinearGradient>
140 |           </LinearGradient>
141 |         </TouchableWithoutFeedback>
142 |         <View
143 |           {...this.panResponder.panHandlers}
144 |           style={[
145 |             styles.slider,
146 |             {
147 |               width: sliderSize,
148 |               height: sliderSize,
149 |               borderRadius: sliderSize / 2,
150 |               borderWidth: sliderSize / 10,
151 |               backgroundColor: this.getCurrentColor(),
152 |               transform: [
153 |                 { translateX: size * saturation },
154 |                 { translateY: size * (1 - value) },
155 |               ],
156 |             },
157 |           ]}
158 |         />
159 |       </View>
160 |     );
161 |   }
162 | }
163 | 
164 | const styles = StyleSheet.create({
165 |   container: {
166 |     justifyContent: 'center',
167 |     alignItems: 'center',
168 |   },
169 |   slider: {
170 |     top: 0,
171 |     left: 0,
172 |     position: 'absolute',
173 |     borderColor: '#fff',
174 |   },
175 |   linearGradient: {
176 |     overflow: 'hidden',
177 |   },
178 | });
179 | 
180 | SaturationValuePicker.propTypes = {
181 |   containerStyle: ViewPropTypes.style,
182 |   borderRadius: PropTypes.number,
183 |   size: PropTypes.number,
184 |   sliderSize: PropTypes.number,
185 |   hue: PropTypes.number,
186 |   saturation: PropTypes.number,
187 |   value: PropTypes.number,
188 |   onDragStart: PropTypes.func,
189 |   onDragMove: PropTypes.func,
190 |   onDragEnd: PropTypes.func,
191 |   onDragTerminate: PropTypes.func,
192 |   onPress: PropTypes.func,
193 | };
194 | 
195 | SaturationValuePicker.defaultProps = {
196 |   containerStyle: {},
197 |   borderRadius: 0,
198 |   size: 200,
199 |   sliderSize: 24,
200 |   hue: 0,
201 |   saturation: 1,
202 |   value: 1,
203 |   onDragStart: null,
204 |   onDragMove: null,
205 |   onDragEnd: null,
206 |   onDragTerminate: null,
207 |   onPress: null,
208 | };
209 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import HsvColorPicker from './HsvColorPicker';
2 | 
3 | export default HsvColorPicker;
4 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | const normalizeValue = (value) => {
2 |   if (value < 0) return 0;
3 |   if (value > 1) return 1;
4 |   return value;
5 | };
6 | 
7 | export default normalizeValue;
8 | 


--------------------------------------------------------------------------------
/test/__snapshots__/index.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`<HsvColorPicker /> renders correctly 1`] = `
  4 | <HsvColorPicker
  5 |   containerStyle={Object {}}
  6 |   huePickerBarHeight={200}
  7 |   huePickerBarWidth={12}
  8 |   huePickerBorderRadius={0}
  9 |   huePickerContainerStyle={Object {}}
 10 |   huePickerHue={0}
 11 |   huePickerSliderSize={24}
 12 |   onHuePickerDragEnd={null}
 13 |   onHuePickerDragMove={null}
 14 |   onHuePickerDragStart={null}
 15 |   onHuePickerDragTerminate={null}
 16 |   onHuePickerPress={null}
 17 |   onSatValPickerDragEnd={null}
 18 |   onSatValPickerDragMove={null}
 19 |   onSatValPickerDragStart={null}
 20 |   onSatValPickerDragTerminate={null}
 21 |   onSatValPickerPress={null}
 22 |   satValPickerBorderRadius={0}
 23 |   satValPickerContainerStyle={Object {}}
 24 |   satValPickerHue={0}
 25 |   satValPickerSaturation={1}
 26 |   satValPickerSize={200}
 27 |   satValPickerSliderSize={24}
 28 |   satValPickerValue={1}
 29 | >
 30 |   <View
 31 |     style={
 32 |       Array [
 33 |         Object {
 34 |           "alignItems": "center",
 35 |           "flexDirection": "row",
 36 |           "justifyContent": "center",
 37 |         },
 38 |         Object {},
 39 |       ]
 40 |     }
 41 |   >
 42 |     <View
 43 |       style={
 44 |         Array [
 45 |           Object {
 46 |             "alignItems": "center",
 47 |             "flexDirection": "row",
 48 |             "justifyContent": "center",
 49 |           },
 50 |           Object {},
 51 |         ]
 52 |       }
 53 |     >
 54 |       <SaturationValuePicker
 55 |         borderRadius={0}
 56 |         containerStyle={Object {}}
 57 |         hue={0}
 58 |         onDragEnd={null}
 59 |         onDragMove={null}
 60 |         onDragStart={null}
 61 |         onDragTerminate={null}
 62 |         onPress={null}
 63 |         saturation={1}
 64 |         size={200}
 65 |         sliderSize={24}
 66 |         value={1}
 67 |       >
 68 |         <View
 69 |           style={
 70 |             Array [
 71 |               Object {
 72 |                 "alignItems": "center",
 73 |                 "justifyContent": "center",
 74 |               },
 75 |               Object {},
 76 |               Object {
 77 |                 "height": 224,
 78 |                 "width": 224,
 79 |               },
 80 |             ]
 81 |           }
 82 |         >
 83 |           <View
 84 |             style={
 85 |               Array [
 86 |                 Object {
 87 |                   "alignItems": "center",
 88 |                   "justifyContent": "center",
 89 |                 },
 90 |                 Object {},
 91 |                 Object {
 92 |                   "height": 224,
 93 |                   "width": 224,
 94 |                 },
 95 |               ]
 96 |             }
 97 |           >
 98 |             <TouchableWithoutFeedback
 99 |               onPress={[Function]}
100 |             >
101 |               <LinearGradient
102 |                 accessible={true}
103 |                 colors={
104 |                   Array [
105 |                     "#fff",
106 |                     "#ff0000",
107 |                   ]
108 |                 }
109 |                 end={
110 |                   Array [
111 |                     1,
112 |                     0.5,
113 |                   ]
114 |                 }
115 |                 focusable={true}
116 |                 onClick={[Function]}
117 |                 onResponderGrant={[Function]}
118 |                 onResponderMove={[Function]}
119 |                 onResponderRelease={[Function]}
120 |                 onResponderTerminate={[Function]}
121 |                 onResponderTerminationRequest={[Function]}
122 |                 onStartShouldSetResponder={[Function]}
123 |                 start={
124 |                   Array [
125 |                     0,
126 |                     0.5,
127 |                   ]
128 |                 }
129 |                 style={
130 |                   Array [
131 |                     Object {
132 |                       "borderRadius": 0,
133 |                     },
134 |                     Object {
135 |                       "overflow": "hidden",
136 |                     },
137 |                   ]
138 |                 }
139 |               >
140 |                 <NativeLinearGradient
141 |                   accessible={true}
142 |                   colors={
143 |                     Array [
144 |                       4294967295,
145 |                       4294901760,
146 |                     ]
147 |                   }
148 |                   endPoint={
149 |                     Array [
150 |                       1,
151 |                       0.5,
152 |                     ]
153 |                   }
154 |                   focusable={true}
155 |                   onClick={[Function]}
156 |                   onResponderGrant={[Function]}
157 |                   onResponderMove={[Function]}
158 |                   onResponderRelease={[Function]}
159 |                   onResponderTerminate={[Function]}
160 |                   onResponderTerminationRequest={[Function]}
161 |                   onStartShouldSetResponder={[Function]}
162 |                   startPoint={
163 |                     Array [
164 |                       0,
165 |                       0.5,
166 |                     ]
167 |                   }
168 |                   style={
169 |                     Array [
170 |                       Object {
171 |                         "borderRadius": 0,
172 |                       },
173 |                       Object {
174 |                         "overflow": "hidden",
175 |                       },
176 |                     ]
177 |                   }
178 |                 >
179 |                   <ForwardRef(Adapter<ExpoLinearGradient>)
180 |                     accessible={true}
181 |                     colors={
182 |                       Array [
183 |                         4294967295,
184 |                         4294901760,
185 |                       ]
186 |                     }
187 |                     endPoint={
188 |                       Array [
189 |                         1,
190 |                         0.5,
191 |                       ]
192 |                     }
193 |                     focusable={true}
194 |                     onClick={[Function]}
195 |                     onResponderGrant={[Function]}
196 |                     onResponderMove={[Function]}
197 |                     onResponderRelease={[Function]}
198 |                     onResponderTerminate={[Function]}
199 |                     onResponderTerminationRequest={[Function]}
200 |                     onStartShouldSetResponder={[Function]}
201 |                     startPoint={
202 |                       Array [
203 |                         0,
204 |                         0.5,
205 |                       ]
206 |                     }
207 |                     style={
208 |                       Array [
209 |                         Object {
210 |                           "borderRadius": 0,
211 |                         },
212 |                         Object {
213 |                           "overflow": "hidden",
214 |                         },
215 |                       ]
216 |                     }
217 |                   >
218 |                     <ViewManagerAdapter_ExpoLinearGradient
219 |                       accessible={true}
220 |                       onResponderGrant={[Function]}
221 |                       onResponderMove={[Function]}
222 |                       onResponderRelease={[Function]}
223 |                       onResponderTerminate={[Function]}
224 |                       onResponderTerminationRequest={[Function]}
225 |                       onStartShouldSetResponder={[Function]}
226 |                       proxiedProperties={
227 |                         Object {
228 |                           "colors": Array [
229 |                             4294967295,
230 |                             4294901760,
231 |                           ],
232 |                           "endPoint": Array [
233 |                             1,
234 |                             0.5,
235 |                           ],
236 |                           "focusable": true,
237 |                           "locations": undefined,
238 |                           "onClick": [Function],
239 |                           "startPoint": Array [
240 |                             0,
241 |                             0.5,
242 |                           ],
243 |                         }
244 |                       }
245 |                       style={
246 |                         Array [
247 |                           Object {
248 |                             "borderRadius": 0,
249 |                           },
250 |                           Object {
251 |                             "overflow": "hidden",
252 |                           },
253 |                         ]
254 |                       }
255 |                     >
256 |                       <ViewManagerAdapter_ExpoLinearGradient
257 |                         accessible={true}
258 |                         onResponderGrant={[Function]}
259 |                         onResponderMove={[Function]}
260 |                         onResponderRelease={[Function]}
261 |                         onResponderTerminate={[Function]}
262 |                         onResponderTerminationRequest={[Function]}
263 |                         onStartShouldSetResponder={[Function]}
264 |                         proxiedProperties={
265 |                           Object {
266 |                             "colors": Array [
267 |                               4294967295,
268 |                               4294901760,
269 |                             ],
270 |                             "endPoint": Array [
271 |                               1,
272 |                               0.5,
273 |                             ],
274 |                             "focusable": true,
275 |                             "locations": undefined,
276 |                             "onClick": [Function],
277 |                             "startPoint": Array [
278 |                               0,
279 |                               0.5,
280 |                             ],
281 |                           }
282 |                         }
283 |                         style={
284 |                           Array [
285 |                             Object {
286 |                               "borderRadius": 0,
287 |                             },
288 |                             Object {
289 |                               "overflow": "hidden",
290 |                             },
291 |                           ]
292 |                         }
293 |                       >
294 |                         <LinearGradient
295 |                           colors={
296 |                             Array [
297 |                               "rgba(0, 0, 0, 0)",
298 |                               "#000",
299 |                             ]
300 |                           }
301 |                         >
302 |                           <NativeLinearGradient
303 |                             colors={
304 |                               Array [
305 |                                 0,
306 |                                 4278190080,
307 |                               ]
308 |                             }
309 |                           >
310 |                             <ForwardRef(Adapter<ExpoLinearGradient>)
311 |                               colors={
312 |                                 Array [
313 |                                   0,
314 |                                   4278190080,
315 |                                 ]
316 |                               }
317 |                             >
318 |                               <ViewManagerAdapter_ExpoLinearGradient
319 |                                 proxiedProperties={
320 |                                   Object {
321 |                                     "colors": Array [
322 |                                       0,
323 |                                       4278190080,
324 |                                     ],
325 |                                     "endPoint": undefined,
326 |                                     "locations": undefined,
327 |                                     "startPoint": undefined,
328 |                                   }
329 |                                 }
330 |                               >
331 |                                 <ViewManagerAdapter_ExpoLinearGradient
332 |                                   proxiedProperties={
333 |                                     Object {
334 |                                       "colors": Array [
335 |                                         0,
336 |                                         4278190080,
337 |                                       ],
338 |                                       "endPoint": undefined,
339 |                                       "locations": undefined,
340 |                                       "startPoint": undefined,
341 |                                     }
342 |                                   }
343 |                                 >
344 |                                   <View
345 |                                     style={
346 |                                       Object {
347 |                                         "height": 200,
348 |                                         "width": 200,
349 |                                       }
350 |                                     }
351 |                                   >
352 |                                     <View
353 |                                       style={
354 |                                         Object {
355 |                                           "height": 200,
356 |                                           "width": 200,
357 |                                         }
358 |                                       }
359 |                                     />
360 |                                   </View>
361 |                                 </ViewManagerAdapter_ExpoLinearGradient>
362 |                               </ViewManagerAdapter_ExpoLinearGradient>
363 |                             </ForwardRef(Adapter<ExpoLinearGradient>)>
364 |                           </NativeLinearGradient>
365 |                         </LinearGradient>
366 |                       </ViewManagerAdapter_ExpoLinearGradient>
367 |                     </ViewManagerAdapter_ExpoLinearGradient>
368 |                   </ForwardRef(Adapter<ExpoLinearGradient>)>
369 |                 </NativeLinearGradient>
370 |               </LinearGradient>
371 |             </TouchableWithoutFeedback>
372 |             <View
373 |               onMoveShouldSetResponder={[Function]}
374 |               onMoveShouldSetResponderCapture={[Function]}
375 |               onResponderEnd={[Function]}
376 |               onResponderGrant={[Function]}
377 |               onResponderMove={[Function]}
378 |               onResponderReject={[Function]}
379 |               onResponderRelease={[Function]}
380 |               onResponderStart={[Function]}
381 |               onResponderTerminate={[Function]}
382 |               onResponderTerminationRequest={[Function]}
383 |               onStartShouldSetResponder={[Function]}
384 |               onStartShouldSetResponderCapture={[Function]}
385 |               style={
386 |                 Array [
387 |                   Object {
388 |                     "borderColor": "#fff",
389 |                     "left": 0,
390 |                     "position": "absolute",
391 |                     "top": 0,
392 |                   },
393 |                   Object {
394 |                     "backgroundColor": "#ff0000",
395 |                     "borderRadius": 12,
396 |                     "borderWidth": 2.4,
397 |                     "height": 24,
398 |                     "transform": Array [
399 |                       Object {
400 |                         "translateX": 200,
401 |                       },
402 |                       Object {
403 |                         "translateY": 0,
404 |                       },
405 |                     ],
406 |                     "width": 24,
407 |                   },
408 |                 ]
409 |               }
410 |             >
411 |               <View
412 |                 onMoveShouldSetResponder={[Function]}
413 |                 onMoveShouldSetResponderCapture={[Function]}
414 |                 onResponderEnd={[Function]}
415 |                 onResponderGrant={[Function]}
416 |                 onResponderMove={[Function]}
417 |                 onResponderReject={[Function]}
418 |                 onResponderRelease={[Function]}
419 |                 onResponderStart={[Function]}
420 |                 onResponderTerminate={[Function]}
421 |                 onResponderTerminationRequest={[Function]}
422 |                 onStartShouldSetResponder={[Function]}
423 |                 onStartShouldSetResponderCapture={[Function]}
424 |                 style={
425 |                   Array [
426 |                     Object {
427 |                       "borderColor": "#fff",
428 |                       "left": 0,
429 |                       "position": "absolute",
430 |                       "top": 0,
431 |                     },
432 |                     Object {
433 |                       "backgroundColor": "#ff0000",
434 |                       "borderRadius": 12,
435 |                       "borderWidth": 2.4,
436 |                       "height": 24,
437 |                       "transform": Array [
438 |                         Object {
439 |                           "translateX": 200,
440 |                         },
441 |                         Object {
442 |                           "translateY": 0,
443 |                         },
444 |                       ],
445 |                       "width": 24,
446 |                     },
447 |                   ]
448 |                 }
449 |               />
450 |             </View>
451 |           </View>
452 |         </View>
453 |       </SaturationValuePicker>
454 |       <HuePicker
455 |         barHeight={200}
456 |         barWidth={12}
457 |         borderRadius={0}
458 |         containerStyle={Object {}}
459 |         hue={0}
460 |         onDragEnd={null}
461 |         onDragMove={null}
462 |         onDragStart={null}
463 |         onDragTerminate={null}
464 |         onPress={null}
465 |         sliderSize={24}
466 |       >
467 |         <View
468 |           style={
469 |             Array [
470 |               Object {
471 |                 "alignItems": "center",
472 |                 "justifyContent": "center",
473 |               },
474 |               Object {},
475 |               Object {
476 |                 "paddingBottom": 12,
477 |                 "paddingLeft": 6,
478 |                 "paddingRight": 6,
479 |                 "paddingTop": 12,
480 |               },
481 |             ]
482 |           }
483 |         >
484 |           <View
485 |             style={
486 |               Array [
487 |                 Object {
488 |                   "alignItems": "center",
489 |                   "justifyContent": "center",
490 |                 },
491 |                 Object {},
492 |                 Object {
493 |                   "paddingBottom": 12,
494 |                   "paddingLeft": 6,
495 |                   "paddingRight": 6,
496 |                   "paddingTop": 12,
497 |                 },
498 |               ]
499 |             }
500 |           >
501 |             <TouchableWithoutFeedback
502 |               onPress={[Function]}
503 |             >
504 |               <LinearGradient
505 |                 accessible={true}
506 |                 colors={
507 |                   Array [
508 |                     "#ff0000",
509 |                     "#ffff00",
510 |                     "#00ff00",
511 |                     "#00ffff",
512 |                     "#0000ff",
513 |                     "#ff00ff",
514 |                     "#ff0000",
515 |                   ]
516 |                 }
517 |                 focusable={true}
518 |                 onClick={[Function]}
519 |                 onResponderGrant={[Function]}
520 |                 onResponderMove={[Function]}
521 |                 onResponderRelease={[Function]}
522 |                 onResponderTerminate={[Function]}
523 |                 onResponderTerminationRequest={[Function]}
524 |                 onStartShouldSetResponder={[Function]}
525 |                 style={
526 |                   Object {
527 |                     "borderRadius": 0,
528 |                   }
529 |                 }
530 |               >
531 |                 <NativeLinearGradient
532 |                   accessible={true}
533 |                   colors={
534 |                     Array [
535 |                       4294901760,
536 |                       4294967040,
537 |                       4278255360,
538 |                       4278255615,
539 |                       4278190335,
540 |                       4294902015,
541 |                       4294901760,
542 |                     ]
543 |                   }
544 |                   focusable={true}
545 |                   onClick={[Function]}
546 |                   onResponderGrant={[Function]}
547 |                   onResponderMove={[Function]}
548 |                   onResponderRelease={[Function]}
549 |                   onResponderTerminate={[Function]}
550 |                   onResponderTerminationRequest={[Function]}
551 |                   onStartShouldSetResponder={[Function]}
552 |                   style={
553 |                     Object {
554 |                       "borderRadius": 0,
555 |                     }
556 |                   }
557 |                 >
558 |                   <ForwardRef(Adapter<ExpoLinearGradient>)
559 |                     accessible={true}
560 |                     colors={
561 |                       Array [
562 |                         4294901760,
563 |                         4294967040,
564 |                         4278255360,
565 |                         4278255615,
566 |                         4278190335,
567 |                         4294902015,
568 |                         4294901760,
569 |                       ]
570 |                     }
571 |                     focusable={true}
572 |                     onClick={[Function]}
573 |                     onResponderGrant={[Function]}
574 |                     onResponderMove={[Function]}
575 |                     onResponderRelease={[Function]}
576 |                     onResponderTerminate={[Function]}
577 |                     onResponderTerminationRequest={[Function]}
578 |                     onStartShouldSetResponder={[Function]}
579 |                     style={
580 |                       Object {
581 |                         "borderRadius": 0,
582 |                       }
583 |                     }
584 |                   >
585 |                     <ViewManagerAdapter_ExpoLinearGradient
586 |                       accessible={true}
587 |                       onResponderGrant={[Function]}
588 |                       onResponderMove={[Function]}
589 |                       onResponderRelease={[Function]}
590 |                       onResponderTerminate={[Function]}
591 |                       onResponderTerminationRequest={[Function]}
592 |                       onStartShouldSetResponder={[Function]}
593 |                       proxiedProperties={
594 |                         Object {
595 |                           "colors": Array [
596 |                             4294901760,
597 |                             4294967040,
598 |                             4278255360,
599 |                             4278255615,
600 |                             4278190335,
601 |                             4294902015,
602 |                             4294901760,
603 |                           ],
604 |                           "endPoint": undefined,
605 |                           "focusable": true,
606 |                           "locations": undefined,
607 |                           "onClick": [Function],
608 |                           "startPoint": undefined,
609 |                         }
610 |                       }
611 |                       style={
612 |                         Object {
613 |                           "borderRadius": 0,
614 |                         }
615 |                       }
616 |                     >
617 |                       <ViewManagerAdapter_ExpoLinearGradient
618 |                         accessible={true}
619 |                         onResponderGrant={[Function]}
620 |                         onResponderMove={[Function]}
621 |                         onResponderRelease={[Function]}
622 |                         onResponderTerminate={[Function]}
623 |                         onResponderTerminationRequest={[Function]}
624 |                         onStartShouldSetResponder={[Function]}
625 |                         proxiedProperties={
626 |                           Object {
627 |                             "colors": Array [
628 |                               4294901760,
629 |                               4294967040,
630 |                               4278255360,
631 |                               4278255615,
632 |                               4278190335,
633 |                               4294902015,
634 |                               4294901760,
635 |                             ],
636 |                             "endPoint": undefined,
637 |                             "focusable": true,
638 |                             "locations": undefined,
639 |                             "onClick": [Function],
640 |                             "startPoint": undefined,
641 |                           }
642 |                         }
643 |                         style={
644 |                           Object {
645 |                             "borderRadius": 0,
646 |                           }
647 |                         }
648 |                       >
649 |                         <View
650 |                           style={
651 |                             Object {
652 |                               "height": 200,
653 |                               "width": 12,
654 |                             }
655 |                           }
656 |                         >
657 |                           <View
658 |                             style={
659 |                               Object {
660 |                                 "height": 200,
661 |                                 "width": 12,
662 |                               }
663 |                             }
664 |                           />
665 |                         </View>
666 |                       </ViewManagerAdapter_ExpoLinearGradient>
667 |                     </ViewManagerAdapter_ExpoLinearGradient>
668 |                   </ForwardRef(Adapter<ExpoLinearGradient>)>
669 |                 </NativeLinearGradient>
670 |               </LinearGradient>
671 |             </TouchableWithoutFeedback>
672 |             <AnimatedComponent
673 |               onMoveShouldSetResponder={[Function]}
674 |               onMoveShouldSetResponderCapture={[Function]}
675 |               onResponderEnd={[Function]}
676 |               onResponderGrant={[Function]}
677 |               onResponderMove={[Function]}
678 |               onResponderReject={[Function]}
679 |               onResponderRelease={[Function]}
680 |               onResponderStart={[Function]}
681 |               onResponderTerminate={[Function]}
682 |               onResponderTerminationRequest={[Function]}
683 |               onStartShouldSetResponder={[Function]}
684 |               onStartShouldSetResponderCapture={[Function]}
685 |               style={
686 |                 Array [
687 |                   Object {
688 |                     "borderColor": "#fff",
689 |                     "position": "absolute",
690 |                     "top": 0,
691 |                   },
692 |                   Object {
693 |                     "backgroundColor": "#ff0000",
694 |                     "borderRadius": 12,
695 |                     "borderWidth": 2.4,
696 |                     "height": 24,
697 |                     "transform": Array [
698 |                       Object {
699 |                         "translateY": 0,
700 |                       },
701 |                     ],
702 |                     "width": 24,
703 |                   },
704 |                 ]
705 |               }
706 |             >
707 |               <View
708 |                 onMoveShouldSetResponder={[Function]}
709 |                 onMoveShouldSetResponderCapture={[Function]}
710 |                 onResponderEnd={[Function]}
711 |                 onResponderGrant={[Function]}
712 |                 onResponderMove={[Function]}
713 |                 onResponderReject={[Function]}
714 |                 onResponderRelease={[Function]}
715 |                 onResponderStart={[Function]}
716 |                 onResponderTerminate={[Function]}
717 |                 onResponderTerminationRequest={[Function]}
718 |                 onStartShouldSetResponder={[Function]}
719 |                 onStartShouldSetResponderCapture={[Function]}
720 |                 style={
721 |                   Object {
722 |                     "backgroundColor": "#ff0000",
723 |                     "borderColor": "#fff",
724 |                     "borderRadius": 12,
725 |                     "borderWidth": 2.4,
726 |                     "height": 24,
727 |                     "position": "absolute",
728 |                     "top": 0,
729 |                     "transform": Array [
730 |                       Object {
731 |                         "translateY": 0,
732 |                       },
733 |                     ],
734 |                     "width": 24,
735 |                   }
736 |                 }
737 |               >
738 |                 <View
739 |                   onMoveShouldSetResponder={[Function]}
740 |                   onMoveShouldSetResponderCapture={[Function]}
741 |                   onResponderEnd={[Function]}
742 |                   onResponderGrant={[Function]}
743 |                   onResponderMove={[Function]}
744 |                   onResponderReject={[Function]}
745 |                   onResponderRelease={[Function]}
746 |                   onResponderStart={[Function]}
747 |                   onResponderTerminate={[Function]}
748 |                   onResponderTerminationRequest={[Function]}
749 |                   onStartShouldSetResponder={[Function]}
750 |                   onStartShouldSetResponderCapture={[Function]}
751 |                   style={
752 |                     Object {
753 |                       "backgroundColor": "#ff0000",
754 |                       "borderColor": "#fff",
755 |                       "borderRadius": 12,
756 |                       "borderWidth": 2.4,
757 |                       "height": 24,
758 |                       "position": "absolute",
759 |                       "top": 0,
760 |                       "transform": Array [
761 |                         Object {
762 |                           "translateY": 0,
763 |                         },
764 |                       ],
765 |                       "width": 24,
766 |                     }
767 |                   }
768 |                 />
769 |               </View>
770 |             </AnimatedComponent>
771 |           </View>
772 |         </View>
773 |       </HuePicker>
774 |     </View>
775 |   </View>
776 | </HsvColorPicker>
777 | `;
778 | 


--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { mount } from 'enzyme';
 3 | import HsvColorPicker from '../src';
 4 | 
 5 | describe('<HsvColorPicker />', () => {
 6 |   test('renders correctly', () => {
 7 |     const wrapper = mount(<HsvColorPicker />);
 8 |     expect(wrapper).toMatchSnapshot();
 9 |   });
10 | });
11 | 


--------------------------------------------------------------------------------