react-native-slider/Example/index.ios.js

'use strict';

var React = require('react-native');
var Slider = require('../Slider');
var {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  ScrollView,
  View,
  SliderIOS,
} = React;

var DEFAULT_VALUE = 0.2;

var SliderContainer = React.createClass({
  getInitialState() {
    return {
      value: DEFAULT_VALUE,
    };
  },

  render() {
    var value = this.state.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>
        </View>
        {this._renderChildren()}
      </View>
    )
  },

  _renderChildren() {
    return React.Children.map(this.props.children, (child) => {
      if (child.type === Slider
          || child.type === SliderIOS) {
        var value = this.state.value;
        return React.addons.cloneWithProps(child, {
          value: value,
          onValueChange: (value) => this.setState({value: value}),
        })
      } else {
        return child;
      }
    }.bind(this))
  },
});

var SliderExample = React.createClass({
  getInitialState() {
    return {
      //value: 0.2,
    };
  },

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        <SliderContainer caption='<SliderIOS/>'>
          <SliderIOS />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with default style'>
          <Slider />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with min, max and custom tints '>
          <Slider minimumValue={-10} maximumValue={42} minimumTrackTintColor='#1fb28a' maximumTrackTintColor='#d3d3d3' thumbTintColor='#1a9274' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style'>
          <Slider styles={iosStyles} minimumTrackTintColor='#1073ff' maximumTrackTintColor='#b7b7b7' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #2'>
          <Slider styles={customStyles2} minimumTrackTintColor='#30a935' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #3'>
          <Slider styles={customStyles3} minimumTrackTintColor='#eecba8' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #4'>
          <Slider styles={customStyles4} minimumTrackTintColor='#d14ba6' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #5'>
          <Slider styles={customStyles5} minimumTrackTintColor='#ec4c46' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #6'>
          <Slider styles={customStyles6} minimumTrackTintColor='#e6a954' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #7'>
          <Slider styles={customStyles7} minimumTrackTintColor='#2f2f2f' />
        </SliderContainer>
        <SliderContainer caption='<Slider/> with custom style #8 and thumbTouchSize'>
          <Slider styles={customStyles8} minimumTrackTintColor='#31a4db' thumbTouchSize={{width: 50, height: 40}} />
        </SliderContainer>
      </ScrollView>
    );
  },

  _addSlider(i, comp) {
    var valueKey = 'value' + i;
    var value = this.state[valueKey] !== undefined ? this.state[valueKey] : DEFAULT_VALUE;

    comp.props.value = value;
    comp.props.onValueChange = (value) => this.setState({[valueKey]: value});
    
    return (
      <View>
        {comp}
        <Text>Value: {value}</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    margin: 20,
    paddingBottom: 20,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
  },
  titleContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  caption: {
    //flex: 1,
  },
  value: {
    flex: 1,
    textAlign: 'right',
    marginLeft: 10,
  }
});

var iosStyles = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 2,
    borderRadius: 1,
  },
  thumb: {
    marginTop: -16,
    position: 'absolute',
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: 'white',
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 2},
    shadowRadius: 2,
    shadowOpacity: 0.35,
  }
});

var customStyles2 = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 4,
    borderRadius: 2,
  },
  thumb: {
    marginTop: -17,
    position: 'absolute',
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: 'white',
    borderColor: '#30a935',
    borderWidth: 2,
  }
});

var customStyles3 = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 10,
    borderRadius: 5,
    backgroundColor: '#d0d0d0',
  },
  thumb: {
    marginTop: -20,
    position: 'absolute',
    width: 10,
    height: 30,
    borderRadius: 5,
    backgroundColor: '#eb6e1b',
  }
});

var customStyles4 = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 10,
    borderRadius: 4,
    backgroundColor: 'white',
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 1},
    shadowRadius: 1,
    shadowOpacity: 0.15,
  },
  thumb: {
    marginTop: -15,
    position: 'absolute',
    width: 20,
    height: 20,
    backgroundColor: '#f8a1d6',
    borderColor: '#a4126e',
    borderWidth: 5,
    borderRadius: 10,
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 2},
    shadowRadius: 2,
    shadowOpacity: 0.35,
  }
});

var customStyles5 = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 18,
    borderRadius: 1,
    backgroundColor: '#d5d8e8',
  },
  thumb: {
    marginTop: -24,
    position: 'absolute',
    width: 20,
    height: 30,
    borderRadius: 1,
    backgroundColor: '#838486',
  }
});

var customStyles6 = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 14,
    borderRadius: 2,
    backgroundColor: 'white',
    borderColor: '#9a9a9a',
    borderWidth: 1,
  },
  thumb: {
    marginTop: -17,
    position: 'absolute',
    width: 20,
    height: 20,
    borderRadius: 2,
    backgroundColor: '#eaeaea',
    borderColor: '#9a9a9a',
    borderWidth: 1,
  }
});

var customStyles7 = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center',
  },
  track: {
    height: 1,
    backgroundColor: '#303030',
  },
  thumb: {
    marginTop: - 31 / 2,
    position: 'absolute',
    width: 30,
    height: 30,
    backgroundColor: 'rgba(150, 150, 150, 0.3)',
    borderColor: 'rgba(150, 150, 150, 0.6)',
    borderWidth: 14,
    borderRadius: 15,
  }
});

var customStyles8 = StyleSheet.create({
  container: {
    height: 20,
    justifyContent: 'center',
  },
  track: {
    height: 2,
    backgroundColor: '#303030',
  },
  thumb: {
    marginTop: - 6,
    position: 'absolute',
    width: 10,
    height: 10,
    backgroundColor: '#31a4db',
    borderRadius: 10 / 2,
    shadowColor: '#31a4db',
    shadowOffset: {width: 0, height: 0},
    shadowRadius: 2,
    shadowOpacity: 1,
  }
});

AppRegistry.registerComponent('SliderExample', () => SliderExample);