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

A super simple react-native implementation of the UIStepper control from iOS with added customization and flexibility.

Installation
Usage
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.
    const nextValue = Number(value.toFixed(2));
    this.setState({ value: nextValue });
    // ...
  }
  render() {
    return <SimpleStepper valueChanged={value => this.valueChanged(value)} />;
  }
}

Props

Values

Name	Type	Description	Default
`initialValue`	Number	initial value	0
`minimumValue`	Number	minimum value	0
`maximumValue`	Number	maximum value	10
`stepValue`	Number	step value (ex. increment by 10)	1
`incrementImage`	String or Number	network or local image	require('./assets/increment.png')
`decrementImage`	String or Number	network or local image	require('./assets/decrement.png')
`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
`showText`	Boolean	whether or not to show text component	false
`textPosition`	String	placement of the text component	center

Functions

Name	Type	Description	Default
`valueChanged`	Function	invoked when value changes	`() => {}`
`onMin`	Function	invoked when value reaches min value	`() => {}`
`onMax`	Function	invoked when value reaches min value	`() => {}`
`onIncrement`	Function	invoked each time value increments	`() => {}`
`onDecrement`	Function	invoked each time value decrements	`() => {}`
`renderDecrementImage`	Function	used to override decrement image component	`undefined`
`renderIncrementImage`	Function	used to override increment image component	`undefined`
`renderDecrementStep`	Function	used to override decrement step component	`undefined`
`renderIncrementStep`	Function	used to override increment step component	`undefined`
`renderText`	Function	used to override increment text component	`undefined`

Styles

Name	Type	Description	Default
`textStyle`	Object	text component style	`{ padding: 8, fontSize: 20, fontWeight: 'bold', color: 'blue' }`
`containerStyle`	Object	container component style	`{ backgroundColor: 'transparent', flexDirection: 'row', borderWidth: 2, borderRadius: 8, overflow: 'hidden', alignItems: 'center', borderColor: 'blue' }`
`separatorStyle`	Object	separator component style	`{ width: StyleSheet.hairlineWidth, backgroundColor: 'blue', height: '100%' }`
`incrementStepStyle`	Object	increment step component style	`{ padding: 8 }`
`decrementStepStyle`	Object	decrement step component style	`{ padding: 8 }`
`incrementImageStyle`	Object	increment image component styles	`{ height: 36, width: 36 }`
`decrementImageStyle`	Object	decrement image component styles	`{ height: 36, width: 36 }`