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

ScrollView and native React animation to build a profile header animation

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:

Interpolation

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:

Interpolation

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.

How useNativeDriver work?

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 :

How useNativeDriver work?

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.

How useNativeDriver work?

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:

How useNativeDriver work?

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

coma

Conclusion:

In this blog, we saw and implement the Animated Profile Toolkit and how to use our projects for beautiful animation in project UI.

Satyabrata

Tech Expert

Satyabrata is a React Native Developer with around 2.8+ years of experience in developing mobile applications. Skills like developing clean and reusable code, Creating responsive Mobile pages, API integration etc. 

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google