This document provides a step-by-step guide to implementing animations in React Native using the Animated API. It discusses animation types like timing, spring, parallel and sequence. It also outlines the steps to create a new React Native app and add different animation screens for fade, spin, scale, spring, parallel and sequence animations. Key aspects covered include using Animated Values, interpolations and starting animations. The goal is to learn how to get started with React Native animations from scratch using the Animated library.
4. 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.
6. 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:
7. 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.
8. 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.
10. 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.
11. 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.
14. 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.
15. 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.
16. 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.
19. 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])
23. 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.
26. 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,
useNativeDriver: true
}), //scaling
27. Animated.spring(SpringVal, {
toValue: 2,
friction: 1,
tension: 0.5,
useNativeDriver: true
}), //spring
Animated.timing(Spin, {
toValue: 1,
duration: 3000,
useNativeDriver: true
}) //spin
])
.start()
}, [Scale, SpringVal, Spin])
Rendering Animated components(View and
text) on the screen with types:
28. < 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.
29. 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 :
32. 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.