Reanimated 4 is the Future of Smooth React Native Animations

Reanimated 4 is here to change the game for animations in React Native. It’s bringing CSS-style animations and transitions that make animations easier to write, more predictable, and closer to how they work on the web.

In this episode, Ola Desmurs-Linczewska sits down with Tomasz Zawadzki and Mateusz Łopaciński from Software Mansion to discuss what’s new in Reanimated 4, why React Native is aligning with web standards, and what it means for developers working with animations today.

‍

What’s new in Reanimated 4?

Reanimated has been a core library for animations in React Native for years, and with version 4, it’s evolving significantly. In this conversation, we break down how CSS animations and transitions are making animation logic more intuitive, why the New Architecture is the only supported option, and what the shift toward modularity means for Reanimated’s future.

• Find out why Reanimated 4 was built—the library’s maintainers explain what drove the shift toward CSS-based animations, how it improves the developer experience, and what problems it solves compared to Reanimated 3.
• Learn how CSS animations and transitions work in React Native—it only takes a few syntax-changing steps to use all the CSS animations you already know.
• Understand why Reanimated 4 drops support for the old architecture—a breakdown of the challenges with maintaining both architectures, the performance considerations, and what this means for existing apps.
• See how React Native is aligning with web standards—we’re thinking out loud about Meta and the community moving toward a more unified styling approach, what that means for developers switching from web to React Native, and how Reanimated fits into this shift.
• Discover the future of Reanimated and its modular approach—we’re explaining why Reanimated will be split into smaller packages, what parts of the library might be separated, and how this will improve performance and maintainability.
• Get migration tips and experiment with the new API—learn how to upgrade from Reanimated 3 to 4 with minimal effort, how to convert existing animations, and a challenge to try rewriting animations using the new CSS-based API.

‍

Keep on learning about smooth animations in React Native

Reanimated 4 is currently in beta, and now’s the time to explore its new features. Try it in your projects, experiment with CSS animations, and share your results with the community. Here are some links you may find useful:

• React Native Reanimated docs
• Reanimated 4 release blog post
• React Native CSS Translator
• CSS animations docs
• Ola Desmurs-Linczewska on X and Bluesky
• Tomek Zawadzki on X and Bluesky
• Mateusz Łopaciński on X and Bluesky
• Software Mansion’s Discord server

‍