Animation with Rive & Reanimated

Core concepts

1. Reanimated: Runs animations on the UI thread for smooth 60fps motion: shared values, animated styles, and layout animations like entering and exiting. — Reanimated docs
2. Rive: Design state-machine animations in the Rive editor and play them in your app through the Rive runtime, ideal for onboarding, loaders and mascots. — Rive
3. Keep motion purposeful: Animate to show change (item added, screen entered), not for decoration. Keep durations short and respect the reduced-motion setting. — Material motion
4. Performance budget: Animate transforms and opacity, avoid animating layout-heavy properties, and test on a mid-range Android phone. — React Native performance

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

• Reanimated tutorials — YouTube search: React Native Reanimated tutorial
• Rive in React Native — YouTube search: Rive React Native tutorial

Explanation

When to pick Rive

Pick Rive when a designer-made animation needs states and inputs, such as a character reacting to progress. Use Reanimated for ordinary UI motion.

Prompting for animation

Describe the trigger, duration and easing, and ask for the reduced-motion fallback. Vague 'make it smooth' prompts give inconsistent results.

What Is It?

Reanimated is a library for smooth native-thread animations; Rive is a tool and runtime for interactive vector animation.

Why Should I Care?

Polish raises perceived quality, and good defaults prevent janky animations that hurt reviews.

Real World Analogy

Reanimated is the stagehand moving props; Rive is a puppet built by a specialist you cue from the stage.

Visual Mental Model

gesture/state -> shared value -> animated style (UI thread)
designer file (.riv) -> Rive runtime -> state machine inputs

Smallest Possible Example

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

const opacity = useSharedValue(0);
const style = useAnimatedStyle(() => ({ opacity: opacity.value }));
// on mount: opacity.value = withTiming(1, { duration: 250 });

Common Mistakes

❌ Animating on the JS thread with setState loops.

Use shared values so the UI thread drives the motion.

❌ Ignoring reduced-motion settings.

Some users need minimal animation; provide a fallback.

Build This Mini Project

Fade and slide a card in on screen entry with Reanimated, then add a Rive loader to your splash or onboarding screen.

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Add entry animation

Add a 250ms fade-and-slide-up entering animation to the list items on [screen] using Reanimated layout animations. Respect reduced-motion, keep it on the UI thread, and do not change other behaviour.

Integrate a Rive file

Show how to add a .riv file from assets to the onboarding screen with the Rive React Native runtime, controlling a state-machine input from progress. Mention that it needs a development build and verify against the current docs.

Rules, databases & blogs to use

• AI style prompts database: visual direction prompts for mascots and illustrations
• Animated gradient generator: animation experiments we built

Resources

• Reanimated docs
• Rive