Master the way you display data from network

• Let's say you have an awesome React Native weather forecast app that uses an API to get current weather and forecast (If you don't, you can download my source code with the link down below in step one)
• Let's also say you have a bad connection and your network request takes several milliseconds to be resolved
• You get this :

The elements appear in an ugly way, popping to the eye... not very eye-pleasing for our user ?

• What we're going to achieve is to transform this MVP in a few simple steps to make this result by adding some animations

⚙️ How to Make Smooth Appearance Animations

STEP 1: Basics & Prerequisites

The base code for this project is available in this github repository

In order to achieve this, we'll need to have react-native-animatable. This library enables you to create animations and appearances for your components.

In order to install it, just use 

++code>yarn add react-native-animatable++/code>

 or

 ++code>npm install react-native-animatable --save++/code>

if you are using npm

First of all, let's take care of the upper section. The goal is to create the smooth appearance animation for the weather.

STEP 2: The overview section (Current weather section)

The Overview component

Let's have a look at src/components/Overview/Overview.component.js

Basically, the Overview component expects 3 values (maxTemperature, minTemperature, weatherType) from props and displays them when they are available.

In this case, we want to add the animation to the second view (with content style) to make it appear gradually.

The TransitionView: our magical animation component

In your project, create a new component and import react-native-animatable in the file.

We want to create a wrapping component that will make our content appear with an animation when they are instantiated, so we'll use a View from react-native-animatable:

Let's have a quick look at this code :

• Firstly, we use destructuring in order to get the props passed to the component (including children, styles and others)
• Then we return a Animated.View (which is a pimped View that supports animations)
• The animation prop determines how the component will appear (I choose a basic fade-in appearance)
• The duration prop is optional but it's a good practice to set a constant in your project to time all your animations. Mine is set to 500
• The useNativeDriver prop improves the performances (?? if you want to set another animation type, useNativeDriver might not be supported by all animations according to react-native-animatable)

Plug it to the base app code 

Now, let's use our TransitionView component to animate this component :

You can event pimp it up adding another transition to the whole component, transforming the container View into a TransitionView with a slideInDown animation :

And tadaa : the animation for the Overview 🥳

You have a wonderful animation for the Overview! That was simple, isn't it?

The blue panel animation gives time to the query to be fulfilled, and the fade-in entrance makes the appearance more natural!

Let's now handle this forecast list, having it arrive in a more progressive way, making each element appear one by one, a short time after the previous one.

STEP 3: The forecast section

Let's now handle the forecast section issue, in our awesome app, we have an ugly list flashing to our users' eye ?.

Forecast.component.js contains the component that generates the list.

It takes an array of Forecast as input props and displays it with a FlatList component (For each forecast, the FlatList will instantiate a ForecastItem component and pass the values of the forecast as props).

Without any surprise, the ForecastItem component code is in the ForecastItem.component.js file. As we saw, it is the component that represents one line of our list.

This component simply displays the temperature values, the date and the weather that are passed as props.

First of all, we're gonna use our TransitionView component in order to make it with a simple global animation. The first step we can setup is to use a TransitionView as a container for our component :

We just achieved, the first step: our page is fully animated, every element in the page shows up with a transition!

In order to create the consecutive appearance effect, let's add a delay to our TransitionView. I want to bind the index of the element in the list to this delay in order to make the elements appear progressively so let's modify our TransitionView component :

What I did is to add an index prop to our TransitionView component and use it to compute a delay for the Animatable.View. Thus, each line of the forecasts list will be rendered a tad later than the previous one.

And now, let's use our FlatList in the Forecast component to pass index to the ForecastItem and the TransitionView in Forecast.component.js

And in ForecastItem.component.js

🎉 Yeah: React Native app fully animated

Congratulations, your React Native app is now fully animated and you now have an awesome reusable TransitionView component in order to add animations to all your network-requested content! ?

🚀 Bonus

You'll also find another page in the app containing a grid of images rendering with TransitionView and a slider that enables you to switch the number of columns in the grid.

This is a simple demo of the rendering pattern of a FlatList with columns that gives a very smooth feeling about your page by making items appear with an animation one after the other

To see this page's code, go to src/pages/ImagesGrid/ImagesGrid.component.js in the article's repository

Conclusion

What we achieved with animations

• Helping the user wait while content is loading
• Giving a sensation of speed and minimizing small performance problems
• Showing more content on the page in a fluid manner

What animations can also do

• Easing the interactions, so that they may seem more natural
• Giving clear visual feedback on an action's success or failure, and on its nature (tap / long press/slide/pinch) Fav twitter/clap Medium for example
• Educating the user on possible interactions on an element

How we could have done it differently

• Facebook-like shimmer effect using react-native-shimmer-placeholder