├── .travis.yml
├── src
    ├── index.js
    ├── utils.js
    ├── HsvColorPicker.js
    ├── SaturationValuePicker.js
    └── HuePicker.js
├── .gitignore
├── test
    ├── index.test.js
    └── __snapshots__
    │   └── index.test.js.snap
├── babel.config.js
├── .eslintrc.js
├── setup-tests.js
├── package.json
└── README.md


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 |       'react/prop-types': 0,
16 |       // allow js file extension
17 |       'react/jsx-filename-extension': [
18 |         'error',
19 |         {
20 |             extensions: ['.js', '.jsx']
21 |         }
22 |       ],
23 |       // for post defining style object in react-native
24 |       'no-use-before-define': ['error', { variables: false }],
25 |       // react-native rules
26 |       'react-native/no-unused-styles': 2,
27 |       'react-native/split-platform-components': 2,
28 |       'react-native/no-inline-styles': 2,
29 |       'react-native/no-raw-text': 2,
30 |       // allow devDependencies
31 |       'import/no-extraneous-dependencies': ['error', { devDependencies: true }]
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-hsv-color-picker",
 3 |   "version": "1.0.1",
 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 |     "react-native-linear-gradient": "git+https://github.com/wordpress-mobile/react-native-linear-gradient.git#52bf43077171cff8714ce3e0155f3ebb7f55bc37",
28 |     "tinycolor2": "^1.4.1"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.2.2",
32 |     "@babel/runtime": "^7.3.1",
33 |     "babel-eslint": "^10.0.1",
34 |     "babel-jest": "^24.0.0",
35 |     "babel-preset-expo": "~8.0.0",
36 |     "enzyme": "^3.10.0",
37 |     "enzyme-adapter-react-16": "^1.14.0",
38 |     "enzyme-to-json": "^3.3.5",
39 |     "escape-regex-string": "^1.0.6",
40 |     "eslint": "^5.13.0",
41 |     "eslint-config-airbnb": "^17.1.0",
42 |     "eslint-plugin-import": "^2.16.0",
43 |     "eslint-plugin-jsx-a11y": "^6.2.1",
44 |     "eslint-plugin-react": "^7.12.4",
45 |     "eslint-plugin-react-native": "^3.6.0",
46 |     "expo": "~36.0.0",
47 |     "expo-keep-awake": "^8.0.0",
48 |     "jest": "^24.0.0",
49 |     "jest-enzyme": "^7.0.2",
50 |     "jest-expo": "^36.0.1",
51 |     "jsdom": "^15.1.1",
52 |     "react": "~16.9.0",
53 |     "react-dom": "~16.9.0",
54 |     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz"
55 |   },
56 |   "scripts": {
57 |     "start": "npx expo-cli start --config \"./demo/app.json\" -c",
58 |     "eject": "npx expo-cli eject --config \"./demo/app.json\"",
59 |     "test:lint": "npx eslint \"src/*.js\"",
60 |     "test": "npm run test:lint && npx jest"
61 |   },
62 |   "jest": {
63 |     "preset": "jest-expo",
64 |     "snapshotSerializers": [
65 |       "enzyme-to-json/serializer"
66 |     ],
67 |     "setupFilesAfterEnv": [
68 |       "<rootDir>/setup-tests.js"
69 |     ],
70 |     "modulePathIgnorePatterns": [
71 |       "<rootDir>/demo/"
72 |     ],
73 |     "collectCoverage": true
74 |   },
75 |   "license": "MIT"
76 | }
77 | 


--------------------------------------------------------------------------------
/src/HsvColorPicker.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import {
 3 |   View,
 4 |   StyleSheet,
 5 |   Dimensions,
 6 | } from 'react-native';
 7 | import HuePicker from './HuePicker';
 8 | import SaturationValuePicker from './SaturationValuePicker';
 9 | 
