Package Exports
- react-native-simple-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-simple-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-simple-stepper
A super simple react-native implementation of the UIStepper control from iOS.
Table of contents
Installation
npm i react-native-simple-stepper --save
OR yarn add react-native-simple-stepper
Usage
import React, { Component } from 'react';
import { SimpleStepper } from 'react-native-simple-stepper';
export default class App extends Component {
constructor(props) {
super(props);
this.state = { value: 0 };
}
valueChanged(value) {
// Truncate value to 2 decimal places and cast as Number (like the demo).
const nextValue = Number(value.toFixed(2));
this.setState({ value: nextValue });
// ...
}
render() {
const { value } = this.state;
return <SimpleStepper value={value} valueChanged={value => this.valueChanged(value)} />;
}
}
Demo
Props
Name | Type | Description | Default |
---|---|---|---|
value |
Number | stepper's value | 0 |
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 |
disabled |
Boolean | stepper disable state | false |
wraps |
Boolean | whether or not it wraps. more info | false |
renderIncrement |
Function | render increment component(s) | null |
renderDecrement |
Function | render decrement component(s) | null |