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
yarn add react-native-animatable
npm install react-native-animatable --save
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 🥳
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 :
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 !
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! 😎
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
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