Merge pull request #41 from janmarsicek/add-thumb-image

Add thumb image

Example/app.js

@@ -135,6 +135,14 @@ var SliderExample = React.createClass({
             thumbTouchSize={{width: 50, height: 40}}
           />
         </SliderContainer>
+        <SliderContainer caption='<Slider/> with custom style #9 and thumbImage'>
+          <Slider
+            minimumTrackTintColor='#13a9d6'
+            thumbImage={require('./img/thumb.png')}
+            thumbStyle={customStyles9.thumb}
+            thumbTintColor='#0c6692'
+          />
+        </SliderContainer>
       </ScrollView>
     );
   },
@@ -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);

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

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()}
+        </Animated.View>
         <View
           style={[defaultStyles.touchArea, touchOverflowStyle]}
           {...this._panResponder.panHandlers}>
@@ -496,6 +505,14 @@ var Slider = React.createClass({
         pointerEvents='none'
       />
     );
+  },
+
+  _renderThumbImage() {
+    var {thumbImage} = this.props;
+
+    if (!thumbImage) return;
+
+    return <Image source={thumbImage} />;
   }
 });