Animated Component
Also called Animated.View, Animated API
- Part of
- React Native Glossary
- Also known as
- Animated.View, Animated API
- Updated
What is Animated Component in React Native?
An animated component is a React Native view whose style values are driven by an animation library — Reanimated or the built-in Animated API — rather than by plain state.
An animated component is a view whose styles are driven frame by frame by an animation library instead of by ordinary re-renders. Animating through useState would re-render the tree on every frame, so React Native provides purpose-built wrappers.
There are two options, and newcomers should know which they are reading about:
- The built-in Animated API ships with React Native. You animate
Animated.Valueobjects and renderAnimated.View,Animated.Text, and friends. WithuseNativeDriver: truethe animation is handed to the native side so it keeps running when JavaScript is busy. - Reanimated is the community standard for anything non-trivial. It runs animation logic as worklets directly on the UI thread, so gestures and scroll-linked effects stay smooth.
The failure mode to recognise: an animation that stutters only in release-mode-with-work-happening usually means it is running on the JavaScript thread rather than natively.