glitches and crashes after migrating to reanimated >= 3.9

[AleCatSS]

Description

Hello Reanimated team!

In our React Native project, we use Reanimated for different animations on multiple screens. Recently, we attempted to update to version 3.11.0 to support React Native 0.74 (as per the compatibility table). After this update, we started experiencing crashes and glitches on animations across the project.

During our investigation, we localized the issue starting from Reanimated version 3.9 by gradually upgrading Reanimated alone, version by version, and keeping all other packages unaltered (including React Native).

From our investigation, it seems crashes and glitches are more prominent in debug mode and on low-end devices (we tested with a real iPhone SE second generation). We were not able to reproduce crashes in release mode, but we were able to see the same glitches in animations (although less frequently).

NOTE: in our project we also use react-native-gesture-handler v2.16.2

Steps to reproduce

Unfortunately we currently don't have specific steps to reproduce, however I suggest:

• create a project with React Native version >= 0.72.12 (our first tested version) and re-animated version >= 3.9;
• add few relatively heavy animations;
• build on iOS/Android in debug mode (also release mode but in debug issues are more prominent);
• test with low-end devices (e.g. iPhone SE second generation both real device or simulator)

Snack or a link to a repository

/

Reanimated version

3.11.0 (issue starts with 3.9.0)

React Native version

0.72.12

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

iPhone SE 2nd generation

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[crrobinson14]

We can confirm here that the same change was very helpful in our app. (We downgraded to 3.7.2.) A few screen transitions are still slower for us on Android than iOS (using react-native-navigation, which uses this library for its transitions) but before we were getting complete hangs/crashes and <=3.7.2 resolves that for us. We haven't had a chance yet to try making an isolated repro but wanted to at least add the data point.

[AleCatSS]

After more investigation we isolated the issue to this PR merged in 3.9:

• Fix dynamically added/removed animated styles on iOS/Android #5268
  and in particular on this file:
• https://github.com/software-mansion/react-native-reanimated/pull/5268/files#diff-058fa197f386de14640b8458134921665342c32dc0a0c8e535ef92b21eb03a08
  I tried locally to revert the whole file and issues disappear.

[szydlovsky]

The fix should be there by the next stable version (3.14.0 or next iteration of 3.13.x)

[AleCatSS]

@szydlovsky thank you.