How to Create Fade Animations in React Native

When I started learning react native, I didn’t consider learning animations. I was unaware of the importance of animations in mobile app development. Only later I realized without animations my apps are just rigid.

To create a visually appealing mobile app you must wisely implement animations. Animations make the user interface butter smooth or make the feeling of smoothness to the user.

Keeping the importance of animation, here I am beginning a tutorial series- React Native Animation tutorials. I will make blog posts that cover the basic as well as advanced sides of react native animation.

React Native has two animation systems- Animated and LayoutAnimation. And let’s start with Animated API.

Animated API is the primary API used to build interactive animations. We can use six components associated with the API- Animated.View, Animated.Text, Animated.Image, Animated.ScrollView, Animated.FlatList and Animated.SectionList. Apart from this, we can also create a custom component as Animated.createAnimatedComponent().

Animated API supports different animations. Let’s start with Animated.timing() which is the most popular. Animated.timing() animates multiple values over a period of time using any easing functions. It accepts two arguments, one is the value and the other is the configuration of the animation.

Here, let’s check out how to create fade animations in react native using Animated API.

As the example is about fading, we need to animate opacity. Changing the value of opacity over a period of time can bring fade effects.

First of all, you need to set an initial value using Animated.Value().

const startValue = useRef(new Animated.Value(0)).current;

The value given here is 0, which means the opacity animation begins from a 0 value. Next, we need Animating.timing() function to begin the animation.

Animated.timing(startValue, {
      toValue: 1,
      duration: 5000,
      useNativeDriver: true,
    }).start();

As I said earlier, Animated.timing() accepts two arguments. The first one is the initial value. The second one is the configuration which consists of end value and duration. The toValue is 1 and the duration is 5000, which means the value of opacity animates from 0 to 1 in 5 seconds of time. Setting useNativeDriver true results in smooth animations on both platforms.

We are going to animate a square using Animated.View component.

<Animated.View
          style={[styles.square, {opacity: startValue}]}
        />

As you noticed, we have assigned a new Animated.Value(0) to the opacity prop.

React Native Fade In Animation

Following is the complete react native fade-in animation example.

import React, {useEffect, useRef} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const FadeIn = () => {
  const startValue = useRef(new Animated.Value(0)).current;
  const endValue = 1;
  const duration = 5000;
  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.square, {opacity: startValue}]} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'green',
  },
});

export default FadeIn;

Here’s the output:

React Native Fade Out Animation

When it comes to fade-out animation we just need to animate opacity values in the reverse order that is from 1 to 0.

import React, {useEffect, useRef} from 'react';
import {View, Animated, StyleSheet} from 'react-native';

const FadeOut = () => {
  const startValue = useRef(new Animated.Value(1)).current;
  const endValue = 0;
  const duration = 5000;
  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.square, {opacity: startValue}]} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'red',
  },
});

export default FadeOut;

Here’s the output:

All react native animation examples in this tutorial series can be obtained from this Github repository.