A super simple react-native implementation of the UIStepper control from iOS.
JavaScript Objective-C Python Java
Clone or download
Latest commit efd6f4e Feb 16, 2018

README.md

react-native-simple-stepper

Platform npm version npm version Build Status codecov License

screenshot screenshot screenshot screenshot

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

Table of contents

  1. Installation
  2. Demo
  3. Usage
  4. Props

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) {
  // If you want to set the value to a certain decimal point you can like so:
  const displayValue = value.toFixed(2)
  this.setState({
     displayValue: displayValue
  })
  // ...
}
//...

Demo

screenshot

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
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