Skip to content

Commit 23d96d9

Browse files
authored
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.
1 parent 6c06cc4 commit 23d96d9

21 files changed

Lines changed: 767 additions & 696 deletions

File tree

apps/basic-example/ios/Podfile.lock

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1807,7 +1807,7 @@ PODS:
18071807
- ReactCommon/turbomodule/core
18081808
- ReactNativeDependencies
18091809
- Yoga
1810-
- RNReanimated (4.2.2):
1810+
- RNReanimated (4.3.0):
18111811
- hermes-engine
18121812
- RCTRequired
18131813
- RCTTypeSafety
@@ -1829,10 +1829,11 @@ PODS:
18291829
- ReactCommon/turbomodule/bridging
18301830
- ReactCommon/turbomodule/core
18311831
- ReactNativeDependencies
1832-
- RNReanimated/reanimated (= 4.2.2)
1832+
- RNReanimated/apple (= 4.3.0)
1833+
- RNReanimated/common (= 4.3.0)
18331834
- RNWorklets
18341835
- Yoga
1835-
- RNReanimated/reanimated (4.2.2):
1836+
- RNReanimated/apple (4.3.0):
18361837
- hermes-engine
18371838
- RCTRequired
18381839
- RCTTypeSafety
@@ -1854,10 +1855,9 @@ PODS:
18541855
- ReactCommon/turbomodule/bridging
18551856
- ReactCommon/turbomodule/core
18561857
- ReactNativeDependencies
1857-
- RNReanimated/reanimated/apple (= 4.2.2)
18581858
- RNWorklets
18591859
- Yoga
1860-
- RNReanimated/reanimated/apple (4.2.2):
1860+
- RNReanimated/common (4.3.0):
18611861
- hermes-engine
18621862
- RCTRequired
18631863
- RCTTypeSafety
@@ -1881,7 +1881,7 @@ PODS:
18811881
- ReactNativeDependencies
18821882
- RNWorklets
18831883
- Yoga
1884-
- RNWorklets (0.7.4):
1884+
- RNWorklets (0.8.1):
18851885
- hermes-engine
18861886
- RCTRequired
18871887
- RCTTypeSafety
@@ -1903,9 +1903,10 @@ PODS:
19031903
- ReactCommon/turbomodule/bridging
19041904
- ReactCommon/turbomodule/core
19051905
- ReactNativeDependencies
1906-
- RNWorklets/worklets (= 0.7.4)
1906+
- RNWorklets/apple (= 0.8.1)
1907+
- RNWorklets/common (= 0.8.1)
19071908
- Yoga
1908-
- RNWorklets/worklets (0.7.4):
1909+
- RNWorklets/apple (0.8.1):
19091910
- hermes-engine
19101911
- RCTRequired
19111912
- RCTTypeSafety
@@ -1927,9 +1928,8 @@ PODS:
19271928
- ReactCommon/turbomodule/bridging
19281929
- ReactCommon/turbomodule/core
19291930
- ReactNativeDependencies
1930-
- RNWorklets/worklets/apple (= 0.7.4)
19311931
- Yoga
1932-
- RNWorklets/worklets/apple (0.7.4):
1932+
- RNWorklets/common (0.8.1):
19331933
- hermes-engine
19341934
- RCTRequired
19351935
- RCTTypeSafety
@@ -2029,7 +2029,7 @@ DEPENDENCIES:
20292029
- ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
20302030
- ReactNativeDependencies (from `../../../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec`)
20312031
- RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
2032-
- RNReanimated (from `../node_modules/react-native-reanimated`)
2032+
- RNReanimated (from `../../../node_modules/react-native-reanimated`)
20332033
- RNWorklets (from `../../../node_modules/react-native-worklets`)
20342034
- Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
20352035

