react-native-stepper v0.0.2

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