How does React Native animations work?

Tram Ho

Animation is an indispensable part of any application. The ability to operate smoothly and smoothly will greatly affect the user experience. In this article we will learn how Animation works in React Native and how it differs from Native .

Animated API

React Native provides an API called Animated . Which includes many interesting animations, such as Animated values , spring / timing animations , … But this article will not go into what the Animated API has, but will learn how React Native creates Animation for those. what’s on the screen and how they play out.

There are 2 ways to run animation

First, you should know how React Native works , I have translated an article on how React Native works and the structure change here .

Need to understand this is that all interfaces on React Native are Native View, not embedding a web browser like Ionic . Therefore, the Animation will also be performed in Native View .

Works on JS and then updates Native View

The active flow would look like this:

  1. Start Animation
  2. JS runs requestAnimationFrame – a function will run 60 times / second (60 FPS).
  3. JS will calculate the position / opacity / transform or anything that needs animation in the view.
  4. JS will send these values ​​to Bridge .
  5. On the other side of Bridge , Java (Android) or Objective C (iOS) receives and processes it.
  6. Finally, the Native View will be updated.

There will be no re-render React components here so there’s no way the component will be rendered 60 times per second. So what are the advantages and disadvantages of this approach?

Advantages:

  • Write complex Animation by JS and display as Native Animation
  • Animation states can be controlled

Defect:

  • Performance impact if JS thread is performing other tasks.
  • If the Bridge is also busy, the performance drops when the OS and JS want to communicate with each other.

Native Driver Animation

React Native can completely allow you to use Native Driver to perform animations . This means that React Native will offload the JS thread activity and switch to the UI thread (for each OS) . It will have benefits like:

  • JS thread ( and Bridge ) will be more free to handle intensive tasks like repetitive user operations.
  • Animation will be somewhat smoother.

For this, React Native provides an attribute called useNativeDriver . This property has boolean values. If set useNativeDriver: true then the action would look like this:

  1. Start Animation .
  2. JS will process the information of Animation and send it via Bridge .
  3. On the other side of Bridge , Java (Android) or Objective C (iOS) will take the information and run the Animation .

This way will be lighter for JS thread because there is no need to run requestAnimationFrame continuously. But there are the following pros and cons:

Advantages:

  • Faster animations .
  • Reduce the task for the JS thread .
  • Optimized performance for low-end devices

Defect:

  • Less control over Animation states.
  • Fewer properties to manipulate

The React Native development team is still working to be able to support more properties.

This article is over. Thank you everyone for reading!

Share the news now

Source : Viblo