@pagopa/io-app-design-system 5.12.1 → 6.0.0-0

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -1,5 +1,12 @@
-import React, { useEffect, useRef } from "react";
-import { View, Animated, Easing, ColorValue } from "react-native";
+import React, { useEffect } from "react";
+import { View, ColorValue } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing
+} from "react-native-reanimated";
 import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
 import { useIOTheme } from "../../context";
@@ -34,25 +41,23 @@ export const LoadingSpinner = ({
   testID = "LoadingSpinnerTestID"
 }: LoadingSpinner): React.ReactElement => {
   const theme = useIOTheme();
-  const rotationDegree = useRef(new Animated.Value(0)).current;
+  const rotation = useSharedValue(0);
   const stroke: number = strokeMap[size];
 
   const color = customColor ?? IOColors[theme["interactiveElem-default"]];
 
   useEffect(() => {
-    const animation = Animated.loop(
-      Animated.timing(rotationDegree, {
-        toValue: 360,
-        duration: durationMs,
-        easing: Easing.linear,
-        useNativeDriver: true
-      })
+    // eslint-disable-next-line functional/immutable-data
+    rotation.value = withRepeat(
+      withTiming(360, { duration: durationMs, easing: Easing.linear }),
+      -1,
+      false
     );
+  }, [durationMs, rotation]);
 
-    animation.start();
-
-    return () => animation.stop();
-  }, [durationMs, rotationDegree, theme]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotateZ: `${rotation.value}deg` }]
+  }));
 
   return (
     <View
@@ -65,16 +70,7 @@ export const LoadingSpinner = ({
     >
       <Animated.View
         testID={"LoadingSpinnerAnimatedTestID"}
-        style={{
-          transform: [
-            {
-              rotateZ: rotationDegree.interpolate({
-                inputRange: [0, 360],
-                outputRange: ["0deg", "360deg"]
-              })
-            }
-          ]
-        }}
+        style={animatedStyle}
       >
         {/* Thanks to Ben Ilegbodu for the article on how to
           create a a SVG gradient loading spinner. Below is

package/src/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap

@@ -174,6 +174,43 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title + Subtitle
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="5"
     style={
       [
         {
@@ -194,7 +231,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title + Subtitle
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -391,6 +428,43 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title only + chev
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="4"
     style={
       [
         {
@@ -411,7 +485,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Title only + chev
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -645,6 +719,43 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="6"
     style={
       [
         {
@@ -665,7 +776,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Badge (badge
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -948,6 +1059,43 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Image (no ic
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="7"
     style={
       [
         {
@@ -968,7 +1116,7 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) With Image (no ic
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -1301,6 +1449,43 @@ exports[`ModuleNavigationAlt - Snapshot Title + Subtitle 1`] = `
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="1"
     style={
       [
         {
@@ -1321,7 +1506,7 @@ exports[`ModuleNavigationAlt - Snapshot Title + Subtitle 1`] = `
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -1518,6 +1703,43 @@ exports[`ModuleNavigationAlt - Snapshot Title only + chevron (onPress) 1`] = `
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="0"
     style={
       [
         {
@@ -1538,7 +1760,7 @@ exports[`ModuleNavigationAlt - Snapshot Title only + chevron (onPress) 1`] = `
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -1772,6 +1994,43 @@ exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="2"
     style={
       [
         {
@@ -1792,7 +2051,7 @@ exports[`ModuleNavigationAlt - Snapshot With Badge (badge + chevron) 1`] = `
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },
@@ -2075,6 +2334,43 @@ exports[`ModuleNavigationAlt - Snapshot With Image (no icon) + chevron (onPress)
   onTouchEnd={[Function]}
 >
   <View
+    collapsable={false}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
+    jestAnimatedStyle={
+      {
+        "value": {
+          "transform": [
+            {
+              "scale": 1,
+            },
+          ],
+        },
+      }
+    }
+    jestInlineStyle={
+      [
+        {
+          "alignItems": "center",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "borderColor": "#E8EBF1",
+        },
+        false,
+      ]
+    }
+    nativeID="3"
     style={
       [
         {
@@ -2095,7 +2391,7 @@ exports[`ModuleNavigationAlt - Snapshot With Image (no icon) + chevron (onPress)
         {
           "transform": [
             {
-              "scale": undefined,
+              "scale": 1,
             },
           ],
         },