Package Exports
- react-native-ui-stepper
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-ui-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-ui-stepper
A react-native component which mirrors the functionality of UIStepper from iOS.
A stepper control provides a user interface for incrementing or decrementing a value. A stepper displays two buttons, one with a minus (“–”) symbol and one with a plus (“+”) symbol.
Installation
npm i react-native-ui-stepper
Usage
import UIStepper from 'react-native-ui-stepper';
...
setValue = (value) => {
// do something with value
}
render() {
return (
<UIStepper
onValueChange={(value) => { this.setValue(value) }}
/>
)
}
Demo
Props
Name | Type | Description | Default |
---|---|---|---|
initialValue |
Number | Start value | 0 |
minimumValue |
Number | Minimum value | 0 |
maximumValue |
Number | Maximum value | 100 |
steps |
Number | Increment value | 1 |
tintColor |
String | Color used for images (-) and (+) | #0076FF |
backgroundColor |
String | Background color | transparent |
width |
Number | Width | 94 |
height |
Number | Height | 29 |
borderColor |
String | Color used for the border | #0076FF |
borderWidth |
Number | Width of the border | 1 |
borderRadius |
Number | Radius of the border | 4 |
incrementImage |
String or Number | The image to be used on the Increment (+) button | require('./assets/increment.png') |
decrementImage |
String or Number | The image to be used on the Increment (-) button | require('./assets/decrement.png') |
onValueChange |
Function | Executed when the value changes. The value is passed as a parameter | null |
onIncrement |
Function | Executed when the User clicks the increment (+) button. The value is passed as a parameter | null |
onDecrement |
Function | Executed when the User clicks the decrement (+) button. The value is passed as a parameter | null |
onMinimumReached |
Function | Executed when the minimumValue is reached. The value is passed as a parameter |
null |
onMaximumReached |
Function | Executed when the maximumValue is reached. The value is passed as a parameter |
null |