Skip to content

Bump Reanimated #4040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
m-bert wants to merge 3 commits into
base: main
Choose a base branch
from
+744 −680
Open

Bump Reanimated #4040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eeaff6d
Bump Reanimated
m-bert Mar 26, 2026
35b8d6f
Bump in common-app
m-bert Mar 27, 2026
11cde32
Fix types in examples
m-bert Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions apps/basic-example/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1807,7 +1807,7 @@ PODS:
- ReactCommon/turbomodule/core
- ReactNativeDependencies
- Yoga
- RNReanimated (4.2.2):
- RNReanimated (4.3.0):
- hermes-engine
- RCTRequired
- RCTTypeSafety
Expand All @@ -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
Expand All @@ -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
Expand All @@ -1881,7 +1881,7 @@ PODS:
- ReactNativeDependencies
- RNWorklets
- Yoga
- RNWorklets (0.7.4):
- RNWorklets (0.8.1):
- hermes-engine
- RCTRequired
- RCTTypeSafety
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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`)

Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions apps/basic-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions apps/common-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 8 additions & 4 deletions apps/common-app/src/ListWithHeader/ListWithHeader.tsx
View file
Open in desktop
Copy link
Copy Markdown
Contributor Author

@m-bert m-bert Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this is not necessary to bump Reanimated, we found out that this may cause issues.

The main problem is passing props that are SharedValue into React Native components. This might not be the only place where we do this, but this is the one that we found. Also expo-example app no longer crash so for now we can leave that and keep in mind that it might be worth to check other places in our codebase as well.

Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Animated, {
useAnimatedStyle,
runOnJS,
withSpring,
AnimatedRef,
} from 'react-native-reanimated';
import Header, { HEADER_HEIGHT } from './Header';
import {
Expand Down Expand Up @@ -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>();
Expand All @@ -126,7 +130,7 @@ const ScrollComponentWithOffset = ({
return scrollViewOffset.value;
},
(offset) => {
props.scrollOffset.value = offset;
scrollOffset.value = offset;
}
);

Expand All @@ -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}>
Expand Down
11 changes: 6 additions & 5 deletions apps/common-app/src/common_assets/AnimatedCameraView/AnimatedCameraView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,22 @@
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) => {
const [permission, requestPermission] = useCameraPermissions();

Check warning on line 20 in apps/common-app/src/common_assets/AnimatedCameraView/AnimatedCameraView.tsx

View workflow job for this annotation

GitHub Actions / check (apps/common-app) 

Unsafe array destructuring of a tuple element with an `any` value

const animatedProps = useAnimatedProps(() => {
return {
Expand Down
4 changes: 0 additions & 4 deletions apps/common-app/src/legacy/release_tests/gesturizedPressable/delayedPressExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
5 changes: 3 additions & 2 deletions apps/common-app/src/legacy/v2_api/calculator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
LegacyScrollView,
} from 'react-native-gesture-handler';
import Animated, {
SharedValue,
useSharedValue,
useAnimatedStyle,
withTiming,
Expand Down Expand Up @@ -53,7 +54,7 @@ export default function CalculatorUI() {
}

interface OutputProps {
offset: Animated.SharedValue<number>;
offset: SharedValue<number>;
expression: string;
history: string[];
}
Expand Down Expand Up @@ -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;
}

Expand Down
5 changes: 3 additions & 2 deletions apps/common-app/src/legacy/v2_api/chat_heads/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down
10 changes: 7 additions & 3 deletions apps/common-app/src/legacy/v2_api/drag_n_drop/Draggable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 4 additions & 3 deletions apps/common-app/src/legacy/v2_api/manualGestures/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
SharedValue,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated';
Expand All @@ -13,8 +14,8 @@ interface Pointer {
}

function PointerElement(props: {
pointer: Animated.SharedValue<Pointer>;
active: Animated.SharedValue<boolean>;
pointer: SharedValue<Pointer>;
active: SharedValue<boolean>;
}) {
const animatedStyle = useAnimatedStyle(() => ({
transform: [
Expand All @@ -33,7 +34,7 @@ function PointerElement(props: {
}

export default function Example() {
const trackedPointers: Animated.SharedValue<Pointer>[] = [];
const trackedPointers: SharedValue<Pointer>[] = [];
const active = useSharedValue(false);

for (let i = 0; i < 12; i++) {
Expand Down
4 changes: 0 additions & 4 deletions apps/common-app/src/new_api/tests/pressable/delayedPress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,8 @@ import {
} from '../../../common';

const signalerConfig = {
duration: 200,
dampingRatio: 1,
stiffness: 500,
overshootClamping: true,
restDisplacementThreshold: 0.01,
restSpeedThreshold: 2,
};

export function DelayedPressExample() {
Expand Down
4 changes: 2 additions & 2 deletions apps/expo-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@
"react-dom": "19.1.0",
"react-native": "0.81.4",
"react-native-gesture-handler": "workspace:*",
"react-native-reanimated": "^4.2.1",
"react-native-reanimated": "^4.3.0",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-svg": "15.12.1",
"react-native-web": "^0.21.0",
"react-native-worklets": "^0.7.1"
"react-native-worklets": "^0.8.1"
Comment on lines 27 to +34
Copy link

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This workspace depends on common-app, which still declares react-native-reanimated@^3.18.0 and no react-native-worklets. After this bump, the repo will install both Reanimated v3 and v4 (see apps/common-app/package.json + yarn.lock), which is very likely to break bundling/runtime because Reanimated is a native module. Consider bumping common-app to react-native-reanimated@^4.3.0 and adding react-native-worklets@^0.8.1 as well, so the monorepo uses a single Reanimated major version.

Copilot uses AI. Check for mistakes.
},
"devDependencies": {
"@babel/core": "^7.25.2",
Expand Down
16 changes: 9 additions & 7 deletions apps/macos-example/macos/MacOSExample.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,15 +320,11 @@
};
D01A669245645FE4195DB892 /* [CP-User] Generate metadata for clangd */ = {
isa = PBXShellScriptBuildPhase;
alwaysOutOfDate = 1;
alwaysOutOfDate = true;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
);
name = "[CP-User] Generate metadata for clangd";
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/bash;
shellScript = "../../../scripts/clangd-generate-xcode-metadata.sh";
Expand Down Expand Up @@ -525,7 +521,10 @@
);
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
OTHER_LDFLAGS = "$(inherited) ";
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
Expand Down Expand Up @@ -584,7 +583,10 @@
"\"$(inherited)\"",
);
MTL_ENABLE_DEBUG_INFO = NO;
OTHER_LDFLAGS = "$(inherited) ";
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
USE_HERMES = true;
Expand Down
Loading
Loading