A super simple react-native implementation of the classic UIStepper from iOS. Check out the props below for customization.
npm i react-native-simple-stepper --save
import SimpleStepper from 'react-native-simple-stepper'
//...
render() {
return (
<SimpleStepper valueChanged={(value) => this.valueChanged(value)} />
)
}
valueChanged(value) {
// ...
}
//...
| Name | Type | Description | Default
| ------------ | ------------- | ------------ |------------ |------------ |
| initialValue | Number | initial value | 0
| minimumValue | Number | minimum value | 0
| maximumValue | Number | maximum value | 10
| stepValue | Number | step value (i.e. increment by 10) | 1
| backgroundColor | String | background color | transparent
| tintColor | String | color for border, divider and images | blue
| padding | Number | stepper padding | 4
| valueChanged | Function | Fires when the value changes and the value will be passed down for processing like display or calculations | null
| incrementImage | String or Number | network or local image | require('./assets/increment.png')
| decrementImage | String or Number | network or local image | require('./assets/decrement.png')
| tintOnIncrementImage | Boolean | whether or not you want tintColor applied to increment image | true
| tintOnDecrementImage | Boolean | whether or not you want tintColor applied to decrement image | true
| imageHeight | Number | network image height | 36
| imageWidth | Number | network image width | 36
| activeOpacity | Number | touch opacity | 0.4
| disabledOpacity | Number | when step button is disabled | 0.5