React Native Animation Tutorials (Part 1): How to Create Fade Animations in React Native

Last Updated on December 15, 2020.

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 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().

this.state = {
      startValue: new Animated.Value(0),
    };

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

Animated.timing(this.state.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: this.state.startValue}]}
        />

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

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

Class Component

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

export default class FadeIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(0),
      endValue: 1,
      duration: 5000,
    };
  }

  componentDidMount() {
    Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();
  }

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

Function Component

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

const FadeIn = () => {
  const startValue = new Animated.Value(0);
  const endValue = 1;
  const duration = 5000;

  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [duration, endValue, 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 animation fade in

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

Class Component

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

export default class FadeOut extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startValue: new Animated.Value(1),
      endValue: 0,
      duration: 5000,
    };
  }

  componentDidMount() {
    Animated.timing(this.state.startValue, {
      toValue: this.state.endValue,
      duration: this.state.duration,
      useNativeDriver: true,
    }).start();
  }

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

Function Component

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

const FadeOut = () => {
  const startValue = new Animated.Value(1);
  const endValue = 0;
  const duration = 5000;

  useEffect(() => {
    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
    }).start();
  }, [startValue, endValue, duration]);

  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:

react native animation fade out

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

Leave a Reply

%d bloggers like this: