hubciorz / react-native-simple-stepper

A super simple react-native implementation of the classic UIStepper from iOS

react-native-simple-stepper

A super simple react-native implementation of the classic UIStepper from iOS. Check out the props below for customization.

Installation

npm i react-native-simple-stepper --save

Usage

import SimpleStepper from 'react-native-simple-stepper'
//...
render() {
  return (
    <SimpleStepper valueChanged={(value) => this.valueChanged(value)} />
  )
}
valueChanged(value) {
  // ...
}
//...

Demo

Props

| 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