How to Create Better React Native Animations

Mobile apps often use animation to liven up the user experience. But creating high-quality animations can be a challenge.

Fortunately, there are concepts and techniques you can use to improve your animation skills. You can then apply them to create better, smoother animations for your next React Native mobile application.

React Native Animations

The React Native Animated library is the most popular way to create animations in a React Native app.

Just like React’s built-in animation library, the Animated API is part of the JavaScript-based Animated library. Animated provides a set of classes and methods that let you create smooth and fluid animations. There are several other great options for creating React Native animations, such as Reanimated.

However, creating good animations in React Native is not just about using the right library or setting the right properties. It's also about understanding the principles of animation and how to apply them in the context of mobile app development. So here are a few key principles to understand and note when building your animations.

Adjusting Animation Duration

Animations should feel smooth and natural to a user. Achieving this can depend on how you handle the duration for particular animations you create.

Duration refers to the amount of time it takes for an animation to completely run. By default, animations in React Native have a duration of 500 milliseconds but you can adjust them to go faster or slower.

You should adjust the duration of the animation according to its complexity. A simple animation, such as a fade-in, may only need a short duration, while a more complex animation, such as a slide-in with a bounce effect, may need to last longer, to feel natural and smooth.

With the Animation.timing() method, you can create a custom timed animation to fit your needs.

Here's an example of how to add a custom duration to a simple fade-in animation:

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

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; 

  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 2000,  // set custom duration
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
}

export default function App() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
      </FadeInView>
    </View>
  );
}

When choosing a duration for your animation, it's important to strike the right balance between speed and smoothness.

Try starting with a longer duration when you're first experimenting. A longer duration will give you more time to adjust the easing function and refine your animation. You can always shorten the duration later once you're happy with the overall effect.

Use Easing Functions

Simple animations may have a constant speed, but varying the speed can create more natural effects. Easing functions control the rate of change of an animation over time. They can make your animations start slowly, then speed up. Setting different speeds as the animation progresses can create a smooth and engaging animation.

Take this example of using an easing function:

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

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current; 

  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 2000,
        easing: Animated.easeOut,  // use easing function here
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
}

export default function App() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fade In</Text>
      </FadeInView>
    </View>
  );
}

This code uses the Animated.easeOut function to control the rate of change of the opacity of an animated View. The Animated.timing() method will use the ease-out function to gradually change the opacity from 0 to 1 over a duration of two seconds, to make the animation appear to slow down as it reaches its end.

You can use different types of easing functions to make your animations look smoother, including ease-in, ease-out, and ease-in-out.

Choosing the right easing function can make a big difference in the perceived quality of your application's animations. It's worth taking some time to play around with them and see what works best for your specific use cases.

Keyframes Help With Complex Animations

Keyframes are markers that let you pinpoint moments in your animation where you want to make changes to properties like position, scale, or rotation. It's like marking points in time to guide the animation.

You can use a set of keyframes to set specific values for any property you want to animate. This helps you control timing and behavior, especially for complex animations like those involving character movement.

To create a basic keyframe animation, you'll need to specify the keyframes you want to animate between and the total duration.

For example, let's say you want to animate a square from a starting position of (0, 0) to an ending position of (100, 100) over a period of one second.

You can create an array of keyframes like this:

        const keyframes = [
  { x: 0, y: 0 },
  { x: 50, y: 50 },
  { x: 100, y: 100 },
];

In this case, there are three keyframes: one at the start of the animation, one in the middle, and one at the end. You can then pass this array of keyframes to your animation library, along with a duration of 1,000 milliseconds, to create a smooth animation between the keyframes.

In some libraries, you'll also need to specify an easing function to control how the animation progresses. However, you can apply the basic idea of specifying keyframes and duration to most animation libraries.

Take Advantage of the Device With Hardware Acceleration

Hardware acceleration can be a powerful tool for optimizing the performance of your React Native animations. By leveraging the device's graphics hardware, you can offload some of the processing work from the CPU and, in turn, achieve smoother, more responsive animations.

The device’s GPU will then natively process the animated values and styles, rather than the JavaScript thread having to do so.

Hardware acceleration may not be available on all devices, so it's important to test your animations on a variety of real devices to ensure the best performance.