@@ -2182,7 +2182,7 @@ EXTERNAL SOURCES:
21822182
RNGestureHandler:
21832183
:path: "../../../node_modules/react-native-gesture-handler"
21842184
RNReanimated:
2185-
:path: "../node_modules/react-native-reanimated"
2185+
:path: "../../../node_modules/react-native-reanimated"
21862186
RNWorklets:
21872187
:path: "../../../node_modules/react-native-worklets"
21882188
Yoga:
@@ -2262,8 +2262,8 @@ SPEC CHECKSUMS:
22622262
ReactCommon: 92b53b0bd7f7d86154dc9f512c1ea5dee717cc72
22632263
ReactNativeDependencies: cf9de3b9e7ce76047f11476f4c62a82a620a08b6
22642264
RNGestureHandler: 2e53f5ed97c5dcfc9ac99594691f8729b306418d
2265-
RNReanimated: 5f55bdf64aa36d64f1bc526acfff79f016b57f4d
2266-
RNWorklets: 8497c4bd8c9eae405a60c1b3823856aee2ffe95c
2265+
RNReanimated: c05b534f68caa202da4dcc3fd619eab48f67f7bd
2266+
RNWorklets: 9df54090e67c12b662f1eb1dc98132adafcfa666
22672267
Yoga: 772166513f9cd2d61a6251d0dacbbfaa5b537479
22682268

22692269
PODFILE CHECKSUM: ecce038d8e4749ee17b7dea28be0590cdc8b4836

apps/basic-example/metro.config.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,11 @@ const { getDefaultConfig } = require('@react-native/metro-config');
22
const { mergeConfig } = require('metro-config');
33

44
const path = require('path');
5-
const exclusionList = require('metro-config/private/defaults/exclusionList').default;
5+
const exclusionList =
6+
require('metro-config/private/defaults/exclusionList').default;
67
const escape = require('escape-string-regexp');
78

8-
// Gesture handler tries to require 'react-native-reanimated' inside a try...catch
9-
// block. In root directory, we have reanimated installed but FabricExample doesn't.
10-
// We need to blacklist reanimated to prevent its JS code from bein in the bundle
11-
// without the native code or the babel plugin.
12-
const modulesBlacklist = ['react-native-reanimated'];
9+
const modulesBlacklist = [];
1310

1411
const projectRoot = __dirname;
1512
const monorepoRoot = path.resolve(projectRoot, '../..');

