diff --git a/Example/app.js b/Example/app.js index 2c514bc..d45917f 100644 --- a/Example/app.js +++ b/Example/app.js @@ -135,6 +135,14 @@ var SliderExample = React.createClass({ thumbTouchSize={{width: 50, height: 40}} /> + + + ); }, @@ -281,7 +289,7 @@ var customStyles7 = StyleSheet.create({ var customStyles8 = StyleSheet.create({ container: { - height: 20, + height: 30, }, track: { height: 2, @@ -299,4 +307,15 @@ var customStyles8 = StyleSheet.create({ } }); +var customStyles9 = StyleSheet.create({ + thumb: { + width: 30, + height: 30, + shadowColor: 'black', + shadowOffset: {width: 0, height: 1}, + shadowOpacity: 0.5, + shadowRadius: 1, + } +}); + AppRegistry.registerComponent('Example', () => SliderExample); diff --git a/Example/img/thumb.png b/Example/img/thumb.png new file mode 100644 index 0000000..8151bcf Binary files /dev/null and b/Example/img/thumb.png differ diff --git a/Example/img/thumb@2x.png b/Example/img/thumb@2x.png new file mode 100644 index 0000000..4f64cc2 Binary files /dev/null and b/Example/img/thumb@2x.png differ diff --git a/Example/img/thumb@3x.png b/Example/img/thumb@3x.png new file mode 100644 index 0000000..85c2631 Binary files /dev/null and b/Example/img/thumb@3x.png differ diff --git a/README.md b/README.md index 1eac726..d13e06f 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ onSlidingComplete | function | Yes | | Callba style | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container trackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track thumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb +thumbImage | [source](http://facebook.github.io/react-native/docs/image.html#source) | Yes | | Sets an image for the thumb. debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green. animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html). diff --git a/Screenshots/basic.png b/Screenshots/basic.png index 544d8db..8d36d05 100644 Binary files a/Screenshots/basic.png and b/Screenshots/basic.png differ diff --git a/Screenshots/basic@2x.png b/Screenshots/basic@2x.png index 88dd084..5db99e6 100644 Binary files a/Screenshots/basic@2x.png and b/Screenshots/basic@2x.png differ diff --git a/Screenshots/basic_android_xxhdpi.png b/Screenshots/basic_android_xxhdpi.png index e266338..ba0d98c 100644 Binary files a/Screenshots/basic_android_xxhdpi.png and b/Screenshots/basic_android_xxhdpi.png differ diff --git a/Screenshots/debug_thumb_touch_size@2x.png b/Screenshots/debug_thumb_touch_size@2x.png index 35a93cc..6b622a3 100644 Binary files a/Screenshots/debug_thumb_touch_size@2x.png and b/Screenshots/debug_thumb_touch_size@2x.png differ diff --git a/src/Slider.js b/src/Slider.js index d534825..92d9434 100644 --- a/src/Slider.js +++ b/src/Slider.js @@ -7,6 +7,7 @@ import React, { import { Animated, + Image, StyleSheet, PanResponder, View, @@ -143,6 +144,11 @@ var Slider = React.createClass({ */ thumbStyle: View.propTypes.style, + /** + * Sets an image for the thumb. + */ + thumbImage: Image.propTypes.source, + /** * Set this to true to visually see the thumb touch rect in green. */ @@ -230,6 +236,7 @@ var Slider = React.createClass({ minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, + thumbImage, styles, style, trackStyle, @@ -278,7 +285,9 @@ var Slider = React.createClass({ ...valueVisibleStyle } ]} - /> + > + {this._renderThumbImage()} + @@ -496,6 +505,14 @@ var Slider = React.createClass({ pointerEvents='none' /> ); + }, + + _renderThumbImage() { + var {thumbImage} = this.props; + + if (!thumbImage) return; + + return ; } });