├── .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 | [![npm version](http://img.shields.io/npm/v/react-native-slider-color-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm") 4 | [![npm downloads](http://img.shields.io/npm/dm/react-native-slider-color-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm") 5 | [![npm licence](http://img.shields.io/npm/l/react-native-slider-color-picker.svg?style=flat-square)](https://npmjs.org/package/react-native-slider-color-picker "View this project on npm") 6 | [![Platform](https://img.shields.io/badge/platform-ios%20%7C%20android-989898.svg?style=flat-square)](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 | 20 | 22 | 25 | 29 | 33 | 34 | 43 | 44 | 62 | 64 | 65 | 67 | image/svg+xml 68 | 70 | 71 | 72 | 73 | 74 | 78 | 85 | 86 | 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 | --------------------------------------------------------------------------------