Beto Muniz Picture

Main topics to care about before including Motion Designs in your React Native application

4 min read

The pros and cons of the current state of the React Native support for advanced animation concepts.

Animations still are poorly supported in the React Native ecosystem, but we are not alone

To understand the poor support of animations provided by React Native, we need to check the architecture of the library. The bottleneck is the JS thread, once it manages all behaviors of our app, mainly user interactions.

We have workarounds that partially exposes the UI (Native) thread for usage instead of using the JS thread to animate our things.

The primary workaround is the built-in React Native library called Animated. The Animated library is fantastic, but have a weird API, and only non-layout properties use the native driver support, which means limited performance gain. However, yeah, you can even animate colors with Animated.

Beyond of the Animated library, we also have react-native-animatable, a library that uses the Animated library in the background, but with a better proposal of documentation and API.

And that is all about the approaches adopted and recommended by the community for programmatically apply animations in React Native apps.

Easing Functions

Easing Functions provide control and performance for animations. For this end, React Native introduced, the Easing module.

The Easing module exposes some standard functions, but the most important is the native driver usage to make the animation calculations, which bring us performance. So, if you need to create a bouncing animation, don’t try to build it by yourself adding each step in your animation sequence, use Easing Functions.

You can learn more about Easing Functions on this link.

Shared Elements

The concept of Shared Elements create some definitions about how we should build reusable elements that not break the application flow. In the end, this kind of mentality allows us to make better choices for each aspect of our UI components.

You can learn more about it on this talk.

Transition (or Connected) Layers

Transition Layers allow us to share the state of our application using movements aspects like screens transitions, UI components mutations, micro-interactions, etc.

Sharing the state of our application with these movements aspects, we can create beautiful and mindful transitions to “speak” with our users what is happening.

You can learn more about it on this article.

The market solutions for navigation do not support Motion Designs properly

As you can see on this and this issues, the two leading solutions for navigation of the market: react-navigation and react-native-navigation respectively do not support some main aspects proposed by Motion Designs.

So, do not try to use these solutions if you have sophisticated animations in your app, for these cases, you should create your navigation solution.

This decision will be easy for you to maintain and avoid workarounds.

useNativeDriver

TL;DR. useNativeDriver allow native code to perform the animation on the UI thread without having to go through the bridge on every frame.

You can learn more about this documentation link.

My humble opinion about this feature is: Use useNativeDriver always in your animations.

Lack of tools that translate the motion design language for developers

After lots concepts, let’s talk a little bit about the tooling ecosystem to work with React Native and Motion Design in the same project.

The leading solutions used by designers to “translate” motion designs are tools like Flinto, Frame, and Principle, but sadly, these tools are not React Native friendly, so at the end of the day, the idea of “translation” is not perfect.

However, don’t worry, the times are changing.

Recently, I founded Supernova Studio. Supernova Studio has the ambition to support React Native in a friendly way when you need to translate motion designs for developers. Stay tuned.

We can interact with UI elements

When we are talking about the support of micro-interactions or elements with rich user interactions, the React Native ecosystem is going in the right direction.

About micro-interactions, we have Lottie, that is the recommendation of the community for this end so far. Lottie is a fantastic library that renders After Effects animations natively. If you want to learn more about, check this link.

About elements with rich interactions, we have the library react-native-interactable.

react-native-interactable is the best choice when you need to create custom user interactions, once it brings physics concepts, a stable API, performance, and control.

Spring Animations

This concept is very well supported by React Native and recommended by the community, check it out on my post regarding the React Native support for physics-based motions.

Conclusion

React Native is going to be an excellent place to work with any animation concept, but we still have a long and painful journey to reach a stable, flexible, and scalable path on this concept.

My dream for the future of animations in the React Native ecosystem is to have the same options that we currently have in the web version of React. I do not know if someday we will reach this level, but we are in a powerful moment for this type of ecosystem, mainly with game changers in the market like Flutter, NativeScript, and Weex to build native apps with JavaScript.

With all that said, the React Native community should care more and more about the actual state of support for Animations in the library. If not, the market will not forgive.