JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 128
  • Score
    100M100P100Q76752F
  • License MIT

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

Package Exports

  • react-native-simple-stepper

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-simple-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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