React Native Increment Decrement Button is a react-native component for add to cart like functionality.
It has following functionalities:
1.initial value support for button
2.max and min limit support.
3.Button disabling on max and min limit reach
4.Complete button disabling support. 5.Custom style support for both button and display text input.

if you have react-native-vector-icons and react-native-paper installed in your project.

yarn add react-native-increment-decrement-button

or with npm

npm install react-native-increment-decrement-button --save

if you don't have react-native-vector-icons and react-native-paper installed in your project

yarn add react-native-vector-icons react-native-paper react-native-increment-decrement-button

or with npm

npm install  react-native-vector-icons react-native-paper react-native-increment-decrement-button --save

if you're experiencing issues with react-native link which is used to install react-native-vector-icons please refer to react-native-vector-icons to see manual installation steps

import component

import RnIncrementDecrementBtn  from 
'react-native-increment-decrement-button';

Basic usage without any props

 <RnIncrementDecrementBtn  />

Adding val,minVal,max,minreq props

 <RnIncrementDecrementBtn minVal={0} minreq={3} max={10} val={3} />

Adding disableControl,disabledColor,activeColor props

 <RnIncrementDecrementBtn disableControl={false} disabledColor={'#eeeeee'} activeColor={'#509e4b'} /> 

Adding styles for button and textInput

<RnIncrementDecrementBtn
        styleBtn={{width:100,height:100}}
        styleTextInput={{width:100,height:100,backgroundColor:'green'}}
        labelStyle={{fontSize:25,color:'blue'}}
      />

Handling button click event

<RnIncrementDecrementBtn handleClick={()=>console.log('Pressed')}/>

Component with all props

<RnIncrementDecrementBtn
        minVal={0} 
        minreq={3} 
        max={10}
        val={3}
        disableControl={false}
        disabledColor={'#eeeeee'}
        activeColor={'#509e4b'}
        handleClick={()=>console.log('Pressed')}
        styleBtn={{width:100,height:100}}
        styleTextInput={{width:100,height:100,backgroundColor:'green'}}
        labelStyle={{fontSize:25,color:'blue'}}
      />

• val - value to be consider in the component state, if value is not given as a prop default 0 is taken.
• minVal - minimun bound to decrement value.
• max - maximum bound to which value to be incremented.
• disableControl - prop to completely disable both buttons,useful incase of api calls.
• minreq - minimum initial value to be present
• handleClick(val) - function which takes value as param ,called when either button is clicked
• styleTextInput - prop to apply custom style to view in which value is displayed
• styleBtn - prop to apply custom style for buttons like width,height etc.
• disabledColor - color to heighlight button disable when bound is reached
• activeColor - color to showup buttons
• labelStyle - prop to apply custom style for labels.It takes StyleProp such as fontSize,color etc.

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT