Merge branch 'master' into SIW-1927-add-pull-to-refresh-to-wallet

jestSetup.js

@@ -30,7 +30,8 @@ jest.mock("react-native-reanimated", () => {
 
   return {
     ...Reanimated,
-    useScrollViewOffset: jest.fn
+    useScrollViewOffset: jest.fn,
+    useReducedMotion: jest.fn
   };
 });
 

package.json

@@ -109,7 +109,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "4.2.0",
+    "@pagopa/io-app-design-system": "4.3.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
     "@pagopa/io-react-native-crypto": "^0.3.0",

ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap

@@ -321,14 +321,10 @@ exports[`LoadingSpinnerOverlay Should match all-properties and loading snapshot
                   "backgroundColor": "rgba(0,115,230,0)",
                   "borderColor": "#0073E6",
                 },
+                false,
                 {
                   "backgroundColor": undefined,
                   "borderColor": undefined,
-                  "transform": [
-                    {
-                      "scale": undefined,
-                    },
-                  ],
                 },
               ]
             }

ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap

@@ -503,18 +503,15 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                         {
                                           "backgroundColor": "#0073E6",
                                         },
+                                        false,
                                         {
                                           "backgroundColor": undefined,
-                                          "transform": [
-                                            {
-                                              "scale": undefined,
-                                            },
-                                          ],
                                         },
                                       ]
                                     }
                                   >
                                     <View
+                                      entering={[Function]}
                                       style={
                                         [
                                           {
@@ -631,14 +628,11 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                           "textAlignVertical": "center",
                                         },
                                         false,
-                                        {},
                                         {
-                                          "transform": [
-                                            {
-                                              "scale": undefined,
-                                            },
-                                          ],
+                                          "columnGap": 8,
                                         },
+                                        {},
+                                        false,
                                       ]
                                     }
                                   >

ts/components/ui/BannerErrorState.tsx

@@ -6,31 +6,20 @@ import {
   IOBannerRadius,
   IOColors,
   IOIcons,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
+  useScaleAnimation,
   VSpacer,
   WithTestID
 } from "@pagopa/io-app-design-system";
-import React, { useCallback } from "react";
+import React from "react";
 import {
   AccessibilityRole,
   GestureResponderEvent,
   Pressable,
   StyleSheet,
   View
 } from "react-native";
-import Animated, {
-  Extrapolation,
-  FadeIn,
-  FadeOut,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 
 /* Styles */
 const colorContent: IOColors = "grey-700";
@@ -73,6 +62,9 @@ type BannerErrorStateActionProps =
 export type BannerErrorStateProps = BaseBannerErrorStateProps &
   BannerErrorStateActionProps;
 
+/**
+ ** TODO: Move it to the `io-app-design-system` package
+ */
 export const BannerErrorState = ({
   viewRef,
   icon,
@@ -83,39 +75,8 @@ export const BannerErrorState = ({
   accessibilityLabel,
   testID
 }: BannerErrorStateProps) => {
-  const isPressed: SharedValue<number> = useSharedValue(0);
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
 
   const renderMainBlock = () => (
     <>
@@ -164,7 +125,7 @@ export const BannerErrorState = ({
       onPressOut={onPressOut}
       accessible={false}
     >
-      <Animated.View style={[styles.container, pressedAnimationStyle]}>
+      <Animated.View style={[styles.container, scaleAnimatedStyle]}>
         {renderMainBlock()}
       </Animated.View>
     </Pressable>