# Fix Jumping Bottom Sheets in AI Reanimated Code

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-01, updated 2026-06-02. 5 min read.
> Source: https://vp0.com/blogs/smooth-reanimated-bottom-sheet-template

A jumpy bottom sheet usually means the gesture and the animation are not sharing state on the UI thread. Fix the handoff and it glides.

**TL;DR.** AI-generated Reanimated bottom sheets jump because the gesture and the spring animation are not coordinated on the UI thread: state updates cross to JS, the gesture does not seed the animation's starting value, or snapping fights the drag. Fix it by keeping the shared value on the UI thread, seeding the spring from the gesture's current position, and snapping to clear detents. Build the sheet from a free reference and tune the handoff. Smoothness is in the gesture-to-animation coordination.

AI-generated Reanimated bottom sheet jumping or stuttering? The short answer: the gesture and the spring animation are not sharing state smoothly on the UI thread, so there is a visible jump when the drag hands off to the snap. Fix the handoff, keep the value on the UI thread, seed the spring from the gesture, snap to clear detents, and it glides. Build the sheet from a free VP0 design, the free iOS design library for AI builders, and tune the coordination. The stakes are real: about 76% of developers [now use or plan to use AI tools](https://survey.stackoverflow.co/2024/ai) in their work.

## Who this is for

This is for React Native developers whose AI-generated Reanimated bottom sheet drags roughly, jumps on release, or stutters, and who want it to feel native-smooth.

## Why the sheet jumps

A smooth sheet is one continuous motion: the finger drags it, and on release a spring carries it to a snap point from exactly where the finger left off. Jumps happen when that continuity breaks. If the shared value updates cross to the JS thread, frames drop. If the release animation does not start from the gesture's current position, the sheet teleports before springing. And if snapping sets the position directly instead of animating from the current value and velocity, it resets visibly. The [React Native Reanimated docs](https://docs.swmansion.com/react-native-reanimated/) and [Gesture Handler docs](https://docs.swmansion.com/react-native-gesture-handler/) cover the UI-thread model.

| Cause | Symptom | Fix |
|---|---|---|
| Value crosses to JS | Stutter, dropped frames | Keep it on the UI thread |
| Spring not seeded | Jump on release | Start from gesture position |
| Snap sets position | Teleport to detent | Animate with velocity |
| Gesture and anim separate | Fighting motion | Share one shared value |
| No clear detents | Ambiguous resting points | Define snap points |

## Build the sheet free with a VP0 design

Build the sheet UI from a reference, then wire the gesture and animation correctly. Pick a sheet screen in VP0, copy its link, and prompt your AI builder:

> Build a React Native bottom sheet from this design: [paste VP0 link] using Reanimated and Gesture Handler. Drive the sheet height with a shared value updated on the UI thread by the pan gesture, and on release animate to the nearest snap point with a spring seeded from the current position and gesture velocity. Match the palette and spacing from the reference, and generate clean code.

For neighboring sheet and animation fixes, see [a draggable bottom sheet over a map in SwiftUI](/blogs/draggable-bottom-sheet-map-modal/), [fixing Reanimated Tinder swipe card memory leaks](/blogs/tinder-swipe-memory-leak-react-native-fix/), [how to fix AI React Native shadow hallucinations](/blogs/fix-ai-react-native-shadow-hallucinations/), and [how to make an AI app look native on iOS](/blogs/make-ai-app-look-native-ios/).

## Coordinate the gesture and the spring

The whole fix is continuity on the UI thread. Keep the sheet's position in a shared value that the pan gesture updates directly on the UI thread, so dragging is frame-perfect. When the gesture ends, animate that same value to the nearest detent with a spring, passing the gesture's velocity so the motion flows from the drag into the snap with no jump. Define clear snap points (peek, medium, full) so resting positions are unambiguous. AI builders often miss the seeding and the UI-thread placement, so prompt for them explicitly and verify. Get the handoff right and the sheet feels exactly like a native one.

## Common mistakes

The first mistake is updating the position on the JS thread, causing stutter. The second is a release animation that does not start from the gesture's value, causing a jump. The third is snapping by setting position instead of animating with velocity. The fourth is no defined detents. The fifth is paying for a sheet library when a free VP0 design plus correct Reanimated does it.

## Key takeaways

- A jumpy Reanimated sheet means the gesture and spring are not coordinated on the UI thread.
- Keep the position in a shared value updated on the UI thread by the gesture.
- Seed the release spring from the gesture's current position and velocity.
- Snap to clear, defined detents instead of setting position directly.
- Build the sheet UI from a free VP0 reference and tune the handoff.

## Sources

- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/): UI-thread animations in React Native.
- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/): native-driven touch gestures.
- [React Native performance guide](https://reactnative.dev/docs/performance): the official guidance on profiling and memory.

## Frequently asked questions

Why is my Reanimated bottom sheet jumping or stuttering? The gesture and animation are not coordinated on the UI thread, the value crosses to JS, the spring is not seeded, or snapping fights the drag. Coordinate them on the UI thread.

How do I make a Reanimated bottom sheet smooth? Drive position with a UI-thread shared value updated by the gesture, animate to snap points with a spring seeded from the current position, using Gesture Handler.

Why does AI-generated Reanimated code jump? It often writes the gesture and animation without UI-thread coordination or seeding, so the drag-to-spring handoff jumps. Fix the coordination.

What is the right way to snap a bottom sheet? Animate the shared value to the nearest detent with a spring on gesture end, using velocity, so the motion continues smoothly rather than resetting.

## Frequently asked questions

### Why is my Reanimated bottom sheet jumping or stuttering?

Usually the gesture and the animation are not coordinated on the UI thread: the shared value crosses to JS, the spring does not start from the gesture's current position, or snapping fights the drag. Keep the value on the UI thread, seed the spring from where the gesture is, and snap to clear detents.

### How do I make a Reanimated bottom sheet smooth?

Drive the sheet position with a shared value updated on the UI thread by the gesture, animate to snap points with a spring seeded from the current position, and use the Gesture Handler so the drag and animation share state. Build the sheet UI from a free VP0 reference and tune the handoff.

### Why does AI-generated Reanimated code jump?

AI builders often write the gesture and animation as if they were on the JS thread or without seeding the animation from the gesture's value, so there is a visible jump when the drag hands off to the spring. Coordinating them on the UI thread fixes it.

### What is the right way to snap a bottom sheet?

Animate the shared value to the nearest detent with a spring when the gesture ends, using the gesture velocity, rather than setting position directly. Snapping should continue the motion smoothly, not reset it.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*