React Native Reanimated 4 Stable Out — Animations by CSS! 🙀

The CSS-based animations and transitions API simplifies code writing.

Aug 03, 2025

Six months ago, the Software Mansion team released the beta version of React Native Reanimated 4, and last week, they finally released its stable version. The team described this release as another significant milestone in the development history of this SDK. Featuring

Animations and Transitions now by CSS! 🔥
Introduced new React Native Worklets SDK 🚀
Easy migration — From 3.x to 4.x 💯

React20Bulletin brings this news to your MAIL every Tuesday — SUBSCRIBE 🤝

What is React Native Reanimated?

React Native Reanimated is a powerful animation library for React Native apps, created and actively maintained by the Software Mansion team. It was first launched around 2019. The true benefits of this SDK include

Runs at 60–120 FPS for ultra-smooth visuals
Works with gestures like drag, swipe, and pinch
Supports physics-based animations like spring and decay
Integrates with various sensors (e.g., gyroscope, keyboard)
Cross-platform: works on iOS, Android, and even Web

Now let’s check out what’s new in the v4 release 🚀

CSS Animations and Transitions!

In this new release of Reanimated version 4, the team introduced a CSS-based animations and transitions API. The team hopes that these CSS-based animations and transitions will make Reanimated more accessible for developers coming from the web, and also that React Native developers will be able to stay familiar with the same CSS APIs across all platforms.

Another benefit is that CSS animations are much easier to optimize, because with CSS-style animations, Reanimated knows exactly:

Which components are being animated
Which properties (like opacity, scale, etc.) are changing. This makes it easier for Reanimated to improve performance behind the scenes.

But in older Reanimated setups, figuring out what’s being animated required extra calculations. But from Reanimated 4 onward, these extra calculations are no longer needed. As a result, Reanimated 4 now offers:

Less code (no need for hooks like useSharedValue)
Runs faster
More performance boosts in future updates

New React Native Worklets SDK

The Worklets concept was first introduced with Reanimated 2 in 2021. Worklets are short-running JavaScript functions that can run on the UI thread (the native thread that can run your code natively under the hood with high performance and without disturbing any FPS during UI rendering). Reanimated uses worklets to calculate view styles and react to events on the UI thread.

Now in Reanimated 4, the team has separated all the worklets code into a new SDK, react-native-worklets, and Reanimated now uses this SDK as an internal dependency. The team did this to better support independent progress and to open it up for other non-animation packages to utilize.

Easy migration — From 3.x to 4.x 💯

Reanimated 4.x introduces only minor renames in styling APIs, and all the animation logic you've written using Reanimated v2 or v3 APIs works seamlessly in 4.x. You can adopt CSS animations and transitions in your codebase incrementally, at your own pace.

The important point is that Reanimated 4.x supports only the New Architecture and no longer supports the Legacy Architecture.

Additionally, when shifting to Reanimated 4.x, you need to install the react-native-worklets package using your package manager, then change 'react-native-reanimated/plugin' to 'react-native-worklets/plugin' in your babel.config.js file, and finally rebuild your Apps.

Check out more details about migrating from Reanimated 3.x to 4.x.