refactor: fix the animation when the decrease button is pressed

Author: kuraydev

example/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {SafeAreaView, View, Image, Text, StatusBar} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 // import CounterInput from 'react-native-counter-input';
-import CounterInput from './build/dist/CounterInput';
+import CounterInput from './lib/CounterInput';
 const App = () => {
   return (
     <>

example/ios/Podfile.lock

@@ -626,4 +626,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 446419b91f3d523996e9ca2fa51242b50bd76552
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0

lib/CounterInput.style.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, ImageStyle, TextStyle, StyleSheet } from "react-native";
+import {ViewStyle, ImageStyle, TextStyle, StyleSheet} from 'react-native';
 
 interface Style {
   textInputStyle: TextStyle;
@@ -17,12 +17,12 @@ export const _container = (
   padding: horizontal ? 0 : 9,
   minHeight: horizontal ? 45 : 140,
   maxWidth: horizontal ? undefined : 70,
-  flexDirection: horizontal ? "row" : "column",
-  alignItems: "center",
-  justifyContent: "space-evenly",
+  flexDirection: horizontal ? 'row' : 'column',
+  alignItems: 'center',
+  justifyContent: 'space-evenly',
   shadowRadius: 8,
   shadowOpacity: 0.2,
-  shadowColor: "#000",
+  shadowColor: '#000',
   elevation: 2,
   shadowOffset: {
     width: 0,
@@ -37,12 +37,12 @@ export const _increaseButtonStyle = (
   width: 40,
   height: 40,
   borderRadius: 16,
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: isPressed ? increaseButtonBackgroundColor : "transparent",
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: isPressed ? increaseButtonBackgroundColor : 'transparent',
   shadowOpacity: isPressed ? 0.1 : 0,
   shadowRadius: 3,
-  shadowColor: "#000",
+  shadowColor: '#000',
   shadowOffset: {
     width: 0,
     height: 3,
@@ -56,12 +56,12 @@ export const _decreaseButtonStyle = (
   width: 40,
   height: 40,
   borderRadius: 16,
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: isPressed ? "transparent" : decreaseButtonBackgroundColor,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: isPressed ? 'transparent' : decreaseButtonBackgroundColor,
   shadowOpacity: isPressed ? 0 : 0.1,
   shadowRadius: 3,
-  shadowColor: "#000",
+  shadowColor: '#000',
   shadowOffset: {
     width: 0,
     height: 3,
@@ -75,9 +75,9 @@ export default StyleSheet.create<Style>({
     fontSize: 24,
     marginTop: 12,
     marginBottom: 8,
-    alignSelf: "center",
-    fontWeight: "bold",
-    textAlign: "center",
+    alignSelf: 'center',
+    fontWeight: 'bold',
+    textAlign: 'center',
   },
   buttonImageStyle: {
     width: 15,

lib/CounterInput.tsx

@@ -78,7 +78,7 @@ const CounterInput: React.FC<CounterInputProps> = ({
       setCounter(counter - 1, (newCounterValue: any) => {
         onChange?.(newCounterValue);
 
-        setPressed(true, () => {
+        setPressed(false, () => {
           onDecreasePress && onDecreasePress(newCounterValue);
         });
       });
@@ -92,18 +92,18 @@ const CounterInput: React.FC<CounterInputProps> = ({
       (min !== undefined && input < min) ||
       (max !== undefined && input > max)
     ) {
-      setCounter(oldNumber, (newCounterValue: any) => {
-        onChange?.(newCounterValue);
-
-        onChangeText && onChangeText(newCounterValue);
-        setPressed(true);
+      setCounter(0, () => {
+        setPressed(false, () => {
+          setCounter(oldNumber, (newCounterValue: any) => {
+            onChangeText?.(newCounterValue);
+            onChange?.(newCounterValue);
+          });
+        });
       });
     } else {
       setCounter(input, (newCounterValue: any) => {
+        onChangeText?.(newCounterValue);
         onChange?.(newCounterValue);
-
-        onChangeText && onChangeText(newCounterValue);
-        setPressed(true);
       });
     }
   };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-counter-input",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Counter Input with fully customizable options for React Native",
   "main": "./build/dist/CounterInput.js",
   "repository": "git@github.com:WrathChaos/react-native-counter-input.git",