Animated Profile Toolkit In React Native

A fantastic user experience can only be achieved by including animation in mobile apps. The most difficult task is explaining the app’s logic to consumers. The prevalent error, however, is the careless usage of animation, which defeats the purpose of enhancing the user experience.

The animation needs to be well integrated and shouldn’t be extraneous for an app to be considered exceptional rather than merely decent or average. Because they are in motion, things rarely come to a complete stop right away. You may simulate real motion in your UI with animations.

This article uses ScrollView and native React animation to build a profile header animation. We’ll have the animated profile view after this blog post.

Let’s start with the Implementation

Import View and Animated from react native are the two most important components to achieve animation to a particular view for our animated profile view that supports layout with flexbox, style, some touch handling, and accessibility controls and animation views.

Without these two components, we must import images from our assets folder and Dimension from react native for an accurate response to the app.

Interpolation

A key component of this animation’s implementation is interpolation. Interpolation can be applied to each property first. An interpolation normally uses linear interpolation but also includes easing functions to convert input ranges into output ranges. It extrapolates the curve past the specified ranges by default, but you may also have it clamp the output value.

We use Interpolate for changing position, size, and colors and Animated. event() to map the ScrollView position with animated state value. You can read more details about Interpolate and Animated event.

A basic mapping to convert a 0-1 range to a 0-100 range would be:

Create a header and offset its position in the ScrollView’s top to go over the scroll view. After that, interpolating the header using the ScrollView scroll position is a simple process.

So let’s get an understanding with our example:

Here, scrollY was taken in the useState where its value was new Animated.Value(0). This was an initial value for each component animation; after that, we had to add our values according to our requirement.

useNativeDriver

Animated API was developed with serializability as a key constraint. As a result, we can provide native code with all of the animation’s information before the animation begins, enabling native code to execute the animation on the UI thread without passing via the bridge at each frame.

It is especially useful since, after the animation has started, the JS thread can be blocked without affecting how smoothly it progresses. This happens rather frequently because user code runs on the JS thread, and React renders have the potential to lock JS for a long time.

How useNativeDriver Work?

When using Animated, you first describe a graph of nodes that correspond to the animations you wish to do. Then you use a driver to update an Animated value according to a predetermined curve. By using the Animated event to link an Animated value to a View event, you may also update an Animated value.

Set useNativeDriver:true consistently while configuring animations. Avoiding the back-and-forth over the bridge between JS code and native code for each rendered frame, it will make your animations fluid.

Due to restrictions imposed by React-Native, useNativeDriver currently does not support the position absolute. So, we use the converted attribute there. We utilize translateY for the top and translateX for the left.

Animated.event() method map the state scrollY with ScrollView’s Y offset means Vertical offset.

The scrollEventThrottle regulates the frequency with which the scroll event is fired while scrolling (as a time interval in ms). A lower value improves tracking the scroll position precision, but the amount of data being carried over the bridge may cause issues with scroll performance.

Due to the JS run loop being synced to the screen refresh rate, you won’t notice any difference in performance with values set between 1 and 16.

It’s time to use interpolation to animate the profile image from the center of the screen to the header left. In order to create an appropriate animation inside of our application, we provided some value to animate each position.

Full Example :

Interpolation can be applied to each property first. An interpolation normally uses linear interpolation but also includes softening functions to convert input ranges into output ranges. It extrapolates the curve past the specified ranges by default, but you may also have it clamp the output value.

Here, from input range 0–80, our image changes the position from 30 to 38 relative to devise width, and from 80–140, it will be from 38 to 10 relatively.

interpolate method called when the state value is changed from ScrollView’s onScroll mapping that we have done before.

Same as the position left, we set position top, Image height, and width per ScrollView’s scroll position. Now set these values in the style of Animated.Image as below:

Now when the user scrolls the ScrollView the onScroll method will call, and our state scrollY will change, and when the stateY changes, interpolate will call, and the beautiful animation is done.

Screen Shots

Screen Record