react-native-course - Animations module

Animations in React Native

Agenda

What is animation?
How animation can be done in React Native. A brief overview.
Animated API
LayoutAnimation API
Reanimated
Third-party solutions for animations
Conclusion and QA session

On this slide you can see today’s agenda.

We will start by talking about what animation is in general and how it can be done in React Native.

Here we'll try animating with translation prop directly in JS thread and talk about why it is not a good idea. What React Native provides in terms of animation (Animated and LayoutAnimations APIs) and what are community provided solutions (Reanimated, Lottie, Rive to name a few)

Next we'll dive into Animated API by checking code examples and discussing its limitations.

LayoutAnimation is our next stop after which we'll take a closer look on Reanimated - the most popular and complex third-party solution for animation in React Native. What's the reasoning behind this library? What are the benefits over Animated and LayoutAnimation APIs? Of course there will be a coding section with hands on experience here.

Last but not least, we'll try some other third party solutions for some really complex animations, like Lottie and more recent Rive libraries.

At the end of all that, we'll have plenty time for QA and some conclusions. Buckle up and let's get started!

What is animation?

Animations in mobile applications

How animation can be done in React Native

JavaScript
React Native APIs:
- Animated API
- LayoutAnimation API
Third-party solutions:
- Reanimated
- Lottie
- Rive and others

Animation with plain JavaScript

              
                import React, { useState } from 'react';
                import { Button, SafeAreaView, View } from 'react-native';
                import { styles } from './screens.styles';

                export const PlainJsScreen: React.FC = () => {
                  return (
                    <SafeAreaView style={styles.wrapper}>
                      <View style={styles.screenContainer}>
                        <View style={styles.ball} />
                        <View style={styles.button}>
                          <Button title="Animate!" />
                        </View>
                        <View style={styles.button}>
                          <Button title="Reset" />
                        </View>
                      </View>
                    </SafeAreaView>
                  );
                };

Animation with plain JavaScript

              
                import React, { useState } from 'react';
                import { Button, SafeAreaView, View } from 'react-native';
                import { styles } from './screens.styles';

                export const PlainJsScreen: React.FC = () => {
                  const [translation, setTranslation] = useState(0);

                  const onAnimatePress = () => {
                    for (let i = -100; i < 0; i++) {
                      setTimeout(() => setTranslation(i), 10 * -i);
                    }
                  };

                  return (
                    <SafeAreaView style={styles.wrapper}>
                      <View style={styles.screenContainer}>
                        <View
                          style={[
                            styles.ball,
                            {
                              transform: [{ translateY: translation }],
                            },
                          ]}
                        />
                        <View style={styles.button}>
                          <Button title="Animate!" onPress={onAnimatePress} />
                        </View>
                        <View style={styles.button}>
                          <Button title="Reset" onPress={() => setTranslation(0)} />
                        </View>
                      </View>
                    </SafeAreaView>
                  );
                };

Animation with plain JavaScript

              
                  return (
                    <SafeAreaView style={styles.wrapper}>
                      <View style={styles.screenContainer}>
                        <View
                          style={[
                            styles.ball,
                            {
                              transform: [{ translateY: translation }],
                            },
                          ]}
                        />
                        <View style={styles.button}>
                          <Button title="Animate!" onPress={onAnimatePress} />
                        </View>
                        <View style={styles.button}>
                          <Button title="Reset" onPress={() => setTranslation(0)} />
                        </View>
                      </View>
                    </SafeAreaView>
                  );
                };

Animation with plain JavaScript

              
                  return (
                    <SafeAreaView style={styles.wrapper}>
                      <View style={styles.screenContainer}>
                        <View
                          style={[
                            styles.ball,
                            {
                              transform: [{ translateY: translation }],
                            },
                          ]}
                        />
                        <View style={styles.button}>
                          <Button title="Animate!" onPress={onAnimatePress} />
                        </View>
                        <View style={styles.button}>
                          <Button title="Reset" onPress={() => setTranslation(0)} />
                        </View>
                      </View>
                    </SafeAreaView>
                  );
                };

Animation with plain JavaScript

Unnecessary code complexity
Low performance and animation interruptions
setState being used. Link to docs

React Native APIs

Animated API Documentation
LayoutAnimation API Documentation

In terms of built-in solutions, React Native provides two complementary APIs that solve different animation cases. When you need to animate a specific screen element with precise control over all animation stages Animated API is the way to go. On the other hand, situations when we need to animate screen elements between layout changes are much more common. For instance, you'd like to show and hide selected input fields depending on the form mode. Or perhaps you'd like to smoothly hide a bottom sheet on close button press. LayoutAnimation API is perfect for that. It requires small amount of code and provides nice results out of the box. Let's dive deeper into the Animated API to see how it works and how we can use it.

Animation with Animated API

Animated API. Let's start

What:

Animate our component's position

How:

Using 'transform' property animation

What we need:

A value
A function that changes our value
A way to link our component style to the changing value

Animated API. Value and animation methods

                
                  import { Animated } from 'react-native';

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

              
                Animated.timing(translation, {
                  toValue: -100,
                  duration: 1000,
                }).start();

Firstly we need the value that changes gradually over time. Animated has a special Value class for that. To make things work we need to create this class instance in our component. As stated in documentation we shouldn’t modify the animated value directly, instead we can use the useRef hook to create the Value class instance once on component render. Now when we have an animated value, we need a way to animate it. Animated provides a set of methods we can use and timing() fits our needs perfectly here. It animates a value in time. Timing method expects two parameters: value to animate and the config object. Via configuration object we can set to what value the animation will go and animation duration. It has other props that we’ll discuss later.

Animated API. Animated components

                
                  <Animated.View
                    style={[
                      styles.ball,
                      {
                        transform: [{ translateY: translation }],
                      },
                    ]}
                    />
                  </Animated.View>

Animated components:

View
Text
ScrollView
FlatList
SectionList
Image

Animated API. timing method

timing() method options:

duration
easing
delay
isInteraction
useNativeDriver

Now everything works and we already have much smoother animation. So it’s time to check what other options are available for our timing method. Till now we used toValue and duration. As per documentation, the full list is: - duration: Length of animation (milliseconds). Default 500. - easing: Easing function to define curve. Default is Easing.inOut(Easing.ease). - delay: Start the animation after delay (milliseconds). Default 0. - isInteraction: Whether or not this animation creates an "interaction handle" on the InteractionManager. Default true. - useNativeDriver: Uses the native driver when true. Default false. I’d like to discuss two new options from this list: easing and useNativeDriver.

Animated API. Easing

Easing allows you to specify the function that defines how animated parameter will change over time.

Easing Functions

              
                import { Animated, Easing } from 'react-native';

              
                Animated.timing(translation, {
                  toValue: -100,
                  duration: 1000,
                  easing: Easing.bounce,
                }).start();

Easing Methods

              
                Animated.timing(translation, {
                  toValue: -100,
                  duration: 1000,
                  easing: Easing.out(Easing.bounce),
                }).start();

Easing allows you to specify the function that defines how animated parameter will change over time. This can help to achieve more natural looking motion - in real life objects almost never move at the linear speed. The default easing in timing method is ‘ease in out’ - when animation starts a bit slower, then runs at a regular speed and slows down before the end. Feel free to check other easing function examples at https://easings.net/. At this point you may wonder how to implement other easing functions to apply them in your animation. RN provides Easing module for that. Available methods can be found in RN docs: https://reactnative.dev/docs/easing#methods. Some of them require additional parameters.

Animated API. useNativeDriver

useNativeDriver when set to 'true' sends all the animation data processing to the UI thread (native side).

              
                Animated.timing(translation, {
                  toValue: -200,
                  duration: 1500,
                  useNativeDriver: true,
                }).start();

useNativeDriver features to be aware of:

Animated values are only compatible with one driver.
Not all Animated features are supported with native driver.

If you use native driver while animating the value, every animation on this value further should use the native driver too.

You can only animate non-layout properties (transform, opacity) - position and flexbox properties won’t work.

Now it’s time to discuss the useNativeDriver prop. By setting this prop to ‘true’ we can send all the animation data to native side, so our animation runs in the UI thread and the JS thread can’t affect the animation anymore. When using the native driver we should be aware of its two features: - Animated values are only compatible with one driver. This means if you use native driver while animating the value, every animation on this value further should use the native driver too. So you can’t run one animation on ‘translation’ value from our example using the native driver and then fire another one that doesn’t use it. - Not all Animated features are supported with native driver. You can only animate non-layout properties (transform, opacity) - position and flexbox properties won’t work.

Animated API. Composition

Composition functions:

Animated.delay(). Starts an animation after a given delay.
Animated.parallel(). Starts a number of animations at the same time.
Animated.sequence(). Starts the animations in order, waiting for each to complete before starting the next.
Animated.stagger(). Starts animations in order and in parallel, but with successive delays.

