Today we are happy to announce a stable release of Reanimated 3. This was a long time coming but we hope the wait was worth it, as this release is packed with important improvements and new features while allowing for smooth (and hopefully painless) migration from the previous versions of the library. In this blog post we highlight some of the most important changes in this release and discuss how to upgrade to take advantage of all of that.

Shared Element Transitions

The long-awaited Shared Element Transition feature is finally here — this new addition to the Reanimated API makes it possible to animate views between navigation screens. To use this feature just add the same sharedTransitionTag attribute to animated views that live on two different screens — now when navigating between these two screens the view will smoothly transfer from one place to the other.

There has been a lot of excitement around this feature, and we assure you that we are as much excited to finally be able to give it out for anyone to try. Shared Element Transitions has been one of the biggest features that we’ve worked on lately, and the one that requires the most effort, while also being a feature that is used the least (it is its first release after all). We are therefore putting a “experimental feature” sign next to it and look forward to getting feedback from you that would allow us to polish some rough edges you may hit when adding shared element transitions to your app. You can visit our documentation website to learn more and check code samples.

Better, faster, stronger

Reanimated 3 from the surface may seem very similar to its predecessor, however, it is very different if you look under the hood. One of the biggest changes for Reanimated 3 happened in its core where we completely rewrote the worklets/shared values engine as well as the layout animations engine. Both rewrite efforts were mainly focused on improving the performance, memory usage and stability of the library. However, they were also aimed at unlocking some new potential features of the library. One of which is the aforementioned Shared Element Transition feature which is built on top of the Layout Animations API and would not be possible in its current shape to work without the new engine. Similarly, the worklets and shared values rewrite unlocks some new possibilities, in this case, however, the work is not yet fully finalized, so expect more fun updates to come as a consequence of the changes at the very core of Reanimated.

Developers, developers, developers…

Reanimated aims at providing the smoothest animation experience possible in a mobile app. But it is developers who get to use it at the end of the day. That’s why developer experience is at the top of our priority list together with the performance and stability of the library. In version 3 we are adding support for React Native’s LogBox for better error reporting when things go wrong in your worklets. The new Reanimated now allows for JS debugger to connect to the UI runtime and inspect the code that’s being executed there. On top of that, we have merged a number of patches that should help you navigate common errors.

In addition to all these changes, we are also extending Reanimated’s API to make it even easier for you to use and to make your codebase easier to follow. With Reanimated 3 we are introducing “inline styles API” — this new addition allows you to avoid useAnimatedStyle hook when shared values can be directly mapped to one of the components’ styles or properties thus reducing a lot of boilerplate. Check out below how an example component can be refactored to use this new API. Of course, this feature is completely optional and you can continue using useAnimatedStyle or even mix animated styles with the new inline syntax. You can read more details about this feature on our documentation website.

Upgrade path

Version 3 is future-proof with its support for the new architecture (Fabric), hence we would love for as many of you to make the transition to this new release. To make it as seamless as possible, we have decided not to make any API level changes at this point compared to the API from version 2, with the exception that the deprecated API from Reanimated 1 is no longer available. We know that this makes the vast majority of library users eligible to upgrade today without any code changes to your React Native projects.

Thank you Shopify

The revolution in the animation space wouldn’t be possible without support from Shopify. Shopify has been partnering with us since the development of Reanimated 2 started and continues to invest in the React Native open-source space. We are thankful for the opportunity to build Reanimated 3 together and looking forward to shipping a lot more exciting releases this year!