🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Form React Native

Documentation

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

screenshot

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

You May Also Like