Add thumb image

brunolemos · Jun 13, 2016 · b80a78d · b80a78d
1 parent 0a6cdef
commit b80a78d
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 2 deletions.
diff --git a/Example/app.js b/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);
diff --git a/Example/img/thumb.png b/Example/img/thumb.png
diff --git a/Example/img/[email protected] b/Example/img/[email protected]
diff --git a/Example/img/[email protected] b/Example/img/[email protected]
diff --git 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.
 
 ---

diff --git a/Screenshots/basic.png b/Screenshots/basic.png
diff --git a/Screenshots/[email protected] b/Screenshots/[email protected]
diff --git a/Screenshots/basic_android_xxhdpi.png b/Screenshots/basic_android_xxhdpi.png
diff --git a/Screenshots/[email protected] b/Screenshots/[email protected]
diff --git a/src/Slider.js b/src/Slider.js
@@ -7,6 +7,7 @@ import React, {
 
 import {
   Animated,
+  Image,
   StyleSheet,
   PanResponder,
   View
@@ -126,6 +127,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.
      */
@@ -192,6 +198,7 @@ var Slider = React.createClass({
       minimumTrackTintColor,
       maximumTrackTintColor,
       thumbTintColor,
+      thumbImage,
       styles,
       style,
       trackStyle,
@@ -233,7 +240,9 @@ var Slider = React.createClass({
             {backgroundColor: thumbTintColor, marginTop: -(trackSize.height + thumbSize.height) / 2},
             mainStyles.thumb, thumbStyle, {left: thumbLeft, ...valueVisibleStyle}
           ]}
-        />
+        >
+          {this._renderThumbImage()}
+        </Animated.View>
         <View
           style={[defaultStyles.touchArea, touchOverflowStyle]}
           {...this._panResponder.panHandlers}>
@@ -439,6 +448,14 @@ var Slider = React.createClass({
         pointerEvents='none'
       />
     );
+  },
+
+  _renderThumbImage() {
+    var {thumbImage} = this.props;
+
+    if (!thumbImage) return;
+
+    return <Image source={thumbImage} />;
   }
 });