Introducing Reanimated 4.2.0

We have just published a new release of Reanimated — version 4.2.0. Despite being a minor release, it brings about some major updates. With Reanimated 4, we decided to ditch the Legacy Architecture to support the push for one default Architecture in React Native. To accelerate the process, we decided to forgo porting some of Reanimated’s features.

Now, when the migration to the New Architecture is in full force, we are finally bringing the missing piece, Shared Element Transitions, to Reanimated 4. It’s our most requested feature (by far), and we are so happy to finally share the progress with you. On top of that, we were working on some opt-in performance enhancements that you can test out in your app today.

Shared Element Transitions

This feature makes it possible to animate views between two different screens. It gives users the feeling of continuity when navigating through your app, and gives it a polished vibe. To test it in your app today, you have to enable the feature flag. Then, all you need to do is assign the same sharedTransitionTag to animated views that live on different screens. Now, when you navigate between those screens, Reanimated will automatically run the animation. For the best experience, you should use react-native-screens in version 4.19+ (which, at the time of publishing this blog post, is available via nightly).

The current version is not intended for use in production, but if you want to try, we are excited to hear about your experience. Releasing SETs behind a feature flag is meant to give us room for gathering your feedback before we fully finalize the implementation. Should you find any problems, please create an issue on our GitHub.

Performance

As an animation library, our main priority is to provide the best-in-class performance. Investigating New Architecture regressions in our clients' apps led us to some new ideas about how we should interact with the renderer. The fix brought a 3x performance improvement on a complex app, and you can test it now using this feature flag. It will be especially useful if you have many components that were animated at some point, but are currently at rest. We also addressed some scrolling-related issues; you can test that with this feature flag.

We decided to roll out those fixes gradually, through feature flags, as they touch the most sensitive parts of our code base. If you want to know more about Reanimated’s performance, you should read the Performance page in our docs. You can also expect a more in-depth blog post on this topic in the near future.

Some other improvements

You can now use string values in useAnimatedStyle to animate transform and filter. It means that you can embed shared values, using string formatting, and we will parse them for you.

transform: `rotate(${sv.value}deg) scale(${sv2.value})`

As maintenance goes, we also worked on ensuring that both React Native 0.82 & 0.83 will work well with the new version of Reanimated.

How to use our new stuff

As mentioned above, many of the new functionalities are gated with a feature flag. We do that to protect users who value reliability and are mainly interested in getting support for newer versions of React Native. At the same time, we want to test changes that will make Reanimated the best solution even for the most demanding projects. To use the features mentioned in this post, we have an instruction in our docs, and the flags are as follows:

• ENABLE_SHARED_ELEMENT_TRANSITIONS — lets you use Shared Element Transitions, but introduces some changes in the behavior of Layout Animations.
• FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS — synchronizes the animation state with React through a scheduled re-render, allowing us to perform less work on subsequent updates.
• USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS — makes our reconciliation run only for updates originating from React. Updates that live in C++ only, like scroll state updates, will now skip doing expensive synchronization work.

Thank you!

As always, we would like to extend a huge thank you to Shopify, which has sponsored our open source endeavors since the early days of Reanimated 2. And big thanks to you, our users, for always supporting us.

We are Software Mansion — multimedia experts, AI explorers, React Native core contributors, community builders, and software development consultants. Need help with building your next dream product? You can hire us.