Bump Reanimated (#4040)

## Description

This PR bumps Reanimated version, along with worklets. Since in
`common-app` we still had Reanimated 3.18, I've also introduced
necessary changes to types.

Also, it turned out that our current setup cannot correctly resolve
dependencies - I've updated `metro.config.js` to also block
`common-app`, since this "app" only contains sources for examples and
their `node_modules` shouldn't be used.

## Test plan

Build and run example apps.

Author: m-bert

apps/basic-example/ios/Podfile.lock

@@ -1807,7 +1807,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
-  - RNReanimated (4.2.2):
+  - RNReanimated (4.3.0):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1829,10 +1829,11 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-    - RNReanimated/reanimated (= 4.2.2)
+    - RNReanimated/apple (= 4.3.0)
+    - RNReanimated/common (= 4.3.0)
     - RNWorklets
     - Yoga
-  - RNReanimated/reanimated (4.2.2):
+  - RNReanimated/apple (4.3.0):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1854,10 +1855,9 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-    - RNReanimated/reanimated/apple (= 4.2.2)
     - RNWorklets
     - Yoga
-  - RNReanimated/reanimated/apple (4.2.2):
+  - RNReanimated/common (4.3.0):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1881,7 +1881,7 @@ PODS:
     - ReactNativeDependencies
     - RNWorklets
     - Yoga
-  - RNWorklets (0.7.4):
+  - RNWorklets (0.8.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1903,9 +1903,10 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-    - RNWorklets/worklets (= 0.7.4)
+    - RNWorklets/apple (= 0.8.1)
+    - RNWorklets/common (= 0.8.1)
     - Yoga
-  - RNWorklets/worklets (0.7.4):
+  - RNWorklets/apple (0.8.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1927,9 +1928,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-    - RNWorklets/worklets/apple (= 0.7.4)
     - Yoga
-  - RNWorklets/worklets/apple (0.7.4):
+  - RNWorklets/common (0.8.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -2029,7 +2029,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
   - ReactNativeDependencies (from `../../../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec`)
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNWorklets (from `../../../node_modules/react-native-worklets`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
 
@@ -2182,7 +2182,7 @@ EXTERNAL SOURCES:
   RNGestureHandler:
     :path: "../../../node_modules/react-native-gesture-handler"
   RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
+    :path: "../../../node_modules/react-native-reanimated"
   RNWorklets:
     :path: "../../../node_modules/react-native-worklets"
   Yoga:
@@ -2262,8 +2262,8 @@ SPEC CHECKSUMS:
   ReactCommon: 92b53b0bd7f7d86154dc9f512c1ea5dee717cc72
   ReactNativeDependencies: cf9de3b9e7ce76047f11476f4c62a82a620a08b6
   RNGestureHandler: 2e53f5ed97c5dcfc9ac99594691f8729b306418d
-  RNReanimated: 5f55bdf64aa36d64f1bc526acfff79f016b57f4d
-  RNWorklets: 8497c4bd8c9eae405a60c1b3823856aee2ffe95c
+  RNReanimated: c05b534f68caa202da4dcc3fd619eab48f67f7bd
+  RNWorklets: 9df54090e67c12b662f1eb1dc98132adafcfa666
   Yoga: 772166513f9cd2d61a6251d0dacbbfaa5b537479
 
 PODFILE CHECKSUM: ecce038d8e4749ee17b7dea28be0590cdc8b4836

apps/basic-example/metro.config.js

@@ -2,14 +2,11 @@ const { getDefaultConfig } = require('@react-native/metro-config');
 const { mergeConfig } = require('metro-config');
 
 const path = require('path');
-const exclusionList = require('metro-config/private/defaults/exclusionList').default;
+const exclusionList =
+  require('metro-config/private/defaults/exclusionList').default;
 const escape = require('escape-string-regexp');
 
-// Gesture handler tries to require 'react-native-reanimated' inside a try...catch
-// block. In root directory, we have reanimated installed but FabricExample doesn't.
-// We need to blacklist reanimated to prevent its JS code from bein in the bundle
-// without the native code or the babel plugin.
-const modulesBlacklist = ['react-native-reanimated'];
+const modulesBlacklist = [];
 
 const projectRoot = __dirname;
 const monorepoRoot = path.resolve(projectRoot, '../..');

apps/basic-example/package.json

@@ -20,8 +20,8 @@
     "react": "19.2.3",
     "react-native": "0.84.0",
     "react-native-gesture-handler": "workspace:*",
-    "react-native-reanimated": "^4.2.2",
-    "react-native-worklets": "^0.7.4"
+    "react-native-reanimated": "^4.3.0",
+    "react-native-worklets": "^0.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/common-app/package.json

@@ -23,9 +23,10 @@
     "@react-navigation/stack": "^7.2.10",
     "@swmansion/icons": "^0.0.1",
     "react-native-gesture-handler": "workspace:*",
-    "react-native-reanimated": "^3.18.0",
+    "react-native-reanimated": "^4.3.0",
     "react-native-safe-area-context": "^5.4.0",
-    "react-native-screens": "^4.10.0"
+    "react-native-screens": "^4.10.0",
+    "react-native-worklets": "^0.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/common-app/src/ListWithHeader/ListWithHeader.tsx

@@ -16,6 +16,7 @@ import Animated, {
   useAnimatedStyle,
   runOnJS,
   withSpring,
+  AnimatedRef,
 } from 'react-native-reanimated';
 import Header, { HEADER_HEIGHT } from './Header';
 import {
@@ -111,11 +112,14 @@ interface ScrollComponentWithOffsetProps extends ScrollViewProps {
   scrollOffset: SharedValue<number>;
   animatedScrollEnabled: SharedValue<boolean>;
   dragGesture: GestureType;
-  ref?: React.RefObject<Animated.ScrollView | null>;
+  ref?: AnimatedRef<Animated.ScrollView>;
 }
 
 const ScrollComponentWithOffset = ({
   ref,
+  scrollOffset,
+  animatedScrollEnabled,
+  dragGesture,
   ...props
 }: ScrollComponentWithOffsetProps) => {
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -126,7 +130,7 @@ const ScrollComponentWithOffset = ({
       return scrollViewOffset.value;
     },
     (offset) => {
-      props.scrollOffset.value = offset;
+      scrollOffset.value = offset;
     }
   );
 
@@ -138,13 +142,13 @@ const ScrollComponentWithOffset = ({
 
   const scrollProps = useAnimatedProps(() => {
     return {
-      scrollEnabled: props.animatedScrollEnabled.value,
+      scrollEnabled: animatedScrollEnabled.value,
     };
   });
 
   const scrollGesture = Gesture.Native()
     .disallowInterruption(true)
-    .simultaneousWithExternalGesture(props.dragGesture);
+    .simultaneousWithExternalGesture(dragGesture);
 
   return (
     <GestureDetector gesture={scrollGesture}>

apps/common-app/src/common_assets/AnimatedCameraView/AnimatedCameraView.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 import { CameraView, useCameraPermissions, CameraViewProps } from 'expo-camera';
 import { Button, StyleSheet, Text, View } from 'react-native';
 import Animated, {
-  AnimateProps,
+  SharedValue,
   useAnimatedProps,
+  AnimatedRef,
 } from 'react-native-reanimated';
 
 const AnimatedCameraView = Animated.createAnimatedComponent(CameraView);
 
 interface CameraProps extends Omit<CameraViewProps, 'zoom'> {
-  ref?: React.RefObject<
-    React.Component<AnimateProps<CameraViewProps>, any, any>
-  >;
-  zoom: Animated.SharedValue<number>;
+  ref?:
+    | (AnimatedRef | React.Ref<CameraView> | AnimatedRef<typeof CameraView>)
+    | undefined;
+  zoom: SharedValue<number>;
 }
 
 const Camera = ({ ref, ...props }: CameraProps) => {

apps/common-app/src/legacy/release_tests/gesturizedPressable/delayedPressExample.tsx

@@ -9,12 +9,8 @@ import Animated, {
 } from 'react-native-reanimated';
 
 const signalerConfig = {
-  duration: 200,
-  dampingRatio: 1,
   stiffness: 500,
   overshootClamping: true,
-  restDisplacementThreshold: 0.01,
-  restSpeedThreshold: 2,
 };
 
 export function DelayedPressExample() {

apps/common-app/src/legacy/v2_api/calculator/index.tsx

@@ -13,6 +13,7 @@ import {
   LegacyScrollView,
 } from 'react-native-gesture-handler';
 import Animated, {
+  SharedValue,
   useSharedValue,
   useAnimatedStyle,
   withTiming,
@@ -53,7 +54,7 @@ export default function CalculatorUI() {
 }
 
 interface OutputProps {
-  offset: Animated.SharedValue<number>;
+  offset: SharedValue<number>;
   expression: string;
   history: string[];
 }
@@ -172,7 +173,7 @@ interface InputProps {
   setHistory: Dispatch<SetStateAction<string[]>>;
   setExpression: Dispatch<SetStateAction<string>>;
   measure: (e: LayoutChangeEvent) => void;
-  offset: Animated.SharedValue<number>;
+  offset: SharedValue<number>;
   expression: string;
 }
 

apps/common-app/src/legacy/v2_api/chat_heads/index.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { StyleSheet, ImageStyle, LayoutChangeEvent } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -18,8 +19,8 @@ const CHAT_HEADS = [
 ];
 
 interface AnimatedOffset {
-  x: Animated.SharedValue<number>;
-  y: Animated.SharedValue<number>;
+  x: SharedValue<number>;
+  y: SharedValue<number>;
 }
 
 interface FollowingChatHeadProps {

apps/common-app/src/legacy/v2_api/drag_n_drop/Draggable.tsx

@@ -7,11 +7,15 @@ import {
   LegacyPanGesture,
   LegacyTapGesture,
 } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  SharedValue,
+} from 'react-native-reanimated';
 
 type AnimatedPostion = {
-  x: Animated.SharedValue<number>;
-  y: Animated.SharedValue<number>;
+  x: SharedValue<number>;
+  y: SharedValue<number>;
 };
 
 interface DraggableProps {