animate-expo

Use a Reanimated shared value driven by a Gesture.Pan() handler, capturing the current position in onStart and projecting velocity in onEnd to decide dismissal. Hand the gesture velocity to a spring so the release continues seamlessly, and derive the backdrop opacity from the same shared value.

Use Reanimated for anything a finger touches or anything derived from scroll. Core Animated cannot be driven by gestures without crossing the bridge, and useNativeDriver only supports transform and opacity, while Reanimated worklets run on the UI thread even when JS is busy.

Stutter usually comes from calling setState in gesture or scroll handlers, animating layout properties like height or width, or scheduling back to the JS runtime every frame. Move values into shared values with useAnimatedStyle and restrict scheduleOnRN calls to onEnd or threshold reactions.

Use a spring whenever a finger was involved, because springs carry velocity through interruptions while timing curves restart. Everything else uses timing with ease-out for entering or exiting elements and ease-in-out for on-screen movement, staying under 300ms for UI animations.

Reanimated 4 requires the New Architecture, and in Expo projects babel-preset-expo configures the worklets plugin automatically. Expo Go is not a valid performance environment, so judge animation feel in a release build on the slowest supported device.

Use expo-haptics with one haptic per user action, fired at the causal moment such as a detent catching rather than when the animation finishes. From a worklet, schedule the call back to the RN runtime with scheduleOnRN, and always pair haptics with visual feedback.