Animated API. Composition. Parallel

To launch animations in parallel we simply need to wrap them with Animated.parallel([]).

              
                Animated.parallel([
                  Animated.timing(nativeTranslation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: true,
                  }),
                  Animated.timing(translation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                  Animated.timing(size, {
                    toValue: 50,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                ]).start();

If one animation is stopped or interrupted, all other animations in parallel are also stopped:

              
                const onStopPress = () => {
                  Animated.timing(translation, {
                    toValue: -100,
                    useNativeDriver: false,
                  }).stop();
                };

Animated API. Composition. Sequence

Sequence launches the provided animations one after another:

              
                Animated.sequence([
                  Animated.timing(nativeTranslation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: true,
                  }),
                  Animated.timing(translation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                  Animated.timing(size, {
                    toValue: 50,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                ]).start();

If the current running animation is stopped, no following animations will be started.

Animated API. Composition. Stagger

Stagger is very similar, but it allows you to additionally specify the delay between animations:

              
                Animated.stagger(2000, [
                  Animated.timing(nativeTranslation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: true,
                  }),
                  Animated.timing(translation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                  Animated.timing(size, {
                    toValue: 50,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                ]).start();

Array of animations may run in parallel (overlap) if you specify duration values that are longer than delay between animations.

Animated API. Composition. Delay

Animated.delay() is meant to be used in Stagger or Sequence to put delays between animations:

              
                Animated.sequence([
                  Animated.timing(nativeTranslation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: true,
                  }),
                  Animated.delay(2000),
                  Animated.timing(translation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                ]).start();

You can pass delay to animation config as an option with the same result:

              
                Animated.sequence([
                  Animated.timing(nativeTranslation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: true,
                  }),
                  Animated.timing(translation, {
                    toValue: -200,
                    delay: 2000,
                    duration: 1500,
                    useNativeDriver: false,
                  }),
                ]).start();

Animated API. Composition. Combination

Not only Animated.delay() can be used in combination with other methods:

              
                Animated.sequence([
                  Animated.timing(nativeTranslation, {
                    toValue: -200,
                    duration: 1500,
                    useNativeDriver: true,
                  }),
                  Animated.parallel([
                    Animated.timing(translation, {
                      toValue: -200,
                      duration: 1500,
                      useNativeDriver: false,
                    }),
                    Animated.timing(size, {
                      toValue: 50,
                      duration: 1500,
                      useNativeDriver: false,
                    }),
                  ]),
                ]).start();

Animated API. Spring

Spring() is a method that animates a value according to a spring based model.

Animated API. Spring

In case of spring we don’t specify the animation duration directly. Instead we have a config object where we can set speed:

                  
                    Animated.spring(nativeTranslation, {
                      toValue: -100,
                      useNativeDriver: true,
                      speed: 12,
                      bounciness: 30,
                    }).start();

With spring() use either speed/bounciness or friction/tension pair of settings to control your animation.

Docs for spring configuration

Animated API. Interpolation

"Interpolation - a type of estimation, a method of constructing (finding) new data points based on the range of a discrete set of known data points".

0.3	0.5	1
30	50	100
-60	-100	-200

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

                    Animated.timing(animatedValue, {
                      toValue: 1,
                      duration: 1500,
                      useNativeDriver: false,
                    }).start();

                  
                    const translate = animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, -200],
                    });
                    const size = animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [100, 50],
                    });

                  
                    <Animated.View
                      style={[
                        {
                          transform: [{ translateY: translate }],
                        },
                        {
                          width: size,
                          height: size,
                        },
                      ]} />

We’ve just successfully animated the numeric transform value. But what if I’d like to animate color? That’s where interpolation enters the scene. Animated API provides you with the option to map your animated value range to the output range of your choice. To understand how this works, let’s first understand what interpolation is in general. Wikipedia defines interpolation as ‘a type of estimation, a method of constructing (finding) new data points based on the range of a discrete set of known data points.’ Here’s a basic example of that: We have a value that changes gradually over time from 0 to 1. But we want to change another value from 0 to 100 with the same speed. You can say that we have two ranges [0 - 1] and [0 - 100]. From that point it is pretty obvious how one range connects to another. 0,3 from the first range will link to 30 from the second, 0.5 to 50 and so on. This is valid for linear interpolation and it works the same way for other cases. For instance we can have a negative range [0, -200] and we can interpolate to this range from our initial one: 0.5 will be -100 and so on and so forth. Or a range that starts with non zero value [50, 100]: 0.5 will interpolate to 75. In our example we can have a single animated value interpolated to multiple values we use to animate our objects. We now have a single animated value that controls size and translation animations.

