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

package/src/components/headers/HeaderFirstLevel.tsx

@@ -8,7 +8,7 @@ import {
 import Animated, {
   AnimatedRef,
   useAnimatedStyle,
-  useScrollViewOffset,
+  useScrollOffset,
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
@@ -85,7 +85,7 @@ export const HeaderFirstLevel = ({
   }, []);
 
   /* We show the divider only when the header is scrolled down */
-  const offset = useScrollViewOffset(
+  const offset = useScrollOffset(
     (animatedRef as AnimatedRef<Animated.ScrollView>) ||
       (animatedFlatListRef as AnimatedRef<Animated.FlatList<any>>)
   );

package/src/components/headers/HeaderSecondLevel.tsx

@@ -13,15 +13,15 @@ import Animated, {
   SharedValue,
   interpolate,
   interpolateColor,
-  runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
-  useScrollViewOffset,
+  useScrollOffset,
   useSharedValue,
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useIONewTypeface, useIOTheme } from "../../context";
 import {
@@ -157,7 +157,7 @@ export const HeaderSecondLevel = ({
   thirdAction,
   ignoreAccessibilityCheck = false
 }: HeaderSecondLevel) => {
-  const scrollOffset = useScrollViewOffset(
+  const scrollOffset = useScrollOffset(
     (animatedRef as AnimatedRef<Animated.ScrollView>) ||
       (animatedRef as AnimatedRef<Animated.FlatList<any>>)
   );
@@ -289,7 +289,7 @@ export const HeaderSecondLevel = ({
           (currentOffset ?? 0) > offsetToCompare && !ignoreAccessibilityCheck
             ? "yes"
             : "no-hide-descendants";
-        runOnJS(setImportantForAccessibility)(newValue);
+        scheduleOnRN(setImportantForAccessibility, newValue);
       }
     },
     [scrollValues, enableDiscreteTransition]

package/src/components/layout/FooterActions.tsx

@@ -8,7 +8,7 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import Animated from "react-native-reanimated";
+import Animated, { AnimatedStyle } from "react-native-reanimated";
 import { useIOTheme } from "../../context";
 import {
   IOColors,
@@ -72,9 +72,9 @@ type FooterActions = FooterSingleButton | FooterTwoButtons | FooterThreeButtons;
 
 type FooterAnimatedStyles = {
   /* Apply object returned by `useAnimatedStyle` to the main block */
-  mainBlock?: Animated.AnimateStyle<ViewStyle>;
+  mainBlock?: AnimatedStyle<ViewStyle>;
   /* Apply object returned by `useAnimatedStyle` to the background */
-  background?: Animated.AnimateStyle<ViewStyle>;
+  background?: AnimatedStyle<ViewStyle>;
 };
 
 type FooterActionsProps = WithTestID<