Home

Awesome

<p align="center"> <img src="https://github.com/yasaricli/react-native-counters/blob/master/Kapture.gif" /> </p> <p align="center"> <b>React native Minus(-) (Number) Plus(+) Component</b> </p>

Installation

To install a stable release use:

yarn

yarn add react-native-counters

npm

npm i react-native-counters --save

Example

Simple use only uses the Text plus minus component.

import Counter from "react-native-counters";

class Example Component {
  onChange(number, type) {
    console.log(number, type) // 1, + or -
  }
  
  render() {
    return (
      <Counter start={1} onChange={this.onChange.bind(this)} />
    )
  }
}

For all uses ALL_USES

If you want to customize (minusIcon, plusIcon) the buttons USE_CUSTOM_ICON

Props

Some default props and descriptions.

PropNameDescriptiontypeDefault
minusIf you are not using minusIcon, it shows directly.String-
plusIf you are not using plusIcon, it shows directly.String+
startThe starting numberNumber0
minMinus the minimum selected number.Number0
maxThe most selectable number.Number10
minusIconYou can use it to change the minusIcon.Functionnull
plusIconYou can use it to change the plusIcon.Functionnull
buttonStyleYou can change the types of all buttons.Object{}
buttonTextStyleMinus or plus styles in the buttonObject{}
countTextStylestyles of increasing number.Object{}
incrementYou can use it to change the increment between steps.Number1

Contributing

This project exists thanks to all the people who contribute.