How to Use Animated View in React Native
How to Use Animated View in React Native
Animated View is a powerful way to animate components in React Native. It can be used to create smooth and fluid animations which can be used to enhance the user experience. In this tutorial, we will learn how to use Animated View in React Native to create 5 different animation examples.
Example 1: Animated Fade
The first example is an animated fade. This animation will fade in and out a view. To create this animation, we will use the Animated.timing
method.
import React, { useState, useEffect } from 'react';
import { Animated } from 'react-native';
const FadeInView = (props) => {
const [fadeAnim] = useState(new Animated.Value(0)) // Initial value for opacity: 0
React.useEffect(() => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 10000,
}
).start();
}, [])
return (
<Animated.View // Special animatable View
style={{
...props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{props.children}
</Animated.View>
);
}
In this code, we use the useState
hook to create the fadeAnim
value. This is the value that will be used to animate the view. Next, we use the useEffect
hook to trigger the Animated.timing
method. This method takes two parameters, an animated value and an object which contains the toValue
and duration
of the animation. The toValue
specifies the value we want to animate to, and the duration
specifies the duration of the animation. Finally, we use the Animated.View
component to wrap the children and apply the animation to the opacity
style.
Example 2: Animated Scale
The second example is an animated scale. This animation will scale up and down a view. To create this animation, we will use the Animated.spring
method.
import React, { useState, useEffect } from 'react';
import { Animated } from 'react-native';
const ScaleInView = (props) => {
const [scaleAnim] = useState(new Animated.Value(0)) // Initial value for scale: 0
React.useEffect(() => {
Animated.spring(
scaleAnim,
{
toValue: 1,
friction: 3,
useNativeDriver: true
}
).start();
}, [])
return (
<Animated.View // Special animatable View
style={{
...props.style,
transform: [{scale: scaleAnim}]
}}
>
{props.children}
</Animated.View>
);
}
In this code, we use the useState
hook to create the scaleAnim
value. This is the value that will be used to animate the view. Next, we use the useEffect
hook to trigger the Animated.spring
method. This method takes two parameters, an animated value and an object which contains the toValue
, friction
and useNativeDriver
of the animation. The toValue
specifies the value we want to animate to, the friction
specifies the amount of friction to apply to the animation, and the useNativeDriver
specifies whether to use the native animation driver. Finally, we use the Animated.View
component to wrap the children and apply the animation to the transform
style.
Example 3: Animated Rotate
The third example is an animated rotate. This animation will rotate a view. To create this animation, we will use the Animated.loop
method.
import React, { useState, useEffect } from 'react';
import { Animated, Easing } from 'react-native';
const RotateInView = (props) => {
const [rotateAnim] = useState(new Animated.Value(0)) // Initial value for rotate: 0
React.useEffect(() => {
Animated.loop(
Animated.timing(
rotateAnim,
{
toValue: 1,
duration: 1000,
easing: Easing.linear,
useNativeDriver: true
}
)
).start();
}, [])
const rotateInterpolate = rotateAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
const animatedStyle = {
transform: [{
rotate: rotateInterpolate
}]
}
return (
<Animated.View // Special animatable View
style={{
...props.style,
...animatedStyle
}}
>
{props.children}
</Animated.View>
);
}
In this code, we use the useState
hook to create the rotateAnim
value. This is the value that will be used to animate the view. Next, we use the useEffect
hook to trigger the Animated.loop
method. This method takes one parameter, an Animated.timing
method. The Animated.timing
method takes two parameters, an animated value and an object which contains the toValue
, duration
, easing
and useNativeDriver
of the animation. The toValue
specifies the value we want to animate to, the duration
specifies the duration of the animation, the easing
specifies the easing function to use, and the useNativeDriver
specifies whether to use the native animation driver.
Next, we use the interpolate
method to map the rotateAnim
value to an output range of 0deg
to 360deg
. Finally, we use the Animated.View
component to wrap the children and apply the animation to the transform
style.
Example 4: Animated Parallel
The fourth example is an animated parallel. This animation will run multiple animations in parallel. To create this animation, we will use the Animated.parallel
method.
import React, { useState, useEffect } from 'react';
import { Animated, Easing } from 'react-native';
const ParallelInView = (props) => {
const [fadeAnim] = useState(new Animated.Value(0)) // Initial value for opacity: 0
const [scaleAnim] = useState(new Animated.Value(0)) // Initial value for scale: 0
const [rotateAnim] = useState(new Animated.Value(0)) // Initial value for rotate: 0
React.useEffect(() => {
Animated.parallel([
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 10000,
}
),
Animated.spring(
scaleAnim,
{
toValue: 1,
friction: 3,
useNativeDriver: true
}
),
Animated.loop(
Animated.timing(
rotateAnim,
{
toValue: 1,
duration: 1000,
easing: Easing.linear,
useNativeDriver: true
}
)
)
]).start();
}, [])
const rotateInterpolate = rotateAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
const animatedStyle = {
opacity: fadeAnim,
transform: [{
scale: scaleAnim
}, {
rotate: rotateInterpolate
}]
}
return (
<Animated.View // Special animatable View
style={{
...props.style,
...animatedStyle
}}
>
{props.children}
</Animated.View>
);
}
In this code, we use the useState
hook to create the fadeAnim
, scaleAnim
and rotateAnim
values. These values will be used to animate the view. Next, we use the useEffect
hook to trigger the Animated.parallel
method. This method takes an array of animations as its parameter. In this case, we are using the Animated.timing
, Animated.spring
and Animated.loop
methods. We then use the interpolate
method to map the rotateAnim
value to an output range of 0deg
to 360deg
. Finally, we use the Animated.View
component to wrap the children and apply the animation to the opacity
and transform
styles.
Example 5: Animated Sequence
The fifth example is an animated sequence. This animation will run multiple animations in sequence. To create this animation, we will use the Animated.sequence
method.
import React, { useState, useEffect } from 'react';
import { Animated, Easing } from 'react-native';
const SequenceInView = (props) => {
const [fadeAnim] = useState(new Animated.Value(0)) // Initial value for opacity: 0
const [scaleAnim] = useState(new Animated.Value(0)) // Initial value for scale: 0
const [rotateAnim] = useState(new Animated.Value(0)) // Initial value for rotate: 0
React.useEffect(() => {
Animated.sequence([
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 10000,
}
),
Animated.spring(
scaleAnim,
{
toValue: 1,
friction: 3,
useNativeDriver: true
}
),
Animated.loop(
Animated.timing(
rotateAnim,
{
toValue: 1,
duration: 1000,
easing: Easing.linear,
useNativeDriver: true
}
)
)
]).start();
}, [])
const rotateInterpolate = rotateAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
const animatedStyle = {
opacity: fadeAnim,
transform: [{
scale: scaleAnim
}, {
rotate: rotateInterpolate
}]
}
return (
<Animated.View // Special animatable View
style={{
...props.style,
...animatedStyle
}}
>
{props.children}
</Animated.View>
);
}
In this code, we use the useState
hook to create the fadeAnim
, scaleAnim
and rotateAnim
values. These values will be used to animate the view. Next, we use the useEffect
hook to trigger the Animated.sequence
method. This method takes an array of animations as its parameter. In this case, we are using the Animated.timing
, Animated.spring
and Animated.loop
methods. We then use the interpolate
method to map the rotateAnim
value to an output range of 0deg
to 360deg
. Finally, we use the Animated.View
component to wrap the children and apply the animation to the opacity
and transform
styles.
Conclusion
In this tutorial, we have learned how to use Animated View in React Native to create 5 different animation examples. We have seen how to create an animated fade, scale, rotate, parallel and sequence. We have also seen how to use the Animated.timing
, Animated.spring
, Animated.loop
, Animated.parallel
and Animated.sequence
methods to create these animations.