1.0.3 • Published 6 years ago
react-native-infinity-slider v1.0.3
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-iosLicense
MIT