What are animations in React Native?
Animations bring an app to life: transitions, springs, and gestures-driven motion. The Reanimated library runs animations on the native UI thread, so they stay smooth at 60fps even when the JavaScript thread is busy. It is the standard for serious mobile motion.
Why it matters
Smooth, purposeful animation is a large part of what makes an app feel premium rather than cheap. The catch is performance: animation driven from the JS thread stutters whenever JS is busy. Knowing how to run motion on the native thread is what separates polished apps from janky ones.
What to learn
- The Animated API versus Reanimated
- Why the native UI thread matters for smoothness
- Shared values and animated styles
- Springs, timings, and easing
- Layout animations
- Driving animation from gestures
- Keeping animation off the JS thread
Common pitfall
Animating with state updates and setState on every frame, which floods the JS
thread and drops frames. Animation should run on the native thread via
Reanimated's shared values and animated styles, not by re-rendering React on each
frame. State-driven per-frame animation is the classic cause of mobile jank.
Resources
Primary (free):
- Reanimated — Documentation · docs
- React Native — Animations · docs
- William Candillon — Can it be done in RN · video
Practice
Animate a card with Reanimated: a spring scale on press and a smooth entrance, using shared values and animated styles rather than state. Confirm it stays smooth while the JS thread does other work. Done when the animation runs on the native thread and does not stutter.
Outcomes
- Animate with Reanimated shared values and animated styles.
- Explain why native-thread animation stays smooth.
- Use springs, timings, and layout animations.
- Avoid state-driven per-frame animation.