Animated

The Animated library allows you to animate specific values of targeted components.

Unlike LayoutAnimation these animations are executed on the JavaScript side and rely on requestAnimationFrame and setNativeProps. This can sometimes lead to stutter.

import { Animated } from 'react-native';

Creating an animation with the Animted API is generally a three step process and might seem familiar if you've ever used react-motion:

  • Create a new animated value

  • Trigger the animation/tween

  • Connect the animated value to a style property of a component

PreviousLayoutAnimationNextAnimated.Value

Last updated