Animation Performance in React Native
Animations are the transformations of application elements, which enable us to create a vivid and interactive user interface. Complex mathematical operations are performed in order to resize our elements, change their position, rotate them, and similar, for the given time, and interpolation curves.
Considering that the React Native framework architecture consists of two software components:
- JavaScript component (here referred as the JS thread)
- Native (iOS and Android) component (here referred as the UI thread), the communication with the native platform is done via the React Native bridge.
Regarding operations, such as animations, which require a lot of data in the shortest time frame possible, this bridge can become a bottleneck, and therefore cause issues in the app performance. Many people would think that with such architecture, it would be impossible to satisfy more complex user interfaces, but the React Native development team has spotted this issue and has already tackled the potential problem.
The React Native Animated Module
The React Native development team has made the Animated Module, which comes as a part of the default React Native framework. They solved the problem in a relatively easy way, by offloading all the element animation operations from the JS thread, to the UI thread.
This approach allows us to animate the elements in the full strength of the device, without having our business logic (the logic of the JS thread) influence the animation performance.
How can React Native animated module help you?
It is very important that, during animation, we use the option of running the operations in the UI thread. There is an option of running the animation in the JS thread without any issues, but that is somewhat risky, because in time, as the project grows, we can add more logic, which will be executed simultaneously with the animation, which will then result in the animation having different performance.
As an example, we can see what the difference is between the given cases. By clicking the OVERLOAD JS button, we will overload the JS thread with a demanding business logic in order to see the impact on the animation in progress.
*NATIVE DRIVER: OFF comment - In this example, we can even notice that the JS thread and the UI thread are not completely synced. It is not even necessary to overload the JS thread with the user interaction.
Also, we can take the example of Paperchase Plus, an app for ordering personalised notebooks and gift cards (at the moment of writing). Paperchase wanted a complex and vivid interface, which was made possible using React Native.
However, there are some limitations. At this moment, we can animate only one subset of styles using the Animated Module on the UI thread, which include transformations such as scaling, position changing, rotation, level of transparency, etc. On the other hand, things which make up the very element layout can't be animated using the UI thread, such as height, width, the distance from the top/bottom parent, etc.
Luckily, the React Native framework is used by numerous big companies, and it is being widely used by the IT community, which is why their support is pretty good. Also, various public, free libraries are available to the users, in order to fill in any gaps of the React Native framework, as well as to accelerate the development of software solutions.
As a solution for the animation limitations, we have the Reanimated Library which has been actively developed and used for several years. Also, the stable, production version of Reanimated 2 has recently been released. In combination with the React Native Gesture Handler Library, the JS thread can really no longer influence user interface performances.
With this architecture, writing business logic in React Native comes with all its benefits. The benefit which should be pointed out, when talking about animations, is that everything animation-related is completely supported by both iOS and Android platforms, so it is enough to write and maintain only one codebase.
