React Native Increment Decrement Button

Recently I committed my first open source library called React Native Increment Decrement Button, in this article blog I am going to briefly talk about it .

What will be covered in this blog:

1. Why React Native Increment Decrement Button developed ?
2. About React Native Increment Decrement Button
3. How to use it ?
4. Contribute

1.Why React Native Increment Decrement Button developed ?

I was working on a b2b business app called grocer (though not published in playstore yet). I wanted to add the “add to cart” feature, so I needed a button with increment and decrement options, as well as a Text to show it.

As the saying goes, "it's easier to use what's already there and proven than to reinvent the wheel." I looked for a library and discovered "react-native-numeric-input," a cross-platform stylish numeric input for react native. It's highly adaptable, flexible, and quick to use.

However, I ran into a few problems:

1. Even though buttons were disabled when thresholds were reached, the OnChange feature was activated. This had an effect on API calls, which should not be made once the necessary minimum and maximum values have been reached.
2. Disabling the entire component - this function comes in handy in api calls where users shouldn't be able to add or remove objects. It doesn't have that function.

As a result, I decided to create my own component with the minimum features necessary for that app, and thus created the react native increment decrement button.

2.About React Native Increment Decrement Button

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 :You may define a minimum amount, such as 2kg or 2 bits, for example.

2. max and min limit support : There should be a minimum and maximum amount that can be incremented or decremented.If you have ten quantities of a particular object, the consumer should not be able to add any more.This feature helps you to do so.

3. Button disabling on max and min limit reach :When the maximum and minimum values are reached, the button is disabled, and all more value adjustments from that button are disabled, fixing the first problem.

4. Complete button disabling support : you can check the available qty and in multi user platform disable users from further ordering .

5. Custom style support for both button and display text input : You can verify the available quantity and, if you're using a multi-user network, you can prevent users from placing additional orders.

About state variables:

1. value: to hold value to display , it is changed using changeValue()

2. count : This variable is set to keep track of the amount of increments and decrements to verify maximum limits.

3. minReq: it holds the minimum initial value,can be altered using addMinReq.

4. min: this holds the minimum limit ,can be altered using addMinValue()

5. leftBtnDisable and rightBtnDisable: these two variables are used to control disabling of buttons , which can be set to boolean values using changeLeftBtnDisable() and changeRightBtnDisable().

6. activeColorBtn and disableColorBtn: these are used to overwrite default active and disable colors , can be set using addDisableColor() and addActiveColor().

Notable prop:

disableControl: this is one of the most important prop which is used to address the second issue.Using this variable the entire component can be disabled.

About different component used :

Increment and decrement buttons:

  <Button
          labelStyle={ labelStyle ? labelStyle : styles.labelStyle}
        disabled={leftBtnDisable || disableControl}
          color={'#ffffff'}
          onPress={() => {
            if (count - 1 <= 0) {
              changeCount(0);
              changeRightBtnDisable(false);
              changeLeftBtnDisable(true);
              changeValue(value + 1);
            } else {
              if (value < minReq) {
                changeCount(count - minReq);
                changeValue(value + minReq);
                handlePress(value + minReq);
              } else {
                changeCount(count - 1);
                changeValue(value + 1);
                handlePress(value + 1);
              }
              changeRightBtnDisable(false);
            }
          }}>
          +
        </Button>

The react-natie-paper button component is used to build this. It has a number of useful features, one of which is the disabled option, which is used to solve the first problem. When the maximum and minimum thresholds are reached, the button can be fully disabled, and the onPress event will not be activated. Take note of the logic used to pass the argument to the handlePress method in the onPress function. I've used the count variable to verify the limit; if it's less than or greater than the defined limit, the buttons can be disabled.The value is modified by one unit for each increment or decrement.

For displaying value I have used a built-in Text component.

<Text style={[{color: '#000000'},labelStyle ? labelStyle : styles.labelStyle]}>{value}</Text>

It simply displays the value which is taken as state .

3.How to use it ?

Here you can find extensive details about props, including what they do and how to use them in

4.Contribute

Suggestions and pull requests are welcome. Let's expand this library's capabilities and make it suitable for a wide range of applications.