10 | export default class HsvColorPicker extends Component {
11 |   constructor(props) {
12 |     super(props);
13 |     this.satValPicker = React.createRef();
14 |   }
15 | 
16 |   getCurrentColor() {
17 |     return this.satValPicker.current.getCurrentColor();
18 |   }
19 | 
20 |   render() {
21 |     const maxWidth = Dimensions.get('window').width - 32;
22 |     const {
23 |       containerStyle = {},
24 |       huePickerContainerStyle = {},
25 |       huePickerBorderRadius = 0,
26 |       huePickerHue = 0,
27 |       huePickerBarWidth = maxWidth,
28 |       huePickerBarHeight = 12,
29 |       huePickerSliderSize = 24,
30 |       onHuePickerDragStart,
31 |       onHuePickerDragMove,
32 |       onHuePickerDragEnd,
33 |       onHuePickerDragTerminate,
34 |       onHuePickerPress,
35 |       satValPickerContainerStyle = {},
36 |       satValPickerBorderRadius = 0,
37 |       satValPickerSize = { width: maxWidth, height: 200 },
38 |       satValPickerSliderSize = 24,
39 |       satValPickerHue = 0,
40 |       satValPickerSaturation = 1,
41 |       satValPickerValue = 1,
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 |     justifyContent: 'center',
86 |     alignItems: 'center',
87 |   },
88 | });
89 | 


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


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


--------------------------------------------------------------------------------
/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/2020.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 | 


