chore: upgrade react-native-reanimated to 3.16.1 - develop

.changeset/two-icons-jog.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/native-ui": minor
+---
+
+Upgrade react-native-reanimated to 3.16.1

apps/ledger-live-mobile/ios/Podfile.lock

@@ -1527,7 +1527,73 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (2.2.0):
     - React-Core
-  - RNReanimated (3.9.0):
+  - RNReanimated (3.16.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 3.16.1)
+    - RNReanimated/worklets (= 3.16.1)
+    - Yoga
+  - RNReanimated/reanimated (3.16.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated/apple (= 3.16.1)
+    - Yoga
+  - RNReanimated/reanimated/apple (3.16.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNReanimated/worklets (3.16.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2133,7 +2199,7 @@ SPEC CHECKSUMS:
   RNKeychain: f75b8c8b2f17d3b2aa1f25b4a0ac5b83d947ff8f
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
-  RNReanimated: 914b65f0374a96b465c6c126d0c622a703b72474
+  RNReanimated: 8385e21193c0d2ae9f7598b4ea8caa08eb64bc19
   RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
   RNSentry: e7e5d059d62d6c447d83e14800edc1812a594a5d
   RNShare: b674d9f1cb0dc11116983bebd8712908a226a3ee

apps/ledger-live-mobile/package.json

@@ -193,7 +193,7 @@
     "react-native-pager-view": "6.3.0",
     "react-native-qrcode-svg": "6.1.1",
     "react-native-randombytes": "3.6.1",
-    "react-native-reanimated": "3.9.0",
+    "react-native-reanimated": "3.16.1",
     "react-native-restart": "0.0.24",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",

apps/ledger-live-mobile/src/components/AssetCentricGraphCard.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, memo, useMemo } from "react";
 import styled, { useTheme } from "styled-components/native";
 import { Flex, Text, GraphTabs } from "@ledgerhq/native-ui";
 import { getCurrencyColor } from "@ledgerhq/live-common/currencies/index";
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { Currency } from "@ledgerhq/types-cryptoassets";
 import { Portfolio } from "@ledgerhq/types-live";
 import { useTimeRange } from "~/actions/settings";
@@ -112,7 +112,7 @@ function AssetCentricGraphCard({
       currentPositionY.value,
       [graphCardEndPosition + 30, graphCardEndPosition + 50],
       [1, 0],
-      Extrapolate.CLAMP,
+      Extrapolation.CLAMP,
     );
 
     return {

apps/ledger-live-mobile/src/components/CurrencyBackgroundGradient.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { useTheme } from "styled-components/native";
 import CurrencyGradient from "./CurrencyGradient";
 
@@ -17,7 +17,7 @@ function BackgroundGradient({
       currentPositionY.value,
       [graphCardEndPosition - 40, graphCardEndPosition + 40],
       [1, 0],
-      Extrapolate.CLAMP,
+      Extrapolation.CLAMP,
     );
 
     return {

apps/ledger-live-mobile/src/components/CurrencyHeaderLayout.tsx

@@ -2,7 +2,12 @@ import React from "react";
 import { Box, Flex } from "@ledgerhq/native-ui";
 
 import styled from "styled-components/native";
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  SharedValue,
+} from "react-native-reanimated";
 
 import getWindowDimensions from "~/logic/getWindowDimensions";
 import CurrencyGradient from "./CurrencyGradient";
@@ -18,7 +23,7 @@ function CurrencyHeaderLayout({
   leftElement,
   currencyColor,
 }: {
-  currentPositionY: Animated.SharedValue<number>;
+  currentPositionY: SharedValue<number>;
   graphCardEndPosition: number;
   rightElement?: React.ReactNode;
   centerAfterScrollElement?: React.ReactNode;
@@ -34,7 +39,7 @@ function CurrencyHeaderLayout({
             currentPositionY.value,
             [graphCardEndPosition - 40, graphCardEndPosition],
             [1, 0],
-            Extrapolate.CLAMP,
+            Extrapolation.CLAMP,
           );
 
     return {
@@ -47,7 +52,7 @@ function CurrencyHeaderLayout({
       currentPositionY.value,
       [graphCardEndPosition + 50, graphCardEndPosition + 70],
       [0, 1],
-      Extrapolate.CLAMP,
+      Extrapolation.CLAMP,
     );
 
     return {
@@ -60,7 +65,7 @@ function CurrencyHeaderLayout({
       currentPositionY.value,
       [graphCardEndPosition - 40, graphCardEndPosition - 20],
       [0, 1],
-      Extrapolate.CLAMP,
+      Extrapolation.CLAMP,
     );
 
     return {

apps/ledger-live-mobile/src/components/GraphCard.tsx

@@ -3,7 +3,7 @@ import { Flex, Text, GraphTabs } from "@ledgerhq/native-ui";
 import { Currency } from "@ledgerhq/types-cryptoassets";
 import { Portfolio } from "@ledgerhq/types-live";
 import styled, { useTheme } from "styled-components/native";
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from "react-native-reanimated";
 import { useSelector } from "react-redux";
 import Delta from "./Delta";
 import { TransactionsPendingConfirmationWarningAllAccounts } from "./TransactionsPendingConfirmationWarning";
@@ -86,7 +86,7 @@ function GraphCard({
       currentPositionY.value,
       [graphCardEndPosition + 30, graphCardEndPosition + 50],
       [1, 0],
-      Extrapolate.CLAMP,
+      Extrapolation.CLAMP,
     );
 
     return {

apps/ledger-live-mobile/src/screens/NotificationCenter/Snackbar/Snackbar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { TouchableHighlight } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
   useSharedValue,
   withTiming,
   Easing,
@@ -75,18 +75,18 @@ export default function Snackbar({ toast, cta, onPress, onClose }: Props) {
   const Icon = icon ? icons[icon as IconsKeys] : undefined;
 
   const animatedTouchableOpacityStyle = useAnimatedStyle(() => {
-    const maxHeight = interpolate(openState.value, [0, 0.4, 1], [0, 200, 200], Extrapolate.CLAMP);
+    const maxHeight = interpolate(openState.value, [0, 0.4, 1], [0, 200, 200], Extrapolation.CLAMP);
 
     const translateX = interpolate(
       openState.value,
       [0, 0.6, 1],
       [width + 100, width - 100, 0],
-      Extrapolate.CLAMP,
+      Extrapolation.CLAMP,
     );
 
-    const opacity = interpolate(openState.value, [0, 0.6, 1], [0, 0, 1], Extrapolate.CLAMP);
+    const opacity = interpolate(openState.value, [0, 0.6, 1], [0, 0, 1], Extrapolation.CLAMP);
 
-    const marginBottom = interpolate(openState.value, [0, 0.4, 1], [0, 8, 8], Extrapolate.CLAMP);
+    const marginBottom = interpolate(openState.value, [0, 0.4, 1], [0, 8, 8], Extrapolation.CLAMP);
 
     return {
       maxHeight,

apps/ledger-live-mobile/src/screens/Platform/v2/Catalog/Layout.tsx

@@ -2,7 +2,7 @@ import { Flex, ScrollContainer, Text } from "@ledgerhq/native-ui";
 import React from "react";
 import { StyleSheet } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
   interpolate,
   useAnimatedScrollHandler,
   useAnimatedStyle,
@@ -48,7 +48,7 @@ export function Layout({
   const opacityStyle = useAnimatedStyle(() => {
     const opacity = isTitleVisible
       ? 1
-      : interpolate(scrollY.value, [0, 76], [0, 1], Extrapolate.CLAMP);
+      : interpolate(scrollY.value, [0, 76], [0, 1], Extrapolation.CLAMP);
 
     return {
       opacity,

apps/ledger-live-mobile/src/screens/Settings/Experimental/ExperimentalHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
   interpolate,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -66,7 +66,7 @@ function ExperimentalHeader() {
 
   // Animated style updating the height depending on the opening animation state
   const heightStyle = useAnimatedStyle(() => ({
-    height: interpolate(openState.value, [0, 1], [0, HEIGHT + top], Extrapolate.CLAMP),
+    height: interpolate(openState.value, [0, 1], [0, HEIGHT + top], Extrapolation.CLAMP),
   }));
 
   const onPressMock = useCallback(() => {

libs/ui/packages/native/package.json

@@ -67,7 +67,7 @@
   "peerDependencies": {
     "react": ">=17",
     "react-native": ">=0.64.0",
-    "react-native-reanimated": "3.8.1",
+    "react-native-reanimated": "3.16.1",
     "react-native-svg": ">=12.1.1",
     "styled-components": "^5.3.3"
   },
@@ -151,7 +151,7 @@
     "react-dom": "^18.2.0",
     "react-is": "^18",
     "react-native": "0.74.6",
-    "react-native-reanimated": "3.8.1",
+    "react-native-reanimated": "3.16.1",
     "react-native-safe-area-context": "^4.10.9",
     "react-native-svg": "13.14.0",
     "react-native-web": "~0.19.6",