Animated API. Interpolation

Animating the color with interpolation:

              
                <Animated.View
                  style={[
                    {
                      backgroundColor: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [‘red’, ‘blue’],
                      }),
                    }
                ]} />

Using multiple range segments in interpolation:

              
                value.interpolate({
                  inputRange: [-300, -100, 0, 100, 101],
                  outputRange: [300, 0, 1, 0, 0]
                });

Input	Output
-300	300
-200	150
-100	0
-50	0.5
0	1
50	0.5
100	0
101	0

Animated API. Interpolation. Easing

You can specify easing function for interpolation:

              
                <Animated.View
                  style={[
                    {
                      backgroundColor: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [‘red’, ‘blue’],
                      easing: Easing.cubic,
                      }),
                    }
                ]} />

Animated API. Interpolation. Extrapolation

In mathematics, extrapolation is a type of estimation, beyond the original observation range. Let’s say we want to start changing size only when my animated value reaches 0.5.

              
                <Animated.View
                  style={[
                    {
                      backgroundColor: animatedValue.interpolate({
                      inputRange: [0.5, 1],
                      outputRange: [100, 50],
                      }),
                    }
                ]} />

React Native will try to extrapolate and guess what output value should be when the input is 0. In the example above it will be 150. But that’s not what we want:

              
                <Animated.View
                  style={[
                    {
                      backgroundColor: animatedValue.interpolate({
                        inputRange: [0.5, 1],
                        outputRange: [100, 50],
                        extrapolateLeft: 'clamp',
                      }),
                    }
                ]} />

Apart 'extrapolateLeft' we can use 'extrapolateRight' or 'extrapolate' to set both.

Last option to discuss in interpolation is extrapolation. In mathematics, extrapolation is a type of estimation, beyond the original observation range. Here’s an example of when we may need it. Let’s say we want to start changing size only when my animated value reaches 0.5. If we put the code like that: [first code block] RN will try to extrapolate and guess what output value should be when the input is 0. In the example above it will be 150. But that’s not what we want. To prevent such behavior we can set the extrapolateLeft prop to be ‘clamp’ (by default it’s ‘extend’). If the same is required for the right range border we can use extrapolateRight and to set both - extrapolate.

Animation with LayoutAnimation API

LayoutAnimation API

LayoutAnimation Documentation

Pros:

Simplicity
Performance

Cons:

Limited control over animation properties

Okay, now when we sorted the Animated API, let’s imagine you need to animate multiple layout elements on your screen. Like adding a tile to the stack (animated list) or re-arranging screen elements depending on user selection. Animated API is a very versatile tool, but why go the complex way when it’s non needed? Defining animation for each element can be a huge amount of work for something as simple as re-arranging screen elements. Luckily, RN provides an API for such cases! As you may have guessed already, the main advantage of LayoutAnimation API is its simplicity. This API is easy to set up and use while providing some level of control over animation properties, such as duration, easing function and animation type. Another great feature of this API is that we shouldn’t bother about the APIs performance - React Native team made these animations smooth and fluid, minimizing jank and stuttering, and providing a seamless user experience. Another point to using LayoutAnimation for our case. Enough of the intro, let’s try it out!

LayoutAnimation API

Task:

Animate a login screen that can show different inputs depending if you log in or register for the first time

To make things work on Android the following code is required:

                    
                      if (Platform.OS === 'android') {
                        if (UIManager.setLayoutAnimationEnabledExperimental) {
                          UIManager.setLayoutAnimationEnabledExperimental(true);
                        }
                      }

Let’s stick with the following example: we’d like to animate a login screen that can show different inputs depending if you log in or register for the first time. The screen is very basic - it uses state to trigger some elements to be shown or hidden. And while it works, the transition between states looks bad - all changes happen instantly on new render. There’s one small step we should take before we can start using the LayoutAnimation API. On Android devices in order to make things work we need to add the following code to our App [CODE SNIPPET]. This code is global, so you need to add it only once to be able to use LayoutAnimation API throughout your application. Also, in some cases you don’t need to add it manually at all since some libraries use LayoutAnimation API as well, so this code is added from their end. For instance, Reanimated that we’ll touch a bit later. Anyhow, that’s it with the set up and we’re ready to animate.

LayoutAnimation API

