Support multiple thumbs

Example/android/app/src/main/java/com/example/MainApplication.java

@@ -22,7 +22,7 @@ protected String getJSMainModuleName() {
  }
 
  @Override
- protected boolean getUseDeveloperSupport() {
+ public boolean getUseDeveloperSupport() {
  return BuildConfig.DEBUG;
  }
 
@@ -38,4 +38,4 @@ protected List<ReactPackage> getPackages() {
  public ReactNativeHost getReactNativeHost() {
  return mReactNativeHost;
  }
-}
+}

Example/app.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
-var Slider = require('../src/Slider');
+var { default: Slider } = require('../src/Slider');
 var {
  AppRegistry,
  StyleSheet,
@@ -17,18 +17,24 @@ var DEFAULT_VALUE = 0.2;
 var SliderContainer = React.createClass({
  getInitialState() {
  return {
- value: DEFAULT_VALUE,
+ value: this.props.value != null || Array.isArray(this.props.value)
+ ? this.props.value
+ : DEFAULT_VALUE
  };
  },
 
  render() {
- var value = this.state.value;
+ let value = this.state.value;
+
+ if (!Array.isArray(value)) {
+ value = [value];
+ }
 
  return (
  <View>
  <View style={styles.titleContainer}>
  <Text style={styles.caption} numberOfLines={1}>{this.props.caption}</Text>
- <Text style={styles.value} numberOfLines={1}>{value}</Text>
+ <Text style={styles.value} numberOfLines={1}>{value.map(v => v.toPrecision(2)).join(',')}</Text>
  </View>
  {this._renderChildren()}
  </View>
@@ -38,11 +44,11 @@ var SliderContainer = React.createClass({
  _renderChildren() {
  return React.Children.map(this.props.children, (child) => {
  if (child.type === Slider
- || child.type === ReactNative.Slider) {
-  var value = this.state.value;
+ || child.type === ReactNative.Slider
+ ) {
  return React.cloneElement(child, {
- value: value,
- onValueChange: (val) => this.setState({value: val}),
+ value: this.state.value,
+ onValueChange: (value) => this.setState({ value }),
  });
  } else {
  return child;
@@ -67,6 +73,32 @@ var SliderExample = React.createClass({
  <SliderContainer caption='<Slider/> with default style'>
  <Slider />
  </SliderContainer>
+ <SliderContainer
+ caption='<Slider/> with default style and two thumbs'
+ value={[0.2, 0.5]}
+ >
+ <Slider />
+ </SliderContainer>
+ <SliderContainer
+ caption='<Slider/> with custom style #5 and two thumbs'
+ value={[0.2, 0.5]}
+ >
+ <Slider
+ trackStyle={customStyles5.track}
+ thumbStyle={customStyles5.thumb}
+ minimumTrackTintColor='#0088bb'
+ />
+ </SliderContainer>
+ <SliderContainer
+ caption='<Slider/> with custom style #5 and multiple thumbs'
+ value={[0.25, 0.5, 0.75]}
+ >
+ <Slider
+ trackStyle={customStyles5.track}
+ thumbStyle={customStyles5.thumb}
+ minimumTrackTintColor='#0088bb'
+ />
+ </SliderContainer>
  <SliderContainer caption='<Slider/> with min, max and custom tints '>
  <Slider
  minimumValue={-10}

index.d.ts

@@ -11,14 +11,15 @@ declare module 'react-native-slider' {
 
  interface SliderProps {
  /**
- * Initial value of the slider. The value should be between minimumValue
+ * Initial value of the slider, or array of initial values for all thumbs.
+ * The value should be between minimumValue
  * and maximumValue, which default to 0 and 1 respectively.
  * Default value is 0.
  *
  * *This is not a controlled component*, e.g. if you don't update
  * the value, the component won't be reset to its inital value.
  */
- value?: number
+ value?: number | number[]
 
  /**
  * If true the user won't be able to move the slider.
@@ -98,12 +99,12 @@ declare module 'react-native-slider' {
  /**
  * The style applied to the thumb.
  */
- thumbStyle?: StyleProp<ViewStyle>
+ thumbStyle?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
 
  /**
  * Sets an image for the thumb.
  */
- thumbImage?: ImageSourcePropType
+ thumbImage?: ImageSourcePropType | StyleProp<ViewStyle>[]
 
  /**
  * Set this to true to visually see the thumb touch rect in green.

package.json

@@ -35,7 +35,7 @@
  "eslint": "^3.19.0",
  "eslint-plugin-react": "^6.10.3",
  "react": "16.0.0-alpha.6",
- "react-native": "0.43.3",
+ "react-native": "0.44.0",
  "rimraf": "^2.5.2"
  }
 }