├── .github
└── FUNDING.yml
├── .npmignore
├── LICENSE
├── README.md
├── Screenshots
└── basic_android.png
├── brightness_mask.png
├── coolWarm.js
├── coolWarm.png
├── h.js
├── index.js
├── package.json
├── rainbow_slider.png
├── s.js
├── saturation_mask.png
├── saturation_mask.svg
└── v.js
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://Alipay/flyskywhy@gmail.com', 'https://EthAddress/0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e']
13 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020-present Li Zheng
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## react-native-slider-color-picker
2 |
3 | [](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm")
4 | [](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm")
5 | [](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm")
6 | [](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm")
7 |
8 | A color picker on 3 gradient image HSV palette slider.
9 |
10 |
11 |
12 | ## Install
13 |
14 | For RN >= 0.60
15 | ```shell
16 | npm i --save react-native-slider-color-picker react-native-gesture-handler
17 | ```
18 |
19 | For RN < 0.60
20 | ```shell
21 | npm i --save react-native-slider-color-picker@2.1.x react-native-gesture-handler@1.2.2
22 | ```
23 |
24 | And be aware of https://github.com/software-mansion/react-native-gesture-handler/issues/1164 if you use react-native-web and want to slide on web.
25 |
26 | ## Usage
27 |
28 | ```jsx
29 | import React from 'react';
30 | import {
31 | SliderHuePicker,
32 | SliderSaturationPicker,
33 | SliderValuePicker,
34 | // SliderCoolWarmPicker, // usage of SliderCoolWarmPicker please ref to here and coolWarm.js
35 | // minColorTemperature,
36 | // maxColorTemperature
37 | } from 'react-native-slider-color-picker';
38 | import {
39 | AppRegistry,
40 | Dimensions,
41 | StyleSheet,
42 | Text,
43 | View,
44 | } from 'react-native';
45 |
46 | // if react-native-gesture-handler@1.x, no need
47 | // but just , ref to
48 | // https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot/
49 | // You should put in your root component,
50 | // example below is just playing the role of a root component
51 | import {GestureHandlerRootView} from 'react-native-gesture-handler';
52 |
53 | import tinycolor from 'tinycolor2';
54 |
55 | const {
56 | width,
57 | } = Dimensions.get('window');
58 |
59 | export default class SliderColorPickerExample extends React.Component {
60 | constructor(props) {
61 | super(props);
62 | this.state = {
63 | oldColor: "#FF7700",
64 | };
65 | }
66 |
67 | changeColor = (colorHsvOrRgb, resType) => {
68 | if (resType === 'end') {
69 | this.setState({
70 | oldColor: tinycolor(colorHsvOrRgb).toHexString(),
71 | });
72 | }
73 | }
74 |
75 | render() {
76 | const {
77 | oldColor,
78 | } = this.state;
79 |
80 | return (
81 |
82 |
83 | {this.sliderHuePicker = view;}}
85 | oldColor={oldColor}
86 | trackStyle={[{height: 12, width: width - 48}]}
87 | thumbStyle={styles.thumb}
88 | useNativeDriver={true}
89 | onColorChange={this.changeColor}
90 | />
91 |
92 |
93 | {this.sliderSaturationPicker = view;}}
95 | oldColor={oldColor}
96 | trackStyle={[{height: 12, width: width - 48}]}
97 | thumbStyle={styles.thumb}
98 | useNativeDriver={true}
99 | onColorChange={this.changeColor}
100 | style={{height: 12, borderRadius: 6, backgroundColor: tinycolor({h: tinycolor(oldColor).toHsv().h, s: 1, v: 1}).toHexString()}}
101 | />
102 |
103 |
104 | {this.sliderValuePicker = view;}}
106 | oldColor={oldColor}
107 | minimumValue={0.02}
108 | step={0.05}
109 | trackStyle={[{height: 12, width: width - 48}]}
110 | trackImage={require('react-native-slider-color-picker/brightness_mask.png')}
111 | thumbStyle={styles.thumb}
112 | onColorChange={this.changeColor}
113 | style={{height: 12, borderRadius: 6, backgroundColor: 'black'}}
114 | />
115 |
116 |
117 | );
118 | }
119 | }
120 |
121 | const styles = StyleSheet.create({
122 | container: {
123 | flex: 1,
124 | alignItems: "center",
125 | },
126 | thumb: {
127 | width: 20,
128 | height: 20,
129 | borderColor: 'white',
130 | borderWidth: 1,
131 | borderRadius: 10,
132 | shadowColor: 'black',
133 | shadowOffset: {
134 | width: 0,
135 | height: 2
136 | },
137 | shadowRadius: 2,
138 | shadowOpacity: 0.35,
139 | },
140 | });
141 | ```
142 |
143 | `` won't use trackImage by default, you can ref to `trackImage={require('react-native-slider-color-picker/brightness_mask.png')}` described above.
144 |
145 |
146 | ## Props
147 |
148 | Prop | Type | Optional | Default | Description
149 | --------------------- | -------- | -------- | ------------------------- | -----------
150 | oldColor | [Color string](https://github.com/bgrins/TinyColor#accepted-string-input) | Yes | undefined | Initial value of the slider
151 | minimumValue | number | Yes | 0(h) or 0.01(s, v) | Initial minimum value of the slider
152 | maximumValue | number | Yes | 359(h) or 1(s, v) | Initial maximum value of the slider
153 | step | number | Yes | 1(h) or 0.01(s, v) | Step value of the slider. The value should be between 0 and maximumValue - minimumValue)
154 | minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the v track to the left of the button
155 | maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the v track to the right of the button
156 | moveVelocityThreshold | number | Yes | 2000 | Prevent onColorChange if the dragging movement speed is over the moveVelocityThreshold
157 | onColorChange | function | Yes | | Callback continuously called while the user is dragging the slider and the dragging movement speed is below the moveVelocityThreshold. The 1st argument is color in HSV representation (see below). There is 2nd string argument 'end' when the slider is released
158 | style | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container
159 | trackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track
160 | trackImage | [source](http://facebook.github.io/react-native/docs/image.html#source) | Yes | rainbow_slider.png(h) or saturation_mask.png(s) | Sets an image for the track.
161 | thumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb
162 | useNativeDriver | bool | Yes | false | The useNativeDriver parameter in Animated used by react-native-gesture-handler when the user change the value. Default value is false, because some Android phone [PanGestureHandler causes Animated Value to jump when using native driver](https://github.com/software-mansion/react-native-gesture-handler/issues/984)
163 |
164 | HSV color representation is an object literal with properties:
165 |
166 | ```javascript
167 | {
168 | h: number, // <0, 360>
169 | s: number, // <0, 1>
170 | v: number, // <0, 1>
171 | }
172 |
173 | ```
174 |
175 | ## Donate
176 | To support my work, please consider donate.
177 |
178 | - ETH: 0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e
179 |
180 | -
181 |
--------------------------------------------------------------------------------
/Screenshots/basic_android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyskywhy/react-native-slider-color-picker/73b6044bc72ae5787469ac8f41cd853f80d9126d/Screenshots/basic_android.png
--------------------------------------------------------------------------------
/brightness_mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyskywhy/react-native-slider-color-picker/73b6044bc72ae5787469ac8f41cd853f80d9126d/brightness_mask.png
--------------------------------------------------------------------------------
/coolWarm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | StyleSheet,
5 | View,
6 | } from 'react-native';
7 | import Immutable from 'immutable';
8 | import Slider from 'react-native-smooth-slider';
9 | import {ImagePropTypes} from 'deprecated-react-native-prop-types';
10 |
11 | export const minColorTemperature = 2000;
12 | export const maxColorTemperature = 12000;
13 |
14 | export class SliderCoolWarmPicker extends React.Component {
15 |
16 | constructor(props, ctx) {
17 | super(props, ctx);
18 |
19 | const state = {
20 | oldColorTemperature: props.oldColorTemperature,
21 |
22 | colorTemperature: 2000,
23 | };
24 | if (props.oldColorTemperature) {
25 | state.colorTemperature = props.oldColorTemperature;
26 | }
27 | if (props.defaultColorTemperature) {
28 | state.colorTemperature = props.defaultColorTemperature;
29 | }
30 | this.state = state;
31 | }
32 |
33 | shouldComponentUpdate(nextProps, nextState = {}) {
34 | return !Immutable.is(Immutable.fromJS(this.props), Immutable.fromJS(nextProps))
35 | || !Immutable.is(Immutable.fromJS(this.state), Immutable.fromJS(nextState));
36 | }
37 |
38 | static getDerivedStateFromProps(nextProps, prevState) {
39 | if (nextProps.oldColorTemperature !== prevState.oldColorTemperature) {
40 | return {
41 | oldColorTemperature: nextProps.oldColorTemperature,
42 |
43 | colorTemperature: nextProps.oldColorTemperature,
44 | };
45 | }
46 |
47 | return null;
48 | }
49 |
50 | static propTypes = {
51 | colorTemperature: PropTypes.number,
52 | defaultColorTemperature: PropTypes.number,
53 | oldColorTemperature: PropTypes.number,
54 | onColorTemperatureChange: PropTypes.func,
55 | minimumValue: PropTypes.number,
56 | maximumValue: PropTypes.number,
57 | step: PropTypes.number,
58 | moveVelocityThreshold: PropTypes.number, // Prevent onValueChange if slide too faster
59 | trackImage: ImagePropTypes.source,
60 |
61 | /**
62 | * The useNativeDriver parameter in Animated used by react-native-gesture-handler when the user change the value.
63 | * Default value is false, because some Android phone [PanGestureHandler causes Animated Value to jump when using native driver](https://github.com/software-mansion/react-native-gesture-handler/issues/984)
64 | */
65 | useNativeDriver: PropTypes.bool,
66 | };
67 |
68 | static defaultProps = {
69 | minimumValue: minColorTemperature,
70 | maximumValue: maxColorTemperature,
71 | step: 100,
72 | moveVelocityThreshold: 2000,
73 | trackImage: require('./coolWarm.png'),
74 | useNativeDriver: false,
75 | };
76 |
77 | getColorTemperature() {
78 | return typeof this.props.colorTemperature === 'number' ?
79 | this.props.colorTemperature :
80 | this.state.colorTemperature;
81 | }
82 |
83 | setOldColorTemperature = oldColorTemperature => {
84 | this.setState({
85 | colorTemperature: oldColorTemperature,
86 | });
87 | }
88 |
89 | _onColorTemperatureChange(x, resType) {
90 | let colorTemperature = x;
91 | this.setState({
92 | colorTemperature,
93 | });
94 |
95 | if (this.props.onColorTemperatureChange) {
96 | this.props.onColorTemperatureChange(colorTemperature, resType);
97 | }
98 | }
99 |
100 | render() {
101 | const {
102 | colorTemperature,
103 | } = this.state;
104 | const {
105 | style,
106 | trackStyle,
107 | trackImage,
108 | thumbStyle,
109 | minimumValue,
110 | maximumValue,
111 | step,
112 | moveVelocityThreshold,
113 | useNativeDriver,
114 | } = this.props;
115 |
116 | let thumbColor = '#fff4e5';
117 |
118 | return (
119 |
120 | this._onColorTemperatureChange(value)}
132 | onSlidingComplete={value => this._onColorTemperatureChange(value, 'end')}/>
133 |
134 | );
135 | }
136 |
137 | }
138 |
139 | const styles = StyleSheet.create({
140 | container: {
141 | backgroundColor: 'transparent',
142 | flex: 1,
143 | alignItems: 'stretch',
144 | justifyContent: 'center',
145 | },
146 | });
147 |
--------------------------------------------------------------------------------
/coolWarm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyskywhy/react-native-slider-color-picker/73b6044bc72ae5787469ac8f41cd853f80d9126d/coolWarm.png
--------------------------------------------------------------------------------
/h.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | StyleSheet,
5 | View,
6 | } from 'react-native';
7 | import Immutable from 'immutable';
8 | import tinycolor from 'tinycolor2';
9 | import Slider from 'react-native-smooth-slider';
10 | import {ImagePropTypes} from 'deprecated-react-native-prop-types';
11 |
12 | export class SliderHuePicker extends React.Component {
13 |
14 | constructor(props, ctx) {
15 | super(props, ctx);
16 |
17 | const state = {
18 | oldColor: props.oldColor,
19 |
20 | color: {
21 | h: 0,
22 | s: 1,
23 | v: 1,
24 | },
25 | };
26 | if (props.oldColor) {
27 | state.color = tinycolor(props.oldColor).toHsv();
28 | }
29 | if (props.defaultColor) {
30 | state.color = tinycolor(props.defaultColor).toHsv();
31 | }
32 | this.state = state;
33 | }
34 |
35 | shouldComponentUpdate(nextProps, nextState = {}) {
36 | return !Immutable.is(Immutable.fromJS(this.props), Immutable.fromJS(nextProps))
37 | || !Immutable.is(Immutable.fromJS(this.state), Immutable.fromJS(nextState));
38 | }
39 |
40 | static getDerivedStateFromProps(nextProps, prevState) {
41 | if (nextProps.oldColor !== prevState.oldColor) {
42 | return {
43 | oldColor: nextProps.oldColor,
44 |
45 | color: tinycolor(nextProps.oldColor).toHsv(),
46 | };
47 | }
48 |
49 | return null;
50 | }
51 |
52 | static propTypes = {
53 | color: PropTypes.oneOfType([
54 | PropTypes.string,
55 | PropTypes.shape({
56 | h: PropTypes.number,
57 | s: PropTypes.number,
58 | v: PropTypes.number
59 | }),
60 | ]),
61 | defaultColor: PropTypes.string,
62 | oldColor: PropTypes.string,
63 | onColorChange: PropTypes.func,
64 | minimumValue: PropTypes.number,
65 | maximumValue: PropTypes.number,
66 | step: PropTypes.number,
67 | moveVelocityThreshold: PropTypes.number, // Prevent onValueChange if slide too faster
68 | trackImage: ImagePropTypes.source,
69 |
70 | /**
71 | * The useNativeDriver parameter in Animated used by react-native-gesture-handler when the user change the value.
72 | * Default value is false, because some Android phone [PanGestureHandler causes Animated Value to jump when using native driver](https://github.com/software-mansion/react-native-gesture-handler/issues/984)
73 | */
74 | useNativeDriver: PropTypes.bool,
75 | };
76 |
77 | static defaultProps = {
78 | minimumValue: 0,
79 | maximumValue: 359, // 360 will cause h to 0 too, so 359 by default
80 | step: 1,
81 | moveVelocityThreshold: 2000,
82 | trackImage: require('./rainbow_slider.png'),
83 | useNativeDriver: false,
84 | };
85 |
86 | getColor() {
87 | const passedColor = typeof this.props.color === 'string' ?
88 | this.props.color :
89 | tinycolor(this.props.color).toHexString();
90 | return passedColor || tinycolor(this.state.color).toHexString();
91 | }
92 |
93 | setOldColor = oldColor => {
94 | this.setState({
95 | color: tinycolor(oldColor).toHsv(),
96 | });
97 | }
98 |
99 | _onColorChange(x, resType) {
100 | let color = {
101 | ...this.state.color,
102 | h: x,
103 | };
104 | this.setState({
105 | color,
106 | });
107 |
108 | if (this.props.onColorChange) {
109 | this.props.onColorChange(color, resType);
110 | }
111 | }
112 |
113 | render() {
114 | const {
115 | color,
116 | } = this.state;
117 | const {
118 | style,
119 | trackStyle,
120 | trackImage,
121 | thumbStyle,
122 | minimumValue,
123 | maximumValue,
124 | step,
125 | moveVelocityThreshold,
126 | useNativeDriver,
127 | } = this.props;
128 |
129 | let thumbColor = tinycolor({
130 | h: color.h,
131 | s: 1,
132 | v: 1,
133 | }).toHexString();
134 |
135 | return (
136 |
137 | this._onColorChange(value)}
149 | onSlidingComplete={value => this._onColorChange(value, 'end')}/>
150 |
151 | );
152 | }
153 |
154 | }
155 |
156 | const styles = StyleSheet.create({
157 | container: {
158 | backgroundColor: 'transparent',
159 | flex: 1,
160 | alignItems: 'stretch',
161 | justifyContent: 'center',
162 | },
163 | });
164 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | export { SliderHuePicker } from './h'
2 | export { SliderSaturationPicker } from './s'
3 | export { SliderValuePicker } from './v'
4 | export { SliderCoolWarmPicker, minColorTemperature, maxColorTemperature } from './coolWarm'
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-slider-color-picker",
3 | "version": "2.2.6",
4 | "description": "A color picker on 3 gradient image HSV palette slider",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "dependencies": {
10 | "immutable": "^3.8.2",
11 | "prop-types": "^15.5.10",
12 | "react-native-smooth-slider": "1.3.9",
13 | "tinycolor2": "^1.4.1"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/flyskywhy/react-native-slider-color-picker.git"
18 | },
19 | "keywords": [
20 | "android",
21 | "color",
22 | "color-picker",
23 | "gradient",
24 | "hsb",
25 | "hsv",
26 | "ios",
27 | "palette",
28 | "react-native",
29 | "react-native-gesture-handler",
30 | "react-native-smooth-slider",
31 | "rgb",
32 | "slider"
33 | ],
34 | "author": "Li Zheng",
35 | "funding": [{
36 | "type": "individual",
37 | "url": "https://Alipay/flyskywhy@gmail.com"
38 | },{
39 | "type": "individual",
40 | "url": "https://EthAddress/0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e"
41 | }],
42 | "license": "MIT",
43 | "bugs": {
44 | "url": "https://github.com/flyskywhy/react-native-slider-color-picker/issues"
45 | },
46 | "homepage": "https://github.com/flyskywhy/react-native-slider-color-picker#readme"
47 | }
48 |
--------------------------------------------------------------------------------
/rainbow_slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyskywhy/react-native-slider-color-picker/73b6044bc72ae5787469ac8f41cd853f80d9126d/rainbow_slider.png
--------------------------------------------------------------------------------
/s.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | StyleSheet,
5 | View,
6 | } from 'react-native';
7 | import Immutable from 'immutable';
8 | import tinycolor from 'tinycolor2';
9 | import Slider from 'react-native-smooth-slider';
10 | import {ImagePropTypes} from 'deprecated-react-native-prop-types';
11 |
12 | export class SliderSaturationPicker extends React.Component {
13 |
14 | constructor(props, ctx) {
15 | super(props, ctx);
16 |
17 | const state = {
18 | oldColor: props.oldColor,
19 |
20 | color: {
21 | h: 0,
22 | s: 1,
23 | v: 1,
24 | },
25 | };
26 | if (props.oldColor) {
27 | state.color = tinycolor(props.oldColor).toHsv();
28 | }
29 | if (props.defaultColor) {
30 | state.color = tinycolor(props.defaultColor).toHsv();
31 | }
32 | this.state = state;
33 | }
34 |
35 | shouldComponentUpdate(nextProps, nextState = {}) {
36 | return !Immutable.is(Immutable.fromJS(this.props), Immutable.fromJS(nextProps))
37 | || !Immutable.is(Immutable.fromJS(this.state), Immutable.fromJS(nextState));
38 | }
39 |
40 | static getDerivedStateFromProps(nextProps, prevState) {
41 | if (nextProps.oldColor !== prevState.oldColor) {
42 | return {
43 | oldColor: nextProps.oldColor,
44 |
45 | color: tinycolor(nextProps.oldColor).toHsv(),
46 | };
47 | }
48 |
49 | return null;
50 | }
51 |
52 | static propTypes = {
53 | color: PropTypes.oneOfType([
54 | PropTypes.string,
55 | PropTypes.shape({
56 | h: PropTypes.number,
57 | s: PropTypes.number,
58 | v: PropTypes.number
59 | }),
60 | ]),
61 | defaultColor: PropTypes.string,
62 | oldColor: PropTypes.string,
63 | onColorChange: PropTypes.func,
64 | minimumValue: PropTypes.number,
65 | maximumValue: PropTypes.number,
66 | step: PropTypes.number,
67 | moveVelocityThreshold: PropTypes.number, // Prevent onValueChange if slide too faster
68 | trackImage: ImagePropTypes.source,
69 |
70 | /**
71 | * The useNativeDriver parameter in Animated used by react-native-gesture-handler when the user change the value.
72 | * Default value is false, because some Android phone [PanGestureHandler causes Animated Value to jump when using native driver](https://github.com/software-mansion/react-native-gesture-handler/issues/984)
73 | */
74 | useNativeDriver: PropTypes.bool,
75 | };
76 |
77 | static defaultProps = {
78 | minimumValue: 0.01, // 0 will cause h to 0 too, so 0.01 by default
79 | maximumValue: 1,
80 | step: 0.01,
81 | moveVelocityThreshold: 2000,
82 | trackImage: require('./saturation_mask.png'),
83 | useNativeDriver: false,
84 | };
85 |
86 | getColor() {
87 | const passedColor = typeof this.props.color === 'string' ?
88 | this.props.color :
89 | tinycolor(this.props.color).toHexString();
90 | return passedColor || tinycolor(this.state.color).toHexString();
91 | }
92 |
93 | setOldColor = oldColor => {
94 | this.setState({
95 | color: tinycolor(oldColor).toHsv(),
96 | });
97 | }
98 |
99 | _onColorChange(x, resType) {
100 | let color = {
101 | ...this.state.color,
102 | s: x,
103 | };
104 | this.setState({
105 | color,
106 | });
107 |
108 | if (this.props.onColorChange) {
109 | this.props.onColorChange(color, resType);
110 | }
111 | }
112 |
113 | render() {
114 | const {
115 | color,
116 | } = this.state;
117 | const {
118 | style,
119 | trackStyle,
120 | trackImage,
121 | thumbStyle,
122 | minimumValue,
123 | maximumValue,
124 | step,
125 | moveVelocityThreshold,
126 | useNativeDriver,
127 | } = this.props;
128 |
129 | let thumbColor = tinycolor({
130 | ...color,
131 | v: 1,
132 | }).toHexString();
133 |
134 | return (
135 |
136 | this._onColorChange(value)}
148 | onSlidingComplete={value => this._onColorChange(value, 'end')}/>
149 |
150 | );
151 | }
152 |
153 | }
154 |
155 | const styles = StyleSheet.create({
156 | container: {
157 | backgroundColor: 'transparent',
158 | flex: 1,
159 | alignItems: 'stretch',
160 | justifyContent: 'center',
161 | },
162 | style: {
163 | height: 12,
164 | borderRadius: 6,
165 | backgroundColor: 'red',
166 | },
167 | });
168 |
--------------------------------------------------------------------------------
/saturation_mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyskywhy/react-native-slider-color-picker/73b6044bc72ae5787469ac8f41cd853f80d9126d/saturation_mask.png
--------------------------------------------------------------------------------
/saturation_mask.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
87 |
--------------------------------------------------------------------------------
/v.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | StyleSheet,
5 | View,
6 | } from 'react-native';
7 | import Immutable from 'immutable';
8 | import tinycolor from 'tinycolor2';
9 | import Slider from 'react-native-smooth-slider';
10 |
11 | export class SliderValuePicker extends React.Component {
12 |
13 | constructor(props, ctx) {
14 | super(props, ctx);
15 |
16 | const state = {
17 | oldColor: props.oldColor,
18 |
19 | color: {
20 | h: 0,
21 | s: 1,
22 | v: 1,
23 | },
24 | };
25 | if (props.oldColor) {
26 | state.color = tinycolor(props.oldColor).toHsv();
27 | }
28 | if (props.defaultColor) {
29 | state.color = tinycolor(props.defaultColor).toHsv();
30 | }
31 | this.state = state;
32 | }
33 |
34 | shouldComponentUpdate(nextProps, nextState = {}) {
35 | return !Immutable.is(Immutable.fromJS(this.props), Immutable.fromJS(nextProps))
36 | || !Immutable.is(Immutable.fromJS(this.state), Immutable.fromJS(nextState));
37 | }
38 |
39 | static getDerivedStateFromProps(nextProps, prevState) {
40 | if (nextProps.oldColor !== prevState.oldColor) {
41 | return {
42 | oldColor: nextProps.oldColor,
43 |
44 | color: tinycolor(nextProps.oldColor).toHsv(),
45 | };
46 | }
47 |
48 | return null;
49 | }
50 |
51 | static propTypes = {
52 | color: PropTypes.oneOfType([
53 | PropTypes.string,
54 | PropTypes.shape({
55 | h: PropTypes.number,
56 | s: PropTypes.number,
57 | v: PropTypes.number
58 | }),
59 | ]),
60 | defaultColor: PropTypes.string,
61 | oldColor: PropTypes.string,
62 | onColorChange: PropTypes.func,
63 | minimumValue: PropTypes.number,
64 | maximumValue: PropTypes.number,
65 | step: PropTypes.number,
66 | minimumTrackTintColor: PropTypes.string,
67 | maximumTrackTintColor: PropTypes.string,
68 | moveVelocityThreshold: PropTypes.number, // Prevent onValueChange if slide too faster
69 |
70 | /**
71 | * The useNativeDriver parameter in Animated used by react-native-gesture-handler when the user change the value.
72 | * Default value is false, because some Android phone [PanGestureHandler causes Animated Value to jump when using native driver](https://github.com/software-mansion/react-native-gesture-handler/issues/984)
73 | */
74 | useNativeDriver: PropTypes.bool,
75 | };
76 |
77 | static defaultProps = {
78 | minimumValue: 0.01, // 0 will cause h and s to 0 too, so 0.01 by default
79 | maximumValue: 1,
80 | step: 0.01,
81 | minimumTrackTintColor: '#3f3f3f',
82 | maximumTrackTintColor: '#b3b3b3',
83 | moveVelocityThreshold: 2000,
84 | useNativeDriver: false,
85 | };
86 |
87 | getColor() {
88 | const passedColor = typeof this.props.color === 'string' ?
89 | this.props.color :
90 | tinycolor(this.props.color).toHexString();
91 | return passedColor || tinycolor(this.state.color).toHexString();
92 | }
93 |
94 | setOldColor = oldColor => {
95 | this.setState({
96 | color: tinycolor(oldColor).toHsv(),
97 | });
98 | }
99 |
100 | _onColorChange(x, resType) {
101 | let color = {
102 | ...this.state.color,
103 | v: x,
104 | };
105 | this.setState({
106 | color,
107 | });
108 |
109 | if (this.props.onColorChange) {
110 | this.props.onColorChange(color, resType);
111 | }
112 | }
113 |
114 | render() {
115 | const {
116 | color,
117 | } = this.state;
118 | const {
119 | style,
120 | trackStyle,
121 | trackImage,
122 | thumbStyle,
123 | minimumTrackTintColor,
124 | maximumTrackTintColor,
125 | minimumValue,
126 | maximumValue,
127 | step,
128 | moveVelocityThreshold,
129 | useNativeDriver,
130 | } = this.props;
131 |
132 | let thumbColor = tinycolor({
133 | ...color,
134 | s: 0,
135 | }).toHexString();
136 |
137 | let borderRadius = styles.style.borderRadius;
138 | if (style) {
139 | if (style.hasOwnProperty('borderRadius')) {
140 | borderRadius = style.borderRadius;
141 | } else if (style.hasOwnProperty('height')) {
142 | borderRadius = style.height / 2;
143 | }
144 | }
145 | if (trackStyle) {
146 | if (trackStyle.hasOwnProperty('borderRadius')) {
147 | borderRadius = trackStyle.borderRadius;
148 | } else if (trackStyle.hasOwnProperty('height')) {
149 | borderRadius = trackStyle.height / 2;
150 | }
151 | }
152 |
153 | return (
154 |
155 | this._onColorChange(value)}
169 | onSlidingComplete={value => this._onColorChange(value, 'end')}/>
170 |
171 | );
172 | }
173 |
174 | }
175 |
176 | const styles = StyleSheet.create({
177 | container: {
178 | backgroundColor: 'transparent',
179 | flex: 1,
180 | alignItems: 'stretch',
181 | justifyContent: 'center',
182 | },
183 | style: {
184 | height: 12,
185 | borderRadius: 6,
186 | },
187 | });
188 |
--------------------------------------------------------------------------------