As stated in RN documentation, “A common way to use this API is to call it before updating the state”. So let’s do it:

                  
                    const onStateSwitch = (newState: AUTH_SCREEN_STATE) => {
                      LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
                      setScreenState(newState);
                    };

Don't forget to import the LayoutAnimation module from react native. After that just configure next layout animation using the provided presets.

Apart from linear preset other available options are “easeInEaseOut” and “spring”. If you need more control, custom config is the way to go.

As stated in RN documentation, “A common way to use this API is to call it before updating the state”. So let’s do it. We should import the LayoutAnimation module from react native and just configure the next layout animation using the provided presets. One line of code and our changes are animated. As you can see I used the linear preset here. Other available options are “easeInEaseOut” and “spring”. Not much, but remember that LA is all about simplicity. Besides, there’s an option for custom animation config if you’d like to have more control over the process. In our case, you may already see a point of improvement: we may adjust the animation speed on different stages to avoid form elements visible overlap during the transitions.

LayoutAnimation API. Custom config

LayoutAnimation.configureNext accepts the config object as its first parameter with the following fields:

• duration in milliseconds
• create, optional config for animating in new views
• update, optional config for animating views that have been updated
• delete, optional config for animating views as they are removed

And every optional config supports:

• type, the animation type to use
• property, the layout property to animate
(optional, but recommended for create and delete)
- supported props are opacity, scaleX, scaleY and scaleXY.
• springDamping, optional config for animating views that have been updated
• initialVelocity, optional config for animating views as they are removed
• delay, optional config for animating views as they are removed
• duration, optional config for animating views as they are removed

                  
                    const customLayoutAnimation = {
                      duration: 400,
                      update: {
                        type: LayoutAnimation.Types.linear,
                        property: LayoutAnimation.Properties.opacity,
                      },
                    };

                  
                      const onStateSwitch = (newState: AUTH_SCREEN_STATE) => {
                        LayoutAnimation.configureNext(customLayoutAnimation);
                        setScreenState(newState);
                      };

LayoutAnimation API. Custom config

                  
                    const customLayoutAnimation = {
                      duration: 400,
                      create: {
                        duration: 700,
                        type: LayoutAnimation.Types.linear,
                        property: LayoutAnimation.Properties.opacity,
                      },
                      update: {
                        type: LayoutAnimation.Types.linear,
                        property: LayoutAnimation.Properties.opacity,
                      },
                      delete: {
                        duration: 100,
                        type: LayoutAnimation.Types.linear,
                        property: LayoutAnimation.Properties.opacity,
                      },
                    };

But then I’m not happy with the way my inputs appear and disappear immediately. So I need to add the delete and create configs to my custom object: [CODE SNIPPET] Now I have full control over all three phases. So I set the create animation to be slower than update one (my inputs appear slower and buttons have time to slide down), while the delete one is set to be faster as I don’t want my buttons to overlap with inputs when I go from Register view to the initial one: [VIDEO] Feel free to experiment with custom animation config to adjust your animation for some specific use case. As you can see, despite being a simple and easy to learn tool, LayoutAnimation API provides you with options on precise animation control if you decide that default config doesn’t work that well for you. We get a lot for such a small coding effort and I think it’s an awesome tool to have in your dev arsenal.

Animations in React Native

Agenda

What is animation?

Animations in mobile applications

How animation can be done in React Native

Animation with plain JavaScript

Animation with plain JavaScript

Animation with plain JavaScript

Animation with plain JavaScript

Animation with plain JavaScript

Animation with plain JavaScript

Animation with plain JavaScript

Animation with plain JavaScript

React Native APIs

Animation with Animated API

Animated API. Let's start

What:

How:

What we need:

Animated API. Value and animation methods

Animated API. Animated components

Animated components:

Animated API. timing method

timing() method options:

Animated API. Easing

Animated API. useNativeDriver

useNativeDriver features to be aware of:

Animated API. Composition

Composition functions:

Animated API. Composition. Parallel

Animated API. Composition. Sequence

Animated API. Composition. Stagger

Animated API. Composition. Delay

Animated API. Composition. Combination

Animated API. Spring

Animated API. Spring

Animated API. Interpolation

Animated API. Interpolation

Animated API. Interpolation. Easing

Animated API. Interpolation. Extrapolation

Animation with LayoutAnimation API

LayoutAnimation API

LayoutAnimation Documentation

Pros:

Cons:

LayoutAnimation API

Task:

LayoutAnimation API

LayoutAnimation API. Custom config

LayoutAnimation API. Custom config

Animation with Reanimated

Animation with third-party libraries

QA