Animated.View

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.

Exercise Return an Animated.View

Return an <Animated.View style={{ opacity: fade }} />. fade is already a defined Animated.Value.

Show example 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 }} />;
}

Test yourself

Animated.View tag

<____ style={{ opacity: fade }} />

Show answer

<Animated.View style={{ opacity: fade }} />

Which component accepts an animated value in its style?
- View
- Text
- Animated.View
- ScrollView
Show answer

Animated.View — Only Animated.View reads the animated value in the style.
Animated.View concepts

Animated.View

Animated component
opacity

Transparency
style

Style prop
fade

Animated value

Next lesson: Animated.timing

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies