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

!2018-05-15 23-13-00

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 | | Distance from start touch point on Y Axis to calculate multiplicity value when moving left/right |
| yValues | Array | | 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

``js
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 (


Value: {this.state.value}

value={this.state.value}
onValueChange={this.onValueChanged}
/>

);
}
}

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


Example

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

License

MIT