How to implement react native animations using animated api

How to
Implement
React Native
Animations
Using Animated
API
www.bacancytechnology.com

Table of contents
1. Introduction
2. Tutorial Goal: Learn to Implement
React Native Animations
3. Working with React Native
Animations
4. Steps to Quickly Add Animations in
React Native App
5. Conclusion

Animations are an essential part of a UX
of an application. Animations
significantly impact the user for a better
interaction experience and smoothen the
user engagement. Whenever there is an
extended functionality to perform, the
animation is a great idea to engage users.
Animation has a movement from the
static state to the state of motion for
better user interaction. Animations have
various transitions to show elements and
thus make it enjoyable.
You might be tempted to implement
React Native Animations using animated
API, and maybe you are searching for
how to get started with React Native
animations. Here is a step-by-step guide
on adding React Native animations from
scratch.

Tutorial
Goal: Learn
to
Implement
React Native
Animations

We will learn about how to get started
with React Native Animation using the
React Native’s Animated library. The
video is the final output of advanced
animations in React Native.
Watch Video
The main workflow is to create an
Animated Value and use it for different
components. We will be discussing the
following React Native Animation Types
also:

Please add some information to these
points as well
Animated.timing()
It allows us to define an animation to a
specific value over a certain amount of
time.
Animated.spring()
It allows us to define animation from
start points to endpoints without
defining time as we did in timing.

Animated.parallel()
It allows us to have all the defined
animations in the array to trigger at the
same time.
Animated.sequence()
It allows us to have all the defined
animations in the array to trigger one
after another.

Working
with React
Native
Animations

We will start the animation by using the
start() function to our animation-type
methods.
start() takes a completion callback called
when the animation task is completed,
creating an infinite animation.
Using start function with
Animated.timing() :-
Animated.timing(value,{}).start()
Animated.timing() will take two
parameters here, a value and an object.
The object can take values such as
toValue, duration, opacity, etc.

Another parameter we will be using is
useNativeDriver.The native driver helps
send out everything about the animation
to the native code before animation
starts, through which native code can
perform the Animation UI on the thread.
Use this in the animation configuration:
useNativeDriver: true
There are multiple React Native
Animatable components and only these
components can be animated.

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

Steps to
Quickly Add
Animations
in React
Native App

The entire source code is available here –
Github repo
Creating a React Native App
Initially, we will create a react native app
using:
react-native init Animation
Installing dependencies for Navigation
Install stack navigation for navigating
screens using:
npm install react-native-gesture-handler
react-native-safe-area-context @react-
navigation/native
@react-navigation/stack.

Creating Components
We will create basic animation screens such
as-
1. Fade Animation
2. Spin Animation
3. Scale Animation
4. Spring Animation
5. Parallel Animation
6. Sequence Animation
And a main.js file in which we will import all
these screens for navigating.

We will pass the type of animation of the
component in useEffect() as the argument,
so whenever we navigate to the screen
respective component is rendered
immediately based on the type.
Fade Animation
This screen will create an animation on the
image component, which fades in on render.
Create an Animated.Value() for animation
every time to make component animatable :
const Fade= new Animated.Value(0)
We will call Animated.timing() in
useEffect(). The purpose of
Animated.Timing() is to change the input
value to a specified output value after a
certain amount of time.

useEffect(()=>{
Animated.timing(Fade,{
toValue:1,
duration:3000,
}).start()
},[Fade])
Animated.Timing() takes the first argument
as the value which needs to be updated; a
second argument is an object containing
three values. The first value toValue:1
updates the value of Fade to 1. The second
argument duration:3000 is the specific
amount of time after which it should reflect
animation, and the third argument is
useNativeDriver: true, which I have
explained above.

