Building Animations in Expo

Building Animations in Expo constructs mobile motion around React Native's runtime boundaries and the user's finger. It follows an ordered process: decide whether an interaction should animate, name the purpose, select the smallest suitable tool, then implement properties, timing, interruption behavior, and accessible fallbacks. Reanimated worklets keep continuous motion on the UI runtime while React rendering and application logic stay on the React Native runtime.

The frequency gate keeps very frequent actions instant or on platform defaults. Tab switches never slide because tabs are peers rather than a navigation hierarchy. Frequent press feedback stays subtle and below 150ms; occasional sheets or modals can use standard motion; rare success or celebration states have more room for delight. Every animation must serve feedback, spatial consistency, state indication, continuity, explanation, or appropriately rare delight.

Use it for an Expo or React Native animation that needs deliberate press behavior, gesture interruption, velocity handoff, or keyboard coordination. It rejects copying web hover behavior onto touch screens. It also avoids rebuilding native screen transitions, tab bars, menus, and sheets in JavaScript when the platform already supplies the interaction.

A simulator or Expo Go session does not establish acceptable performance. The workflow requires judging feel in a release build on the slowest supported device. Its suggested values remain starting points, subordinate to project conventions, installed APIs, keyboard alternatives, and accessibility requirements.

Inputs include the requested mobile interaction, its frequency, project SDK and architecture, and supported devices. The deliverable is implementation code with a short explanation of the gate decision, motion ingredients, execution thread, and remaining device checks. Suggested checks include flicking, reversing, and interrupting gestures, plus testing velocity handoff and haptic timing.

State-driven changes use Reanimated CSS transitions; loops or mount sequences use CSS animations; mounting, unmounting, and list reflow use layout animation APIs. Continuous or interruptible gestures use useSharedValue, Gesture, and useAnimatedStyle. Finger-driven motion uses springs so velocity survives interruption, while other changes use timing curves. Presses receive feedback on press-in and commit on press-out, with scale near 0.97 and 100-150ms timing.

The property rules favor transform and opacity and avoid repeated Yoga layout. An absolutely positioned element without children is an explicit exception for width animation. Translate precedes scale in transform arrays unless multiplication is intentional. Static shadow or BlurView layers are crossfaded instead of animating elevation or blur intensity.

Runtime checks prohibit per-frame setState or scheduleOnRN calls, and prohibit shared-value reads or writes during render. Shared values use .get() and .set() in worklets, handlers, or effects; functions called from worklets carry the worklet directive. The scheduleOnRN function belongs at gesture completion or threshold crossings, including haptic calls.

Touch targets are at least 44pt on iOS or 48dp on Android, with hitSlop and pressRetentionOffset where appropriate. Haptics align with the causal visual event, fire once per action, and never supply the only feedback. Reduced motion removes translation, scale, parallax, and overshoot while retaining useful color or opacity changes. Text scaling requires measured layout or transforms rather than fixed animated heights. Dismissal considers velocity or distance and uses resistance instead of abrupt boundary stops.

Install the Expo dependencies with:

npx expo install react-native-reanimated react-native-worklets

Reanimated 4 requires the New Architecture. The babel-preset-expo preset configures the worklets plugin for Expo; bare React Native projects without that preset configure it last manually. GestureHandlerRootView wraps the application.

Expo Router supplies native stack transitions, formSheet, NativeTabs, iOS Link.Menu and Link.Preview, and native large-title headers. RefreshControl handles refresh; react-native-keyboard-controller requires KeyboardProvider; expo-haptics supplies tactile feedback. Lottie is reserved for illustrations, while Skia addresses large scenes or drawing. ProMotion verification includes CADisableMinimumFrameDurationOnPhone and an approximately 8ms frame budget at 120fps. Companion recipes cover common interactions, including virtualized-list-safe entrances.