Gesture Handler and Reanimated on the UI thread
off-JS-thread animation architecture.
Gesture Handler tracks gestures natively and Reanimated runs worklets on the UI thread, so animations driven by shared values continue smoothly even when the JS thread is blocked.
WHAT THIS TESTS This advanced question checks your grasp of React Native's threading model and why gesture and animation libraries deliberately bypass the JavaScript thread for frame-by-frame work.
A GOOD ANSWER COVERS React Native runs JavaScript on a separate thread from the native UI thread. If animations are computed in JS, any heavy JS work, like list rendering or network parsing, can starve the animation and cause dropped frames. react-native-gesture-handler recognizes gestures in the native layer using the platform gesture systems, so touch tracking does not rely on the JS-side responder loop and gesture state is available immediately and reliably. react-native-reanimated lets you write worklets, small functions that are compiled to run on the UI thread, operating on shared values that live in native memory and can be read and written from both threads. You drive animated styles from these shared values, and a gesture from Gesture Handler can update a shared value directly on the UI thread. Because the per-frame work, reading the gesture, updating shared values, and applying animated styles, all happens on the UI thread, the animation keeps running at the display refresh rate even when the JS thread is blocked, which is the key to smooth 60 FPS interactions.
COMMON WRONG ANSWERS Thinking the JS thread computes each frame. Equating this with the old Animated useNativeDriver, which only offloads a limited set of non-layout properties and lacks gesture-driven worklets. Believing shared values are ordinary React state.
LIKELY FOLLOW-UPS What is a worklet and how is it scheduled? How do shared values differ from useState? What are the limits of the Animated native driver?
ONE CONCRETE EXAMPLE A swipeable card uses a pan gesture from Gesture Handler whose onUpdate worklet writes the finger translation into a shared value. An animated style maps that shared value to translateX. While the user drags, the JS thread might be busy parsing a large response, yet the card tracks the finger smoothly because all motion runs on the UI thread via worklets and shared values.
Read the original → docs.swmansion.com
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.