Creating Reusable Animation Components in React Native with the Animated Library

by Jackattack

Animations have become crucial, if not imperative, in modern web and mobile development. They’ve come to serve not just aesthetic purposes, but provide context to users, make sites feel interactive, provide better experience, and signify an application’s overall up-to-dateness. In this blog post, I wanted to discuss constructing Animation components that we can utilize throughout our app. As I had argued in last week’s post, reusable components are not only helpful for making our code dry, cleaner, more modularized, and elegant, but also keeps our app’s UI more consistent.

Animated, a library that comes built into React Native is an amazing API that allows for readily made, custom Animations. To use it, simply import it in the same way you would a View Native Component or a Text as such:

In this blog, we’re going to build a super simple reusable animation component, that will quite literally fade subject components into view upon their mounting aptly called FadeIn. Below is the source code for the Animation component.

On line 5 we are initializing a ref with the useRef hook and setting its initial value equal to an instantiation of a new Animated.Value, passing in an initial argument of 0. We then stored storing the ref’s current property in a variable called fadeIn. I’m not going to explain the useRef hook in depth here, but you can read about it in my prior blog post specifically on the useRef hook. In our useEffect hook, we invoke the Animated API once again, with the timing method, which takes in two arguments. The ref we created on line 5, and an object with the property toValue, which we set equal to 1, the final value we’d like it to reach upon component mounting, and the duration, which sets the time it’ll take for the ref to reach the toValue property. Animated also has two other built-in method properties we can use to set the ‘shape’ of change over a given period of time. While Animated.timing() creates a linear event, Animated.spring() creates an event that accelerates to its ultimate value, and Animated.decay() decelerates to its ultimate value. We then call .start() on the whole thing to invoke the whole Animation process. If we look in our return statement, we create an Animated.View component. When using animations, we must add Animated with its associated Component property (there are several from which to choose, like Animated.Text or Animated.Image). On that Animated View component, we use the style property to add any styles we may be passing in as props. Most importantly, we also use the opacity property and set it equal to our ref, meaning that the component’s opacity will start at 0 on mount, and will within 2 seconds, increase in opacity until it reaches its max value of 1.

Wrapped in our Animated.View we pass in React’s built-in props.children, essentially commanding that whatever is wrapped in our Animation Component must be rendered there — within the Animated.View. This is the most crucial aspect that allows us to dynamically use our FadeIn component by wrapping it around any component we desire.

In our ViewPoster component, we import our FadeIn Component and wrap a View with a Text tag within it! Now, whatever is wrapped in our FadeIn component will fade into view on its mounting.

Here’s a video example of what our Animation looks like!