--- title: "Reanimated 4 is the Future of Smooth React Native Animations" description: "Reanimated 4 is now available in beta, and if you work with animations in React Native, you need to know what’s new!" url: https://www.callstack.com/podcasts/reanimated-4-is-the-future-of-smooth-react-native-animations updated: 2026-10-24T08:39:43.625Z --- # Reanimated 4 is the Future of Smooth React Native Animations Reanimated 4 is now available in beta, and if you work with animations in React Native, you need to know what’s new! _Guests: Mateusz Łopaciński, Software Developer @ Software Mansion; Tomasz Zawadzki, Software Developer @ Software Mansion · Host: Aleksandra Desmurs-Linczewska, Software Engineer @ Callstack · Published 2025-02-19 · Duration 49:29 · Category: Animations_ Listen: [YouTube](https://youtu.be/wAfJqFX62ag) · [Spotify](https://open.spotify.com/episode/2jliMtyBcAHGGHkv3afobt?si=S_4Ga7WQT0uKEPNnuRSMeA) · [Apple Podcasts](https://podcasts.apple.com/us/podcast/reanimated-4-is-the-future-of-smooth-react/id1525543072?i=1000693985218) · [SoundCloud](https://soundcloud.com/user-985069846/reanimated-4-is-the-future-of-smooth-react-native-animations-react-universe-on-air-48/s-plgxZt5Uyi5?si=390bc2c8e8054e2ea912a65114709c6c&utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing) 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](https://docs.swmansion.com/react-native-reanimated/) - [Reanimated 4 release blog post](https://blog.swmansion.com/reanimated-4-is-new-but-also-very-familiar-b926dd59aa40) - [React Native CSS Translator](https://react-native-css-translator.vercel.app/) - [CSS animations docs](https://docs.swmansion.com/react-native-reanimated/docs/next/category/css-animations/) - Ola Desmurs-Linczewska on [X](https://x.com/p_syche_) and [Bluesky](https://bsky.app/profile/psyche.social) - Tomek Zawadzki on [X](https://x.com/tomekzaw_) and [Bluesky](https://bsky.app/profile/tomekzaw.bsky.social) - Mateusz Łopaciński on [X](https://x.com/MatiPl01) and [Bluesky](https://bsky.app/profile/matipl01.bsky.social) - [Software Mansion’s Discord server](https://discord.swmansion.com/) Insights ## Learn more about Animations Here's everything we published recently on this topic. [View all](https://www.callstack.com/insights) - [React Native Ease: Platform-Native Animations Without the Extra Work](https://www.callstack.com/podcasts/react-native-ease-platform-native-animations-without-the-extra-work) (Jul 8 · Podcast): Łukasz talks with Janic from App & Flow about React Native Ease, Core Animation, Reanimated trade-offs, and performant UI animation in React Native. - [Where Reanimated Goes Next](https://www.callstack.com/podcasts/where-reanimated-goes-next) (Jul 7 · Podcast): A conversation with Bartłomiej Błoniarz on CSS animations in Reanimated, native primitives on iOS, shared element transitions, and the work still left on stability. - [Reanimated, TanStack, Cross-Pollinating Languages & TWIR #256 Anniversary](https://www.callstack.com/events/build-complex-animations-without-killing-performance-with-reanimated-4) (Oct 30 · Live Stream): Catch up on everything from TanStack updates and Astro insights to Reanimated deep dive and even Swift for Android. Plus, we celebrate the 256th newsletter! - [How to Make Your React (Native) App Feel Native](https://www.callstack.com/events/how-to-make-your-react-native-app-feel-native) (Apr 16 · Talk): How to make your React Native app feel truly native, across iOS, Android, tvOS & more. Dive into best practices, navigation, and react-native-bottom-tabs. - [Remotion and Animations in React Native](https://www.callstack.com/podcasts/remotion-and-animations-in-react-native) (Jan 31 · Podcast): Discover all you need to know about Remotion and animations in React Native from this episode of React Universe On Air with our guest - Jonny Burger. - [A Deep Dive Into React Native Reanimated v1](https://www.callstack.com/blog/react-native-reanimated-v1) (Oct 11 · Article): Read the article to learn more about what React Native Reanimated is, how it works under the hood, and what idea stands behind the library. - [ReanimatedArc - Build Circular Animated UI Elements in React Native](https://www.callstack.com/blog/reanimatedarc-build-circular-animated-ui-elements-in-react-native) (Apr 15 · Article): Build good-looking and smooth animated arcs in React Native with ReanimatedArc library. - [Custom Screen Transitions in React Navigation](https://www.callstack.com/blog/custom-screen-transitions-in-react-navigation) (Oct 25 · Article): Wondering how to custom a screen transition animation in React Navigation? Check this step-by-step guide. - [Reanimating Your React Native Experience](https://www.callstack.com/blog/reanimating-your-react-native-experience) (Aug 8 · Article): Read how to achieve delightful developer experience with react-native-gesture and react-native-animated.