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

Image for post
Image for post

Note: This story was published originally on May 15th, 2018 on my personal blog.

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 expose 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 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 to React Native apps.

Easing Functions

Image for post
Image for post
Easing Function example

Easing Functions provide control and performance for animations. To 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

Image for post
Image for post
Shared Elements example

The concept of Shared Elements creates 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 in 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.


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 of 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.

Image for post
Image for post
Lottie example

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.

react-native-interactable's example

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.


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.

Written by

Crio conteúdo sobre Desenvolvimento Web, Trabalho Remoto e Carreira. Vem comigo ver que Desenvolvimento Web é incrível!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store