arrow icon

How to Achieve 60FPS Animations in React Native

Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

The following article is part of The Ultimate Guide to React Native Optimization and discusses the use of native solutions to achieve smooth animations and gesture-driven interface at 60FPS.

Why is it important?

Nice and smooth animations are a crucial part of the success of your app. But, when done incorrectly, they can seriously damage your product by slowing it down. In this article, we describe some useful practices to achieve smooth 60FPS animations in React Native with no harm to the speed of your app.

In other blog posts based on The Ultimate Guide to React Native Optimization, we touch on the following topics related to improving performance through understanding the React Native implementation details:

Be sure to check them out. Now let’s move to the main topic.

The importance of smooth 60FPS animations on mobile devices

Mobile users are used to smooth and well-designed interfaces that quickly respond to their interactions and provide prompt visual feedback. ’ve explained in this article As a result, applications have to register a lot of animations in many places that will have to run while other work is happening.

60fps animation in react native

As we’ve explained in this article, the amount of information that can be passed over through the bridge is limited. There’s no built-in priority queue as of now. In other words, it is on you to structure and design your application so that both the business logic and animations can function without disruptions. This is different from the way we are used to performing animations. For example, on iOS, the built-in APIs offer unprecedented performance and are always scheduled with the appropriate priority. Long story short – we don’t have to worry much about ensuring they’re running at 60 FPS.

With React Native, this story is a bit different. If you do not think about your animations top-down beforehand and choose the right tools to tackle this challenge, you’re on the best way to run into dropped frames sooner or later.

Janky animations make your app look slow and unfinished to users

In today’s world of a sea of applications, providing smooth and interactive UI might be one of your only ways to win over customers that are looking to choose the app to go.

If your application fails to provide a responsive interface that works well with the user interactions (such as gestures), it may affect the new customers and decrease the ROI and user sentiment.

Mobile users like the interfaces that follow them along and look top-notch, so ensuring the animations are always running smoothly is a fundamental part of buildingsuch experience.

Solution: If it’s possible, use native and correct animations

One-off animations in React Native with native driver

Enabling the usage of native driver is the easiest way to improveyour animations performance quickly. However, the subset of style props that can be used together with native driver is limited. You can use it with non-layout properties like transforms and opacity. It will not work with colors, height, and others. Those are enough to implement most of the animations in your app because you usually want to show/hide something or change its position.

Enabling native driver for opacity animation

For more complex use cases, you can use <rte-code>React Native Reanimated<rte-code> library. Its API is compatible with basic <rte-code>Animated<rte-code> library and also introduce a set of more low-level functions to control your animations. Even more importantly, it introduces the possibility to animate all possible style props with native driver. So animating height or color will no longer be an issue. However, transform and opacity animations still will be slightly faster since they are GPU accelerated. But regular users should not see any difference.

Ways to achieve gesture-driven 60FPS animations

The most desired effect that can be achieved with animations is being able to control animation with a gesture. For your customers, this is the most enjoyable part of the interface. It builds a strong sentiment and makes the app feel very smooth and responsive. Plain React Native is very limited when it comes to combining gestures with native driven animations. You can utilize <rte-code>ScrollView<rte-code> scroll events to build things like smooth collapsible header.

For more sophisticated use cases there is an awesome library – React Native Gesture Handler – which allows you to handle different gestures natively and interpolate those into animations. You can build a simple swipeable element by combining it with Animated. However, it will still require JS callbacks, but there is a remedy for that!

The most powerful pair of tools for gesture-driven animations is the usage of Gesture Handler combined with Reanimated. Those were designed to work together and give the possibility to build complex gesture-driven animations that are fully calculated on the native side. The only limitation here is your imagination (and coding skills, since Reanimated low-level API is not so straightforward).

Reanimated API supports synchronous JavaScript execution on the UI thread using the concept of worklets. The library’s runtime spawns a secondary JS context on the UI thread that is then able to run JavaScript functions in the form of said worklets. Using your imagination and leveraging Reanimated, you can create wonderful animations at full available speeds.

Low-level handling of gestures might not be a piece of cake, but fortunately, there are already 3rd party libraries that utilize mentioned tools and expose the prop <rte-code>callbackNode<rte-code>. It’s nothing more than an <rte-code>Animated.Value<rte-code> derived from specific gesture behavior. Its value range is usually from 0 to 1, which follows the progress of the gesture. You can interpolate the values to animated elements on the screen. A great example of libraries that expose <rte-code>CallbackNode<rte-code> are <rte-code>reanimated-bottom-sheet<rte-code> and <rte-code>react-native-tab-view<rte-code>.

Giving your JS operations lower priority for smoother animations

It is not always possible to fully control the way animations are implemented. For example, React Navigation uses a combination of <rte-code>React Native Gesture Handler<rte-code> and <rte-code>Animated<rte-code>, which still needs JavaScript to control the animation runtime. As a result, your animation may start flickering if the screen you are navigating to loads a heavy UI. Fortunately, you can postpone the execution of such actions using <rte-code>InteractionManager<rte-code>.

Read more:!mKwJ

This handy React Native module allows you to execute any code after all running animations are finished. In practice, you can show a placeholder, wait for the animation to finish, and then render the actual UI. It would make your JavaScript animations run smoothly and avoid interruptions by other operations. Usually smooth enough to provide a great experience.

Let users enjoy smooth animations and gesture-driven interface at 60 FPS

There’s no one single right way of doing animations in React Native. The ecosystem is full of different libraries and approaches to handling interactions. The ideas suggested in this section are just recommendations to encourage you not to take the smooth interface for granted.

What is more important is painting that top-down picture in your head of all interactions within the application and choosing the right ways of handling them. There are cases where JavaScript-driven animations will work just fine. At the same time, there are interactions where native animation (or an entirely native view) will be your only way to make it smooth.

With such an approach, the application you create will be smoother and snappy. It will not only be pleasant for your users to use but also for you to debug and have fun with it while developing.

If you’ve enjoyed this article, check out the 20th React Native Show episode, in which Łukasz Chludziński and Burger discuss Remotion and animations in React Native.

Hur Ali
TypeScript enthusiast mastering the React Native, Android & iOS realm. He feels best in diving deep with mobile tech to explore the underlying concepts, making proof-of-concept projects, and experimenting with new technologies. IA contributor to RN core and co-founding his pet project POETRY on play store. Loves to play FIFA and read books in his free time.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.