pepe-ves / react-native-simple-stepper

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

react-native-simple-stepper

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

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