Add prop to set text on thumb

README.md

@@ -91,6 +91,8 @@ style                 | [style](http://facebook.github.io/react-native/docs/view
 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.
+thumbText             | string   | Yes      |                           | Set a text for the thumb.
+thumbTextStyle        | [style](http://facebook.github.io/react-native/docs/view.html#style)    | Yes      |                           | The style applied to the thumb text
 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

@@ -9,6 +9,7 @@ import {
   Easing,
   ViewPropTypes,
   I18nManager,
+  Text,
 } from 'react-native';
 
 import PropTypes from 'prop-types';
@@ -148,6 +149,16 @@ export default class Slider extends PureComponent {
      */
     thumbImage: Image.propTypes.source,
 
+    /**
+     * Sets a text for the thumb
+     */
+    thumbText: PropTypes.string,
+
+    /**
+     * Sets a style for the thumb text
+     */
+    thumbTextStyle: Text.propTypes.style,
+
     /**
      * Set this to true to visually see the thumb touch rect in green.
      */
@@ -180,6 +191,7 @@ export default class Slider extends PureComponent {
     thumbTouchSize: { width: 40, height: 40 },
     debugTouchArea: false,
     animationType: 'timing',
+    thumbTextStyle: {},
   };
 
   state = {
@@ -290,7 +302,7 @@ export default class Slider extends PureComponent {
           onLayout={this._measureThumb}
           renderToHardwareTextureAndroid
           style={[
-            { backgroundColor: thumbTintColor },
+            { backgroundColor: thumbTintColor, justifyContent: 'center' },
             mainStyles.thumb,
             thumbStyle,
             {
@@ -300,6 +312,7 @@ export default class Slider extends PureComponent {
           ]}
         >
           {this._renderThumbImage()}
+          {this._renderThumbText()}
         </Animated.View>
         <View
           renderToHardwareTextureAndroid
@@ -557,6 +570,15 @@ export default class Slider extends PureComponent {
     );
   };
 
+  _renderThumbText = () => {
+    const { thumbText, thumbTextStyle } = this.props;
+
+    if (!thumbText) return;
+    return (
+      <Text style={[defaultStyles.thumbText, thumbTextStyle]}>{thumbText}</Text>
+    );
+  };
+
   _renderThumbImage = () => {
     const { thumbImage } = this.props;
 
@@ -594,4 +616,8 @@ var defaultStyles = StyleSheet.create({
     backgroundColor: 'green',
     opacity: 0.5,
   },
+  thumbText: {
+    color: 'white',
+    fontSize: 10,
+  },
 });