react-native-stepper

react-native-stepper

A super simple react-native stepper implementation. Check out the props below for customization.

This package was inspired in react-native-simple-stepper develop by Brian.

Motivation

This is my first package with react-native and i need a stepper implementation that i could use any type of component as a stepper button.

Installation

npm i react-native-stepper --save

Usage

import Stepper from 'react-native-stepper'
 
//...
 
render() {
  return (
 
      //...
 
      <Stepper
        initValue={duration}
        minValue={0}
        stepValue={1}
        style={stepperStyle}
        decreaseComponent={(<Icon family="Ionicons" name="remove" style={stepperStyle.iconStyle} />)}
        increaseComponent={(<Icon family="Ionicons" name="add" style={stepperStyle.iconStyle} />)}
        valueChanged={(value) => this.onChangeDurationFilter(value)}
      />
 
      //...
 
  )
}
 
onChangeDurationFilter(value) {
  // ... update your app state here
}
 
//...
 

Attention !!!

I do not provide any style or default component for decrease and increase buttons, you must provide both. To implement your style you must follow the schema below.

 
const stepperStyle = StyleSheet.create({
  containerStyle: {
    flexDirection: 'row'
  },
  decreaseButtonStyle: {
    padding: 0,
    borderWidth: 2,
    borderRightWidth: 1,
    borderColor: 'red',
    borderTopLeftRadius: 4,
    borderBottomLeftRadius: 4
  },
  increaseButtonStyle: {
    padding: 0,
    borderWidth: 2,
    borderLeftWidth: 1,
    borderColor: 'red',
    borderTopRightRadius: 4,
    borderBottomRightRadius: 4
  }
});
 

Demo

Props

Name	Type	Description	Default
initValue	Number	Initial value.	0
minValue	Number	The minimum value that stepper counter can achieve.	-
maxValue	Number	The maximum value that stepper counter can achieve.	-
maxValue	Number	The max value that stepper counter can achieve.	1
decreaseComponent	Component	Component that will be rendered as decrease button	<Text>-</Text>
increaseComponent	Component	Component that will be rendered as increase button	<Text>-</Text>
style	StyleSheet Object	Style that will be applied in your stepper component	-
valueChanged	Function	Fires when the value changes and the value will be passed down for processing like display or calculations.	FALSE
minMessage	String or Function	Message fired when stepper achieve the minimum value	null
maxMessage	String or Function	Message fired when stepper achieve the maximum value	null
ignoreMinValidation	Boolean	!!!	FALSE
ignoreMaxValidation	Boolean	!!!	FALSE