Animated.View
- React Native course
- Intermediate
- Lesson 71/116
- 5 min
Learn animated components with Animated.View.
Animated.View
Animated.View is a special component whose style can be bound to an Animated.Value. It replaces the ordinary View; it animates properties like opacity and transform.
As the value changes, Animated.View updates locally; React does not re-render. That is why the animation is smooth. It is used as <Animated.View style={{ opacity: fade }} />.
Animated value in style
To use an Animated.Value in a style, we pass it to the style prop of Animated.View: style={{ opacity: fade }}. Here fade is an Animated.Value.
The ordinary View does not accept this; only Animated.View reads animated values in the style. As the value changes, the look updates locally; there is no React re-render.
Practice Return an Animated.View
Return an <Animated.View style={{ opacity: fade }} />. fade is already a defined Animated.Value.
Starter code
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
// Return an Animated.View
return null;
}Sample solution
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Fade() {
const fade = useRef(new Animated.Value(0)).current;
return <Animated.View style={{ opacity: fade }} />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Animated.View tag
<____ style={{ opacity: fade }} /><Animated.View style={{ opacity: fade }} />Explanation: Animated.View reads the animated value in the style.
2 Which component accepts an animated value in its style?
- View
- Text
- Animated.View Correct answer
- ScrollView
Explanation: Only Animated.View reads the animated value in the style.
3 Animated.View concepts
| Term | Meaning |
|---|---|
Animated.View |
Animated component |
opacity |
Transparency |
style |
Style prop |
fade |
Animated value |