< Animated.Image
style=
{{marginTop:5,height:200,width:200,opacity
:Fade,}}
source={{ uri:
"https://images.unsplash.com/photo-
1541963463532-d68292c34b19?ixlib=rb-
1.2.1&ixid=MXwxMjA3fDB8MHxleHBs
b3JlLWZlZWR8M3x8fGVufDB8fHw%3D&#0
38;w=1000&q=80" }}
>
< /Animated.Image >
opacity:Fade takes the value of Fade to
implement animation after the duration of
3000ms.
Spin Animation
Spin animation rotates and makes the
component spin according to the output
degree values.

const Spin= new Animated.Value(0)
const SpinValue= Spin.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
Interpolation: Interpolation is a way to
estimate function at intermediate points
defined from input range and output range.
We can change colors, rotate and scale the
animation component using interpolation.
useEffect(()=>{
Animated.timing(Spin,{
toValue:1,
duration:3000,
useNativeDriver:true
}).start()
},[Spin])

< Animated.Image
style=
{{height:150,width:180,marginTop:8,borderR
adius:20,transform:[{rotate:SpinValue}]}}
source={{ uri:
1541963463532-d68292c34b19?ixlib=rb-
1.2.1&ixid=MXwxMjA3fDB8MHxleHBs
b3JlLWZlZWR8M3x8fGVufDB8fHw%3D&#0
38;w=1000&q=80" }}
>
< /Animated.Image >
We have used transform configuration in
the image style, which suggests rotating
with the parameter SpinValue as output
range of 360 degrees defined with the
interpolation above.

Create Scaling Animations in React Native
Scale animation grows and expands the
component.
const Scale= new Animated.Value(0)
const ScaleValue= Scale.interpolate({
inputRange: [0, 1],
outputRange: [1, 2]
})
useEffect(()=>{
Animated.timing(Scale,{
toValue:1,
duration:3000,
useNativeDriver:true
}).start()
},[Scale])

< Animated.Image
style={{height:100,width:130,transform:
[{scale:ScaleValue}]}}
source={{ uri:
1541963463532-d68292c34b19?ixlib=rb-
1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlL
WZlZWR8M3x8fGVufDB8fHw%3D&w=100
0&q=80" }}
>
< /Animated.Image >
We have used transform configuration in
the image style, which suggests scaling with
the parameter ScaleValue of specified
output range defined with the interpolation
above.
Spring Animation
Spring Animation is like what spring looks
like when it’s in motion.

const Spring= new Animated.Value(0.2)
useEffect(()=>{
Animated.spring(Spring,{
toValue:1.1,
friction:1,
useNativeDriver:true}).start()
},[Spring])
Here Animated.spring() animation takes a
configuration similar to the
Animated.timing() instead of duration it
uses friction and tension as the physics
spring model.

< Animated.Image
style={{height:150,width:180,transform:
[{scale:Spring}]}}
source={{ uri:
1541963463532-d68292c34b19?ixlib=rb-
1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlL
WZlZWR8M3x8fGVufDB8fHw%3D&w=100
0&q=80" }}
>
< /Animated.Image >
Parallel Animation
Parallel animation takes an array of
different Animation type configurations to
animinate them parallelly.
Here we are taking three different
animatable components,i.e., Scale, spring,
and rotate, to make them animate
parallelly.

Initializing animated values with
interpolation for three scenario:

const Scale = new Animated.Value(0)
const ScaleValue = Scale.interpolate({
inputRange: [0, 1],
outputRange: [-3, 2]
});
const Spin = new Animated.Value(0)
const SpinValue = Spin.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"]
});
const SpringVal = new Animated.Value(1)
Starting Animation for parallel animation
type in use effect:
useEffect(() => {
Animated.parallel(
[
Animated.timing(Scale, {
toValue: 1,
duration: 3000,
}), //scaling

Animated.spring(SpringVal, {
toValue: 2,
friction: 1,
tension: 0.5,
}), //spring
Animated.timing(Spin, {
toValue: 1,
duration: 3000,
}) //spin
])
.start()
}, [Scale, SpringVal, Spin])
Rendering Animated components(View and
text) on the screen with types:

< Animated.View
style={{ height: 50, width: 80,
backgroundColor: 'red',
transform: [{ scaleX: ScaleValue }] }}
>
What's up
Welcome here !!
< /Animated.Text >
Sequence Animation
Sequence Animation takes an array of
different Animation type configurations
and animates them one by one after the
previous one ends.

Here we are taking three different
animatable components,i.e., Scale, spring,
and rotate, to make them animate
sequentially; everything else is similar to
parallel animation.
Initializing steps will be similar to the
parallel except the starting of the animation
component.It uses Animated.sequence()
type in useeffect :

useEffect(() => {
Animated.sequence(
[
Animated.timing(Scale, {
toValue: 1,
duration: 3000,
}), //scaling
Animated.spring(SpringValue, {
toValue: 2,
friction: 1,
tension: 0.5,
}), //spring
Animated.timing(Spin, {
toValue: 1,
duration: 3000,
}) //spin
]).start()
}, [Scale, SpringValue, Spin])

This was all about how to implement React
Native Animations using Animated API
scratch. Animations make your application
presentable and due to which users enjoy
interaction with your app. If you are looking
for a helping hand to animate your React
Native App within the project, then get in
touch with us to leverage our top-notch
React native app development expertise.
We also let you hire React Native developer
at your ease and convenience with your
preferable engagement model.

Thank You
www.bacancytechnology.com

How to implement react native animations using animated api

More Related Content

Similar to How to implement react native animations using animated api (20)

More from Katy Slemon (20)

Recently uploaded (20)

How to implement react native animations using animated api