react-native-infinity-slider

react-native-infinity-slider

Infinity slider for React Native - Pure JS Slider with infinity value on both side. Android and iOS platform supported. Tested on RN version 0.55.x.

Problem and solution discussion

Props

Property	Type	Default	Description
value	Number	required	Default value which will be used.
onValueChange	Function	required	Callback called on every value changed. value: Number as parameter.
yRange	Array<Number>		Distance from start touch point on Y Axis to calculate multiplicity value when moving left/right
yValues	Array<Number>		Values which will be added to value when you moved left/right
xStep	Number	10	Distance which you have to move to increment/decrement value
renderThumb	Function	optional	Function to render thumb - middle component which is fixed
renderDefaultBackground	Function	optional	Function to render background - should be positioned absolutely.
thumbStyle	Object	optional	You can pass your style to overwrite default one

How to use it

import React, { Component } from 'react';
import ReactNative from 'react-native';
import RNInfinitySlider from 'react-native-infinity-slider';

const {
  View,
  Text,
  StyleSheet,
} = ReactNative;

export default class App extends Component {
  state = {
    value: 0,
  };

  onValueChanged = value => this.setState({ value });

  render() {
    return (
      <View style={styles.container}>
        <View>
          <Text>Value: {this.state.value}</Text>
        </View>
        <RNInfinitySlider
          value={this.state.value}
          onValueChange={this.onValueChanged}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Example

$ cd example
$ yarn
$ react-native run-ios

License

MIT