animate-expo

Use a Reanimated shared value with a Gesture.Pan handler: capture the current position in onStart, apply rubber-banding past the top edge, and in onEnd project the release velocity to decide dismiss or snap-back. Hand the velocity to withSpring so the animation continues seamlessly from the finger.

Reanimated is required for anything a finger touches. Core Animated cannot be driven by a gesture without crossing the bridge, and useNativeDriver only supports transform and opacity. Reanimated worklets run on the UI thread and keep running while JS is busy.

Stutter usually comes from calling setState in a gesture or scroll handler, scheduling back to the RN runtime every frame, or animating layout properties like height and width. Move values into shared values with useAnimatedStyle and animate only transform and opacity.

Reanimated 4 requires the New Architecture and installs via npx expo install react-native-reanimated react-native-worklets. In Expo projects, babel-preset-expo configures the worklets plugin automatically; a missing plugin throws a worklet creation error at runtime.

Skip animation for actions happening 100+ times a day like tab switches, keyboard open/close, and scrolling — use platform defaults instead. Frequent interactions like press feedback should stay under 150ms, and tabs should never slide since they are peers, not a hierarchy.

Use expo-haptics: selectionAsync for value ticks, impactAsync for snaps and commits, and notificationAsync for success or failure. Fire the haptic in the same frame as the visual cause, limit to one per user action, and schedule it from worklets with scheduleOnRN.