apps/basic-example/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
"react": "19.2.3",
2121
"react-native": "0.84.0",
2222
"react-native-gesture-handler": "workspace:*",
23-
"react-native-reanimated": "^4.2.2",
24-
"react-native-worklets": "^0.7.4"
23+
"react-native-reanimated": "^4.3.0",
24+
"react-native-worklets": "^0.8.1"
2525
},
2626
"devDependencies": {
2727
"@babel/core": "^7.25.2",

apps/common-app/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,10 @@
2323
"@react-navigation/stack": "^7.2.10",
2424
"@swmansion/icons": "^0.0.1",
2525
"react-native-gesture-handler": "workspace:*",
26-
"react-native-reanimated": "^3.18.0",
26+
"react-native-reanimated": "^4.3.0",
2727
"react-native-safe-area-context": "^5.4.0",
28-
"react-native-screens": "^4.10.0"
28+
"react-native-screens": "^4.10.0",
29+
"react-native-worklets": "^0.8.1"
2930
},
3031
"devDependencies": {
3132
"@babel/core": "^7.25.2",

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Animated, {
1616
useAnimatedStyle,
1717
runOnJS,
1818
withSpring,
19+
AnimatedRef,
1920
} from 'react-native-reanimated';
2021
import Header, { HEADER_HEIGHT } from './Header';
2122
import {
@@ -111,11 +112,14 @@ interface ScrollComponentWithOffsetProps extends ScrollViewProps {
111112
scrollOffset: SharedValue<number>;
112113
animatedScrollEnabled: SharedValue<boolean>;
113114
dragGesture: GestureType;
114-
ref?: React.RefObject<Animated.ScrollView | null>;
115+
ref?: AnimatedRef<Animated.ScrollView>;
115116
}
116117

117118
const ScrollComponentWithOffset = ({
118119
ref,
120+
scrollOffset,
121+
animatedScrollEnabled,
122+
dragGesture,
119123
...props
120124
}: ScrollComponentWithOffsetProps) => {
121125
const scrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -126,7 +130,7 @@ const ScrollComponentWithOffset = ({
126130
return scrollViewOffset.value;
127131
},
128132
(offset) => {
129-
props.scrollOffset.value = offset;
133+
scrollOffset.value = offset;
130134
}
131135
);
132136

@@ -138,13 +142,13 @@ const ScrollComponentWithOffset = ({
138142

139143
const scrollProps = useAnimatedProps(() => {
140144
return {
141-
scrollEnabled: props.animatedScrollEnabled.value,
145+
scrollEnabled: animatedScrollEnabled.value,
142146
};
143147
});
144148

145149
const scrollGesture = Gesture.Native()
146150
.disallowInterruption(true)
147-
.simultaneousWithExternalGesture(props.dragGesture);
151+
.simultaneousWithExternalGesture(dragGesture);
148152

149153
return (
150154
<GestureDetector gesture={scrollGesture}>

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ import React from 'react';
22
import { CameraView, useCameraPermissions, CameraViewProps } from 'expo-camera';
33
import { Button, StyleSheet, Text, View } from 'react-native';
44
import Animated, {
5-
AnimateProps,
5+
SharedValue,
66
useAnimatedProps,
7+
AnimatedRef,
78
} from 'react-native-reanimated';
89

910
const AnimatedCameraView = Animated.createAnimatedComponent(CameraView);
1011

1112
interface CameraProps extends Omit<CameraViewProps, 'zoom'> {
12-
ref?: React.RefObject<
13-
React.Component<AnimateProps<CameraViewProps>, any, any>
14-
>;
15-
zoom: Animated.SharedValue<number>;
13+
ref?:
14+
| (AnimatedRef | React.Ref<CameraView> | AnimatedRef<typeof CameraView>)
15+
| undefined;
16+
zoom: SharedValue<number>;
1617
}
1718

1819
const Camera = ({ ref, ...props }: CameraProps) => {

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,8 @@ import Animated, {
99
} from 'react-native-reanimated';
1010

1111
const signalerConfig = {
12-
duration: 200,
13-
dampingRatio: 1,
1412
stiffness: 500,
1513
overshootClamping: true,
16-
restDisplacementThreshold: 0.01,
17-
restSpeedThreshold: 2,
1814
};
1915

2016
export function DelayedPressExample() {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
LegacyScrollView,
1414
} from 'react-native-gesture-handler';
1515
import Animated, {
16+
SharedValue,
1617
useSharedValue,
1718
useAnimatedStyle,
1819
withTiming,
@@ -53,7 +54,7 @@ export default function CalculatorUI() {
5354
}
5455

5556
interface OutputProps {
56-
offset: Animated.SharedValue<number>;
57+
offset: SharedValue<number>;
5758
expression: string;
5859
history: string[];
5960
}
@@ -172,7 +173,7 @@ interface InputProps {
172173
setHistory: Dispatch<SetStateAction<string[]>>;
173174
setExpression: Dispatch<SetStateAction<string>>;
174175
measure: (e: LayoutChangeEvent) => void;
175-
offset: Animated.SharedValue<number>;
176+
offset: SharedValue<number>;
176177
expression: string;
177178
}
178179

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import { StyleSheet, ImageStyle, LayoutChangeEvent } from 'react-native';
33
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
44
import Animated, {
5+
SharedValue,
56
useAnimatedStyle,
67
useDerivedValue,
78
useSharedValue,
@@ -18,8 +19,8 @@ const CHAT_HEADS = [
1819
];
1920

2021
interface AnimatedOffset {
21-
x: Animated.SharedValue<number>;
22-
y: Animated.SharedValue<number>;
22+
x: SharedValue<number>;
23+
y: SharedValue<number>;
2324
}
2425

2526
interface FollowingChatHeadProps {

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import {
77
LegacyPanGesture,
88
LegacyTapGesture,
99
} from 'react-native-gesture-handler';
10-
import Animated, { runOnJS, useAnimatedStyle } from 'react-native-reanimated';
10+
import Animated, {
11+
runOnJS,
12+
useAnimatedStyle,
13+
SharedValue,
14+
} from 'react-native-reanimated';
1115

1216
type AnimatedPostion = {
13-
x: Animated.SharedValue<number>;
14-
y: Animated.SharedValue<number>;
17+
x: SharedValue<number>;
18+
y: SharedValue<number>;
1519
};
1620

1721
interface DraggableProps {

0 commit comments

Comments
 (0)