Butter Smooth Scrolling Animations in React Native

Jasbir singh has been working on creating smooth animation effects that are hooked up to scroll events in React Native. Here is a brief explanation from Jasbir on it.

This article shares some of the tips, tricks and hacks that you can incorporate in your apps to get awesome animations using React Native’s native driver.

In this post, we’ll be talking about the basic architecture of React Native — the native realm, the JavaScript realm and the bridge connecting the two.

Hence, even though most of our app’s code is written in Javascript, the UI of our app itself is completely native.

It is this bridge that does the magic in React Native. However, the bridge also comes with its own limitations.

Like it or not

In order to architect performant React Native apps, we must keep passes over the bridge to a minimum.

Using Native Driver for Animations

When working with animations in React Native, it is easy to run into performance issues, especially if your app involves complex animations.

The Animated API was designed with a very important constraint in mind: it is serialisable. This means we can send everything about the animation to the native layer before it has even started and allows native code to perform the animation on the UI thread without having to go through the bridge on every frame.

Now we are talking!

It is very useful because once the animation has started, the JS thread can be blocked and the animation will still run smoothly.

When creating an Animation in React Native, you could create an Animated.Value and change this value to update some transforms in your UI components. Or you may also update an Animated value by connecting it to an event of a View using Animated.event.

However, most of the work happens on the JavaScript thread. If it is blocked, the animation will skip frames. It also needs to go from the JavaScript to Native layer on every frame to update native views.

What the native driver does is move all of these steps to native.

Since Animated produces a graph of animated nodes, it can be serialized and sent to native only once when the animation starts, eliminating the need to callback into the JS thread; the native code can take care of updating the views directly on the UI thread on every frame.
How to embed this native driver in your app is covered in the coming section.

The Declarative API

The key to reducing passes over the bridge is declarative API. It allows us to declare behaviours in advance in JavaScript and serialise the entire declaration and send it once over the bridge during initialization. From this point on, a general purpose native driver — one that you don’t need to write yourself — will execute the behaviour in the native realm according to the declared specification.

You got this!

Lets Dive Into Some Code

We are going to use React Native’s ListView in our app to handle the UI. Inside the ListView, we use a ScrollView as the scroll component. We listen for all scroll events on this ScrollView itself. It should look something like this.

There we have it. We have done all we promised already!!
All the Animated.Events are getting registered now and we have the updated scroll position values in our state variable.
We can do anything we want with this now. Lets just get a basic animated header made first and then maybe we can cover some complex animations.

This is how you would do it.

Notice how we simply transformed a couple of CSS styles according to scroll values. The result will look something like this.

Smooth Animation Achieved!

Note:

You might want to add another listener to your ScrollView to get updated values. You could simply attach a listener something like this.

What Else Can You Animate

Only imagination is the limit! You could achieve any kind of transform hooked to you scroll events. The example below demonstrates some of these implementations.

Find the full code for this here.

Conclusion

Wrap Up!

Though this article just covered a simple animated header component, there are lots of other types of animations where this particular approach can be used. For instance, you could make out different swipe and drag gestures for your app.

The performance achieved by this method is simply awesome and feels just beautiful to use.

About the Author

Jasbir Singh is a software engineer here at GeekyAnts. He identifies himself as a hacker, innovator and a go-doer.

Thanks for reading. Hit💚 if you like the article.