[Due for payment 2026-02-17] Upgrade react-native-reanimated to latest

[mountiny]

Problem

When the version of react-native-reanimated we use in our app is 4.1.5, if we try to upgrade to RN 0.82+, then we have errors.

Solution

Upgrade react-native-reanimated to latest (4.2.1)

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Upgrade react-native-reanimated to latest

What is the root cause of that problem?

upgrade react-native-reanimated

What changes do you think we should make in order to solve the problem?

Our current verison in App is (4.1.5) upgrade react-native-reanimated to latest version (4.2.1) with

npm install react-native-reanimated@latest

and update iOS Pods

npm run pod-install

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ChavdaSachin]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bumo react-native-reanimated to 4.2.1

What is the root cause of that problem?

Library upgrade

What changes do you think we should make in order to solve the problem?

To bump react-native-reanimated to 4.2.1 we would also be required to bump react-native-worklets to >=0.7.0 version with 0.7.2 being the latest version.

Currently we do have an existing patch for the react-native-reanimated library which we need to test if we still need the patch or not.

New patch being something like...(library has changed the relevant file structure)

diff --git a/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.cpp b/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp
....
--- a/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp
+++ b/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy_Legacy.cpp
@@ -785,7 +785,7 @@ void LayoutAnimationsProxy::transferConfigFromNativeID(
     auto nativeId = stoi(nativeIdString);
     layoutAnimationsManager_->transferConfigFromNativeID(nativeId, tag);
   } catch (std::invalid_argument) {
-  } catch (std::out_of_range) {
+  } catch (...) {
   }
 }

Note: when the patch was added, it had description - Fix crash when opening search commit and no further discussion,
After upgrading we could remove the patch perhaps, since search page is loading without any issue, but that needs to be discussed.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Upgrade react-native-reanimated to latest

What is the root cause of that problem?

Upgrade

What changes do you think we should make in order to solve the problem?

1. npm install react-native-reanimated@4.2.1
2. Install Pods

cd ios
pod install
cd ..

3. Verify babel config

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    // other plugins…
    'react-native-reanimated/plugin',
  ],
};

4. Patches to migrate:

https://github.com/Expensify/App/blob/main/patches/react-native-reanimated/react-native-reanimated%2B4.1.5%2B001%2Bcatch-all-exceptions-on-stoi.patch

diff --git a/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.cpp b/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.cpp
index 6574d2d..8cb9b2f 100644
--- a/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.cpp
+++ b/node_modules/react-native-reanimated/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.cpp
@@ -805,7 +805,7 @@ void LayoutAnimationsProxy::transferConfigFromNativeID(
     auto nativeId = stoi(nativeIdString);
     layoutAnimationsManager_->transferConfigFromNativeID(nativeId, tag);
   } catch (std::invalid_argument) {
-  } catch (std::out_of_range) {
+  } catch (...) {
   }
 }

5. Clear caches:

watchman watch-del-all
rm -rf node_modules
npm install
npm start --reset-cache

IOS:

cd ios && rm -rf build && cd ..

Android:

cd android && ./gradlew clean && cd ..

Android specific check:

Make sure Hermes is enabled (Reanimated 3 strongly prefers it):

android/app/build.gradle:

enableHermes: true

rebuild the app

6. Major breaking changes:

• Worklets are now much stricter:

What breaks

useAnimatedStyle(() => {
    return {
        opacity: someJSFunction()
    };
});

Fix

• Move logic inside worklet or pass primitive only:

useAnimatedStyle(() => {
    return {
        opacity: sharedValue.value > 0 ? 1 : 0,
    };
});

2. No more implicit closure access:

what breaks

const theme = useTheme();

useAnimatedStyle(() => ({
    backgroundColor: theme.cardBG
}));

Fix

Pass values explicitly:

const bg = theme.cardBG;

useAnimatedStyle(() => ({
    backgroundColor: bg
}));

3. Amimated.event is outdated:

What breaks

Animated.event(
  [{ nativeEvent: { contentOffset: { y: scrollY }}}],
  { useNativeDriver: true }
);

Fix

• Use handlers

const onScroll = useAnimatedScrollHandler({
  onScroll: (event) => {
    scrollY.value = event.contentOffset.y;
  },
});

4. Layout animations API changes

What breaks

Layout.springify() 

Fix

import {Layout} from 'react-native-reanimated';

<Animated.View layout={Layout.springify()} /> // before
<Animated.View layout={Layout.spring()} />    // After

What alternative solutions did you explore? (Optional)

n/A

Result

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.