--------------------------------------------------------------------------------
/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 |                   Object {
131 |                     "borderRadius": 0,
132 |                   }
133 |                 }
134 |               >
135 |                 <NativeLinearGradient
136 |                   accessible={true}
137 |                   colors={
138 |                     Array [
139 |                       4294967295,
140 |                       4294901760,
141 |                     ]
142 |                   }
143 |                   endPoint={
144 |                     Array [
145 |                       1,
146 |                       0.5,
147 |                     ]
148 |                   }
149 |                   focusable={true}
150 |                   onClick={[Function]}
151 |                   onResponderGrant={[Function]}
152 |                   onResponderMove={[Function]}
153 |                   onResponderRelease={[Function]}
154 |                   onResponderTerminate={[Function]}
155 |                   onResponderTerminationRequest={[Function]}
156 |                   onStartShouldSetResponder={[Function]}
157 |                   startPoint={
158 |                     Array [
159 |                       0,
160 |                       0.5,
161 |                     ]
162 |                   }
163 |                   style={
164 |                     Object {
165 |                       "borderRadius": 0,
166 |                     }
167 |                   }
168 |                 >
169 |                   <ForwardRef(Adapter<ExpoLinearGradient>)
170 |                     accessible={true}
171 |                     colors={
172 |                       Array [
173 |                         4294967295,
174 |                         4294901760,
175 |                       ]
176 |                     }
177 |                     endPoint={
178 |                       Array [
179 |                         1,
180 |                         0.5,
181 |                       ]
182 |                     }
183 |                     focusable={true}
184 |                     onClick={[Function]}
185 |                     onResponderGrant={[Function]}
186 |                     onResponderMove={[Function]}
187 |                     onResponderRelease={[Function]}
188 |                     onResponderTerminate={[Function]}
189 |                     onResponderTerminationRequest={[Function]}
190 |                     onStartShouldSetResponder={[Function]}
191 |                     startPoint={
192 |                       Array [
193 |                         0,
194 |                         0.5,
195 |                       ]
196 |                     }
197 |                     style={
198 |                       Object {
199 |                         "borderRadius": 0,
200 |                       }
201 |                     }
202 |                   >
203 |                     <ViewManagerAdapter_ExpoLinearGradient
204 |                       accessible={true}
205 |                       onResponderGrant={[Function]}
206 |                       onResponderMove={[Function]}
207 |                       onResponderRelease={[Function]}
208 |                       onResponderTerminate={[Function]}
209 |                       onResponderTerminationRequest={[Function]}
210 |                       onStartShouldSetResponder={[Function]}
211 |                       proxiedProperties={
212 |                         Object {
213 |                           "colors": Array [
214 |                             4294967295,
215 |                             4294901760,
216 |                           ],
217 |                           "endPoint": Array [
218 |                             1,
219 |                             0.5,
220 |                           ],
221 |                           "focusable": true,
222 |                           "locations": undefined,
223 |                           "onClick": [Function],
224 |                           "startPoint": Array [
225 |                             0,
226 |                             0.5,
227 |                           ],
228 |                         }
229 |                       }
230 |                       style={
231 |                         Object {
232 |                           "borderRadius": 0,
233 |                         }
234 |                       }
235 |                     >
236 |                       <ViewManagerAdapter_ExpoLinearGradient
237 |                         accessible={true}
238 |                         onResponderGrant={[Function]}
239 |                         onResponderMove={[Function]}
240 |                         onResponderRelease={[Function]}
241 |                         onResponderTerminate={[Function]}
242 |                         onResponderTerminationRequest={[Function]}
243 |                         onStartShouldSetResponder={[Function]}
244 |                         proxiedProperties={
245 |                           Object {
246 |                             "colors": Array [
247 |                               4294967295,
248 |                               4294901760,
249 |                             ],
250 |                             "endPoint": Array [
251 |                               1,
252 |                               0.5,
253 |                             ],
254 |                             "focusable": true,
255 |                             "locations": undefined,
256 |                             "onClick": [Function],
257 |                             "startPoint": Array [
258 |                               0,
259 |                               0.5,
260 |                             ],
261 |                           }
262 |                         }
263 |                         style={
264 |                           Object {
265 |                             "borderRadius": 0,
266 |                           }
267 |                         }
268 |                       >
269 |                         <LinearGradient
270 |                           colors={
271 |                             Array [
272 |                               "rgba(0, 0, 0, 0)",
273 |                               "#000",
274 |                             ]
275 |                           }
276 |                         >
277 |                           <NativeLinearGradient
278 |                             colors={
279 |                               Array [
280 |                                 0,
281 |                                 4278190080,
282 |                               ]
283 |                             }
284 |                           >
285 |                             <ForwardRef(Adapter<ExpoLinearGradient>)
286 |                               colors={
287 |                                 Array [
288 |                                   0,
289 |                                   4278190080,
290 |                                 ]
291 |                               }
292 |                             >
293 |                               <ViewManagerAdapter_ExpoLinearGradient
294 |                                 proxiedProperties={
295 |                                   Object {
296 |                                     "colors": Array [
297 |                                       0,
298 |                                       4278190080,
299 |                                     ],
300 |                                     "endPoint": undefined,
301 |                                     "locations": undefined,
302 |                                     "startPoint": undefined,
303 |                                   }
304 |                                 }
305 |                               >
306 |                                 <ViewManagerAdapter_ExpoLinearGradient
307 |                                   proxiedProperties={
308 |                                     Object {
309 |                                       "colors": Array [
310 |                                         0,
311 |                                         4278190080,
312 |                                       ],
313 |                                       "endPoint": undefined,
314 |                                       "locations": undefined,
315 |                                       "startPoint": undefined,
316 |                                     }
317 |                                   }
318 |                                 >
319 |                                   <View
320 |                                     style={
321 |                                       Object {
322 |                                         "height": 200,
323 |                                         "width": 200,
324 |                                       }
325 |                                     }
326 |                                   >
327 |                                     <View
328 |                                       style={
329 |                                         Object {
330 |                                           "height": 200,
331 |                                           "width": 200,
332 |                                         }
333 |                                       }
334 |                                     />
335 |                                   </View>
336 |                                 </ViewManagerAdapter_ExpoLinearGradient>
337 |                               </ViewManagerAdapter_ExpoLinearGradient>
338 |                             </ForwardRef(Adapter<ExpoLinearGradient>)>
339 |                           </NativeLinearGradient>
340 |                         </LinearGradient>
341 |                       </ViewManagerAdapter_ExpoLinearGradient>
342 |                     </ViewManagerAdapter_ExpoLinearGradient>
343 |                   </ForwardRef(Adapter<ExpoLinearGradient>)>
344 |                 </NativeLinearGradient>
345 |               </LinearGradient>
346 |             </TouchableWithoutFeedback>
347 |             <View
348 |               onMoveShouldSetResponder={[Function]}
349 |               onMoveShouldSetResponderCapture={[Function]}
350 |               onResponderEnd={[Function]}
351 |               onResponderGrant={[Function]}
352 |               onResponderMove={[Function]}
353 |               onResponderReject={[Function]}
354 |               onResponderRelease={[Function]}
355 |               onResponderStart={[Function]}
356 |               onResponderTerminate={[Function]}
357 |               onResponderTerminationRequest={[Function]}
358 |               onStartShouldSetResponder={[Function]}
359 |               onStartShouldSetResponderCapture={[Function]}
360 |               style={
361 |                 Array [
362 |                   Object {
363 |                     "borderColor": "#fff",
364 |                     "left": 0,
365 |                     "position": "absolute",
366 |                     "top": 0,
367 |                   },
368 |                   Object {
369 |                     "backgroundColor": "#ff0000",
370 |                     "borderRadius": 12,
371 |                     "borderWidth": 2.4,
372 |                     "height": 24,
373 |                     "transform": Array [
374 |                       Object {
375 |                         "translateX": 200,
376 |                       },
377 |                       Object {
378 |                         "translateY": 0,
379 |                       },
380 |                     ],
381 |                     "width": 24,
382 |                   },
383 |                 ]
384 |               }
385 |             >
386 |               <View
387 |                 onMoveShouldSetResponder={[Function]}
388 |                 onMoveShouldSetResponderCapture={[Function]}
389 |                 onResponderEnd={[Function]}
390 |                 onResponderGrant={[Function]}
391 |                 onResponderMove={[Function]}
392 |                 onResponderReject={[Function]}
393 |                 onResponderRelease={[Function]}
394 |                 onResponderStart={[Function]}
395 |                 onResponderTerminate={[Function]}
396 |                 onResponderTerminationRequest={[Function]}
397 |                 onStartShouldSetResponder={[Function]}
398 |                 onStartShouldSetResponderCapture={[Function]}
399 |                 style={
400 |                   Array [
401 |                     Object {
402 |                       "borderColor": "#fff",
403 |                       "left": 0,
404 |                       "position": "absolute",
405 |                       "top": 0,
406 |                     },
407 |                     Object {
408 |                       "backgroundColor": "#ff0000",
409 |                       "borderRadius": 12,
410 |                       "borderWidth": 2.4,
411 |                       "height": 24,
412 |                       "transform": Array [
413 |                         Object {
414 |                           "translateX": 200,
415 |                         },
416 |                         Object {
417 |                           "translateY": 0,
418 |                         },
419 |                       ],
420 |                       "width": 24,
421 |                     },
422 |                   ]
423 |                 }
424 |               />
425 |             </View>
426 |           </View>
427 |         </View>
428 |       </SaturationValuePicker>
429 |       <HuePicker
430 |         barHeight={200}
431 |         barWidth={12}
432 |         borderRadius={0}
433 |         containerStyle={Object {}}
434 |         hue={0}
435 |         onDragEnd={null}
436 |         onDragMove={null}
437 |         onDragStart={null}
438 |         onDragTerminate={null}
439 |         onPress={null}
440 |         sliderSize={24}
441 |       >
442 |         <View
443 |           style={
444 |             Array [
445 |               Object {
446 |                 "alignItems": "center",
447 |                 "justifyContent": "center",
448 |               },
449 |               Object {},
450 |               Object {
451 |                 "paddingBottom": 12,
452 |                 "paddingLeft": 6,
453 |                 "paddingRight": 6,
454 |                 "paddingTop": 12,
455 |               },
456 |             ]
457 |           }
458 |         >
459 |           <View
460 |             style={
461 |               Array [
462 |                 Object {
463 |                   "alignItems": "center",
464 |                   "justifyContent": "center",
465 |                 },
466 |                 Object {},
467 |                 Object {
468 |                   "paddingBottom": 12,
469 |                   "paddingLeft": 6,
470 |                   "paddingRight": 6,
471 |                   "paddingTop": 12,
472 |                 },
473 |               ]
474 |             }
475 |           >
476 |             <TouchableWithoutFeedback
477 |               onPress={[Function]}
478 |             >
479 |               <LinearGradient
480 |                 accessible={true}
481 |                 colors={
482 |                   Array [
483 |                     "#ff0000",
484 |                     "#ffff00",
485 |                     "#00ff00",
486 |                     "#00ffff",
487 |                     "#0000ff",
488 |                     "#ff00ff",
489 |                     "#ff0000",
490 |                   ]
491 |                 }
492 |                 focusable={true}
493 |                 onClick={[Function]}
494 |                 onResponderGrant={[Function]}
495 |                 onResponderMove={[Function]}
496 |                 onResponderRelease={[Function]}
497 |                 onResponderTerminate={[Function]}
498 |                 onResponderTerminationRequest={[Function]}
499 |                 onStartShouldSetResponder={[Function]}
500 |                 style={
501 |                   Object {
502 |                     "borderRadius": 0,
503 |                   }
504 |                 }
505 |               >
506 |                 <NativeLinearGradient
507 |                   accessible={true}
508 |                   colors={
509 |                     Array [
510 |                       4294901760,
511 |                       4294967040,
512 |                       4278255360,
513 |                       4278255615,
514 |                       4278190335,
515 |                       4294902015,
516 |                       4294901760,
517 |                     ]
518 |                   }
519 |                   focusable={true}
520 |                   onClick={[Function]}
521 |                   onResponderGrant={[Function]}
522 |                   onResponderMove={[Function]}
523 |                   onResponderRelease={[Function]}
524 |                   onResponderTerminate={[Function]}
525 |                   onResponderTerminationRequest={[Function]}
526 |                   onStartShouldSetResponder={[Function]}
527 |                   style={
528 |                     Object {
529 |                       "borderRadius": 0,
530 |                     }
531 |                   }
532 |                 >
533 |                   <ForwardRef(Adapter<ExpoLinearGradient>)
534 |                     accessible={true}
535 |                     colors={
536 |                       Array [
537 |                         4294901760,
538 |                         4294967040,
539 |                         4278255360,
540 |                         4278255615,
541 |                         4278190335,
542 |                         4294902015,
543 |                         4294901760,
544 |                       ]
545 |                     }
546 |                     focusable={true}
547 |                     onClick={[Function]}
548 |                     onResponderGrant={[Function]}
549 |                     onResponderMove={[Function]}
550 |                     onResponderRelease={[Function]}
551 |                     onResponderTerminate={[Function]}
552 |                     onResponderTerminationRequest={[Function]}
553 |                     onStartShouldSetResponder={[Function]}
554 |                     style={
555 |                       Object {
556 |                         "borderRadius": 0,
557 |                       }
558 |                     }
559 |                   >
560 |                     <ViewManagerAdapter_ExpoLinearGradient
561 |                       accessible={true}
562 |                       onResponderGrant={[Function]}
563 |                       onResponderMove={[Function]}
564 |                       onResponderRelease={[Function]}
565 |                       onResponderTerminate={[Function]}
566 |                       onResponderTerminationRequest={[Function]}
567 |                       onStartShouldSetResponder={[Function]}
568 |                       proxiedProperties={
569 |                         Object {
570 |                           "colors": Array [
571 |                             4294901760,
572 |                             4294967040,
573 |                             4278255360,
574 |                             4278255615,
575 |                             4278190335,
576 |                             4294902015,
577 |                             4294901760,
578 |                           ],
579 |                           "endPoint": undefined,
580 |                           "focusable": true,
581 |                           "locations": undefined,
582 |                           "onClick": [Function],
583 |                           "startPoint": undefined,
584 |                         }
585 |                       }
586 |                       style={
587 |                         Object {
588 |                           "borderRadius": 0,
589 |                         }
590 |                       }
591 |                     >
592 |                       <ViewManagerAdapter_ExpoLinearGradient
593 |                         accessible={true}
594 |                         onResponderGrant={[Function]}
595 |                         onResponderMove={[Function]}
596 |                         onResponderRelease={[Function]}
597 |                         onResponderTerminate={[Function]}
598 |                         onResponderTerminationRequest={[Function]}
599 |                         onStartShouldSetResponder={[Function]}
600 |                         proxiedProperties={
601 |                           Object {
602 |                             "colors": Array [
603 |                               4294901760,
604 |                               4294967040,
605 |                               4278255360,
606 |                               4278255615,
607 |                               4278190335,
608 |                               4294902015,
609 |                               4294901760,
610 |                             ],
611 |                             "endPoint": undefined,
612 |                             "focusable": true,
613 |                             "locations": undefined,
614 |                             "onClick": [Function],
615 |                             "startPoint": undefined,
616 |                           }
617 |                         }
618 |                         style={
619 |                           Object {
620 |                             "borderRadius": 0,
621 |                           }
622 |                         }
623 |                       >
624 |                         <View
625 |                           style={
626 |                             Object {
627 |                               "height": 200,
628 |                               "width": 12,
629 |                             }
630 |                           }
631 |                         >
632 |                           <View
633 |                             style={
634 |                               Object {
635 |                                 "height": 200,
636 |                                 "width": 12,
637 |                               }
638 |                             }
639 |                           />
640 |                         </View>
641 |                       </ViewManagerAdapter_ExpoLinearGradient>
642 |                     </ViewManagerAdapter_ExpoLinearGradient>
643 |                   </ForwardRef(Adapter<ExpoLinearGradient>)>
644 |                 </NativeLinearGradient>
645 |               </LinearGradient>
646 |             </TouchableWithoutFeedback>
647 |             <AnimatedComponent
648 |               onMoveShouldSetResponder={[Function]}
649 |               onMoveShouldSetResponderCapture={[Function]}
650 |               onResponderEnd={[Function]}
651 |               onResponderGrant={[Function]}
652 |               onResponderMove={[Function]}
653 |               onResponderReject={[Function]}
654 |               onResponderRelease={[Function]}
655 |               onResponderStart={[Function]}
656 |               onResponderTerminate={[Function]}
657 |               onResponderTerminationRequest={[Function]}
658 |               onStartShouldSetResponder={[Function]}
659 |               onStartShouldSetResponderCapture={[Function]}
660 |               style={
661 |                 Array [
662 |                   Object {
663 |                     "borderColor": "#fff",
664 |                     "position": "absolute",
665 |                     "top": 0,
666 |                   },
667 |                   Object {
668 |                     "backgroundColor": "#ff0000",
669 |                     "borderRadius": 12,
670 |                     "borderWidth": 2.4,
671 |                     "height": 24,
672 |                     "transform": Array [
673 |                       Object {
674 |                         "translateY": 0,
675 |                       },
676 |                     ],
677 |                     "width": 24,
678 |                   },
679 |                 ]
680 |               }
681 |             >
682 |               <View
683 |                 onMoveShouldSetResponder={[Function]}
684 |                 onMoveShouldSetResponderCapture={[Function]}
685 |                 onResponderEnd={[Function]}
686 |                 onResponderGrant={[Function]}
687 |                 onResponderMove={[Function]}
688 |                 onResponderReject={[Function]}
689 |                 onResponderRelease={[Function]}
690 |                 onResponderStart={[Function]}
691 |                 onResponderTerminate={[Function]}
692 |                 onResponderTerminationRequest={[Function]}
693 |                 onStartShouldSetResponder={[Function]}
694 |                 onStartShouldSetResponderCapture={[Function]}
695 |                 style={
696 |                   Object {
697 |                     "backgroundColor": "#ff0000",
698 |                     "borderColor": "#fff",
699 |                     "borderRadius": 12,
700 |                     "borderWidth": 2.4,
701 |                     "height": 24,
702 |                     "position": "absolute",
703 |                     "top": 0,
704 |                     "transform": Array [
705 |                       Object {
706 |                         "translateY": 0,
707 |                       },
708 |                     ],
709 |                     "width": 24,
710 |                   }
711 |                 }
712 |               >
713 |                 <View
714 |                   onMoveShouldSetResponder={[Function]}
715 |                   onMoveShouldSetResponderCapture={[Function]}
716 |                   onResponderEnd={[Function]}
717 |                   onResponderGrant={[Function]}
718 |                   onResponderMove={[Function]}
719 |                   onResponderReject={[Function]}
720 |                   onResponderRelease={[Function]}
721 |                   onResponderStart={[Function]}
722 |                   onResponderTerminate={[Function]}
723 |                   onResponderTerminationRequest={[Function]}
724 |                   onStartShouldSetResponder={[Function]}
725 |                   onStartShouldSetResponderCapture={[Function]}
726 |                   style={
727 |                     Object {
728 |                       "backgroundColor": "#ff0000",
729 |                       "borderColor": "#fff",
730 |                       "borderRadius": 12,
731 |                       "borderWidth": 2.4,
732 |                       "height": 24,
733 |                       "position": "absolute",
734 |                       "top": 0,
735 |                       "transform": Array [
736 |                         Object {
737 |                           "translateY": 0,
738 |                         },
739 |                       ],
740 |                       "width": 24,
741 |                     }
742 |                   }
743 |                 />
744 |               </View>
745 |             </AnimatedComponent>
746 |           </View>
747 |         </View>
748 |       </HuePicker>
749 |     </View>
750 |   </View>
751 | </HsvColorPicker>
752 | `;
753 | 


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