Using Animations

Animations can be used to improve the user experience in mobile applications. They usually help users to quickly recognize that something has changed, or help them focus on what is important. They improve the user experience and user satisfaction. Also, animations are simply fun to look at. For example, the heartbeat reaction in the Instagram app when you like a post or the Snapchat ghost animation when refreshing a page.

There are a couple of different approaches to processing and controlling animations in React Native. Firstly, we will take a look at animation tools that we can use, discover their pros and cons, and compare them. Then, we will implement several examples to get to know APIs better.

We’ll cover the following topics in this chapter:

• Using React Native Reanimated
• Animating layout components
• Animating component styles

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter26.

Using React Native Reanimated

In the React Native world, we have a lot of libraries and approaches to animate our components, including the built-in Animated API. But in this chapter, I would like to opt for a library called React Native Reanimated and compare it with the Animated API to learn why it is the best choice.

The Animated API

The Animated API is the most common tool used to animate components in React Native. It has a set of methods that help you to create an animation object, control its state, and process it. The main benefit is that it can be used with any component, and not just animated components such as View or Text.

But, at the same time, this API has been implemented in the old architecture of React Native. Asynchronous communications between JavaScript and UI Native threads are used with the Animated API, delaying updates by at least one frame and lasting approximately 16 ms. Sometimes, the delay may last even longer if the JavaScript thread is running React’s diff algorithm and comparing or processing network requests simultaneously. The problem of dropped or delayed frames can be solved with the React Native Reanimated library, which is based on the new architecture and processes all business logic from the JavaScript thread in the UI thread.

React Native Reanimated...

Animating layout components

A common use case is animating the entering and exiting layouts of your components. This means that when your component renders for the first time and when you unmount your component, it appears animated. React Native Reanimated is an API that lets you animate layouts and add animations such as FadeIn, BounceIn, and ZoomIn.

React Native Reanimated also provides a special Animated component that is the same as the Animated component in the Animated API, but with additional props:

• entering: Accepts a predefined animation when the component mounts and renders
• exiting: Accepts the same animation object, but it will be called when the component unmounts

Let’s create a simple to-do list with a button for creating tasks and a feature that allows us to delete tasks when we click on them.

It’s impossible to see animations in screenshots, so I suggest you open the code and try to implement the animations to...

Animating component styles

In a more complex example, I suggest creating a button with beautiful tappable feedback. This button will be built using the Pressable component that we learned about in Chapter 23, Responding to User Gestures. This component accepts the onPressIn, onLongPress, and onPressOut events. As a result of these events, we will be able to see how our touches will be reflected on the button.

Let’s start by defining SharedValue and AnimatedStyle:

  const radius = useSharedValue(30);
  const opacity = useSharedValue(1);
  const scale = useSharedValue(1);
  const color = useSharedValue(0);
  const backgroundColor = useDerivedValue(() => {
    return interpolateColor(color.value, [0, 1], ["orange",      "red"]);
     });
  const animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      borderRadius: radius.value,
      transform: [{ scale: scale.value }],
      backgroundColor: backgroundColor...

Summary

In this chapter, we’ve learned how to use the React Native Reanimated library to add animations to the layout and components. We’ve gone through the basic principles of the library and found out how it works under the hood and how it executes code inside the UI thread without using Bridge to connect JavaScript and Native layers of the app.

We also went through two examples using the React Native Reanimated library. In the first example, we learned how to apply a layout animation using predefined declarative animations to get our component to appear and disappear beautifully. In the second example, we animated the button’s styles with the useSharedValue and useAnimatedStyle hooks.

Skills to animate components and layout will help you make your app more beautiful and responsive. In the next chapter, we’ll learn about controlling images in our apps.