Featured
Reanimated 4 is new, but also very familiar
Today, we are publishing the first beta version of Reanimated 4 — the next generation of our library for building smooth, high-performance animations and dynamic user interactions in React Native. We are very excited to share this release with the community — Reanimated 4 is the biggest and most important update to the library since we introduced worklets in Reanimated 2.
Worklets revolutionized how we build animations in React Native, introducing a paradigm shift from the declarative APIs developers knew from earlier versions of Reanimated or the built-in React Native Animated API. While it initially took time for developers to fully adapt to this new approach, worklets unlocked an entirely new level of performance and creative possibilities. Over time, Reanimated has become the de-facto standard for building animations, powering hundreds of thousands of projects, serving as the foundation for UI frameworks across the ecosystem, integrating with countless libraries, and enabling many previously unattainable interactions that now “can be done in React Native.”
So, how do we now take the next step forward without asking everyone to start over and face the same learning curve again? We decided to make it completely different, but at the same time, instantly familiar.
Animate everything
Reanimated 4 introduces a revamped animation core and a new set of APIs that enable CSS-compatible animations. While still in beta, Reanimated 4 is already close to being fully compliant with the CSS animation and transition spec. At the same time, it continues to leverage the performance benefits of platform-native animation APIs and offloads work from the React Native JavaScript thread. This approach has defined Reanimated from the very beginning.
The main goal of Reanimated 4 is to future-proof the library for the evolving direction of the React Native ecosystem and where we envision it heading in the near future. We want to empower developers to create delightful, high-performance user experiences with minimal boilerplate, while writing code that’s flexible, web-compatible, and intuitive — even for new users.
Many React Native developers are already familiar with CSS, and there’s a wealth of examples and resources available online to help them create animations. With Reanimated 4 you can look up CSS animation code, bring it into React Native, and see it in action (terms and conditions apply). In fact, this approach is exactly how we built many of the examples in our demo app:
Compatibility
Reanimated 4 will only work with the React Native New Architecture (Fabric) but remains fully compatible with Reanimated 3. So, as long as your app is running on the new architecture, you can try Reanimated 4 without any changes — and without having to rewrite all your animations in CSS.
Our goal is to continue building on the success that Reanimated has achieved. CSS animations are incredibly powerful for many scenarios, but they rely on a “fire-and-forget” model, which means they cannot respond to dynamic external factors in real time. This limitation makes it poorly suited for certain use cases in React Native, such as animations tied to gestures, screen transitions, or elements like the appearing virtual keyboard, where continuous, real-time control and platform-native integration are essential.
Reanimated continues to excel at solving these types of challenges, and we consider worklet-based APIs to be the better choice in such scenarios. Worklets, shared values or layout animations aren’t going anywhere — we are fully committed to evolving and maintaining both the current (v3) and new APIs, with a focus on the New Architecture. Backward compatibility and the ability to adopt new features incrementally remain key guiding principles in this process.
Try it today
We are excited to share the first beta of Reanimated 4 with the React Native community, hoping to gather feedback that will help us refine the library and validate the assumptions we made before the stable release.
There’s a lot of work that went into making this a reality. The CSS animations specification is very broad, with many edge cases that we might not get right on the first try — multiplied by the number of view and layout attributes that the new core supports.
We encourage everyone to try the release, report issues on GitHub, share your comments, or show what you’ve built on social media, tagging @swmansion.
If you are familiar with animations in CSS, you should feel at home. The key difference is that animations in Reanimated are defined using JavaScript objects rather than CSS, which introduces some limitations when working with units, comma-separated values, or hyphenated attribute names. Most of these limitations are already familiar if you’ve worked with layout attributes in React Native. We’ve followed a resolution mechanism for naming and wrapping parameters that is consistent with React Native style properties and similar concepts from projects like React Strict DOM. When in doubt, check out our new interactive CSS transitions and animations docs for Reanimated 4:
Or explore the numerous examples in our demo app, where each one is paired with its corresponding animation definition object.
If you have an existing CSS code or want to try out some demos written in CSS, you can also check out our new online translator tool that converts CSS code into the JavaScript syntax that Reanimated understands:
New order
While we are happy with the overall shape of this beta release, we want to note that some structural changes will be made to the repository to improve its modularization. These changes aim to reduce the library footprint, particularly on the Web, where this is much more critical.
Our goal is to extract different aspects of Reanimated’s functionality into separate packages that can be imported individually. For example, the new CSS animations core, the worklet-based API, and Reanimated’s layout animations will be available as standalone imports. At the same time, the main package, react-native-reanimated, will continue to provide the full set of APIs and remain compatible with Reanimated 3 to support existing projects.
Thank you, Shopify
It’s been five years since Software Mansion started collaborating with Shopify to revamp the animation space in React Native with Reanimated 2. We’re thankful for their trust and support throughout this journey!
This release marks a significant milestone for Reanimated. We hope you’ll enjoy the improvements it brings and that it enables even more developers to create animation-rich mobile app interfaces users will love.
