react-native-custom-stepper
A simple React Native number stepper component
MIT License
Ecosystems:
JavaScript,
React Native
🎟 Demo
⚙️ Installation
$ npm install react-native-custom-stepper --save
I will do my best to maintain backward compatibility for this component throughout its updates. However, due to the nature of the platform and the potential breaking changes between react native releases, the aforementioned might be impossible to achieve.
💡 Props
| Prop | Type | Default | Description |
|---|---|---|---|
autoRepeat |
boolean |
true |
Used to determine whether the stepper should automatically repeat after reaching minValue or maxValue
|
borderColor |
string |
#000000 |
The stepper's overall border color |
borderRadius |
number |
8 |
The stepper's outer border radius |
borderWidth |
number |
0 |
The stepper's overall border width |
buttonsBackgroundColor |
string |
#7DA453 |
The background color applied to the stepper buttons |
buttonsFontColor |
string |
#FFFFFF |
The font color applied to the stepper buttons |
buttonsFontSize |
number |
36 |
The font size applied to the stepper buttons |
buttonsUnderlayColor |
string |
#CCCCCC |
The underlay color applied to the stepper buttons |
buttonsWidth |
number |
50 |
The width applied to the stepper buttons |
decrementButtonText |
string |
- |
The stepper's decrement button text |
incrementButtonText |
string |
+ |
The stepper's increment button text |
initialValue |
number |
0 |
The initial value of the stepper |
labelBackgroundColor |
string |
#AED581 |
The background color applied to the stepper label |
labelFontColor |
string |
#FFFFFF |
The font color applied to the stepper label |
labelFontSize |
number |
24 |
The font size applied to the stepper label |
minValue |
number |
0 |
The stepper's minimum displayed value |
maxValue |
number |
5 |
The stepper's maximum displayed value |
stepValue |
number |
1 |
The stepper's incremental value |
onValueChange |
func |
N/A |
Callback that is triggered whenever the stepper's value is modified |
🖥 Usage
import NumberStepper from 'react-native-custom-stepper'
🏷 License
Copyright © 2019 Jad Ghadry. Released under the MIT license.
Package Rankings
Top 17.55% on Npmjs.org