Animations in React native

The App we use is admirable to us through design and animations that is going on in that app. In this article we are going to look how cool your react native application looks if you have these animations

Thing we are going to learn

• Animated API — It is the inbuilt functionality in react native which will help us to create animations
• Animation Configurations — Each of us may need a different sort of animations and we can do that using the vast configurability available over animated api.
• Animation Composition — It is not that animation has to be in a specific manner. We can delay or sequence the animation and so on using the composing functions.

Animated API

Animated has 6 default component types such asView, Text, Image, ScrollView, FlatList and SectionList , but there is even more as you can create your own animated component using Animated.createAnimatedComponent() function.

To get started lets start very simple usingAnimated.timing()

note: The outputs provided are in .gif format. Its not in loop, as it is in gif, it looks like its in loop

• This is a basic fade in animation which takes 10 seconds to complete the animation
• The seconds is mentioned in line number 13 in milliseconds format
• fading is achieved by using the fadeAnim reference in opacity .
• We can change the behaviour by using the reference in translate property.
• Animated.timing() is used to specify the time duration and also the toValue at which the animation has to complete

Animation Configuration

• Animated.decay() starts with an initial velocity and gradually slows to a stop.
• Animated.spring() provides a basic spring physics model.
• Animated.timing() animates a value over time using easing functions.

• Here there is a new property useNativeDriver which is by default false.
• By using the native driver, the native code will perform the animation on the UI thread without having to go through the bridge on every frame.

Only animatable components be animated as these components will only be able to implement animated value to their properties.

createAnimatedComponent() can be used to make a component animatable.

Animated exports the following animatable components using the above wrapper:

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

The interpolate() function allows input ranges to map to different output ranges. It uses linear interpolation by default but also supports easing functions.

Here we have also used Easing in line number 19 which specifies how to animate a value over time

Here a Single animated value is been used and its been interpolated to start and end the animations at the same time.

Animation Composition

The following functions are available animation compositions

• 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.

Animations can also be chained together by setting the toValue of one animation to be another Animated.Value . By default when chaining or doing any other composition, stopping of one animation will stop the other animations in composition too

Let’s have some code example on animation composition.

Here we used Animated.parallel() which is nested inside Animated.sequence() and both of these animations have Animated.spring() in them

As we do so we combine multiple animations which creates a different animation at the end

So with Animation composition there is an endless possibilities of animations we could make.

Let’s recap the learning

• There are different types of animations with Animated, timed and spring being the ones you will need for most use cases. Both can be delayed using the delay property, and timed animations can follow a fixed duration if given.
• These same timed animations use easing functions to know how to animate a value over time. There is a long list of easing functions you can choose from, each one bringing a different touch.
• Animations can be easily composed, using Animated sequence, parallel, and stagger. All of them can be combined so you can create very complex animations.

For more informations you can read the elaborated react native documentation here React Native Animated