Main topics to care about before including Motion Designs in your React Native application
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 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.
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.
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.
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.
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.