Animations & Gestures (Reanimated + Gesture Handler)

Why apps need motion

The difference between a rough app and a polished one is often motion: a card that slides in, a button that springs when tapped, a sheet you can drag up. Smooth motion means 60fps — the screen updates 60 times a second so nothing stutters. Two libraries deliver this in React Native, and modern courses dedicate whole projects to them: Reanimated (for animations) and Gesture Handler (for swipe, drag and pinch).

There is a built-in Animated API too, but it can stutter because it runs animation logic on the same JavaScript thread that handles your app’s work (a "thread" is just a lane the phone runs code in). If that lane is busy, the animation hiccups. Reanimated runs the animation on the separate UI thread instead — the lane that draws the screen — so it stays smooth even when JavaScript is busy. That is why it is the modern default.

Install both (one-time):

npx expo install react-native-reanimated react-native-gesture-handler

A shared value — the heart of Reanimated

Reanimated’s key idea is a shared value: a special number that can be read and changed on the UI thread, so animating it never touches the slow JavaScript lane. You create one with useSharedValue, then connect it to a component’s style with useAnimatedStyle. Here a box fades and grows when you tap:

import Animated, {
  useSharedValue, useAnimatedStyle, withTiming,
} from 'react-native-reanimated';
import { Button, View } from 'react-native';

export default function App() {
  const scale = useSharedValue(1);                 // a UI-thread number

  const boxStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],           // style follows the value
  }));

  return (
    <View>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'tomato' }, boxStyle]} />
      <Button title="Grow" onPress={() => { scale.value = withTiming(2); }} />
    </View>
  );
}

The moving parts, in plain terms:

• useSharedValue(1) creates an animatable number starting at 1; you read and write it as scale.value.
• useAnimatedStyle(() => ...) builds a style that re-computes whenever the shared value changes — here the box’s scale.
• Animated.View is the special version of View that can use an animated style.
• withTiming(2) is an animation helper: it eases the value to 2 smoothly instead of snapping. withSpring gives a bouncy feel.

Handling a drag gesture

Gesture Handler lets you respond to touch beyond a simple tap: drag (pan), swipe, pinch, long-press. You wrap your whole app once in a GestureHandlerRootView, define a gesture with the Gesture builder, and attach it with GestureDetector. Here a box follows your finger as you drag it:

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

function DraggableBox() {
  const x = useSharedValue(0);
  const y = useSharedValue(0);

  const drag = Gesture.Pan().onChange((e) => {
    x.value += e.changeX;     // move by how far the finger moved
    y.value += e.changeY;
  });

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }, { translateY: y.value }],
  }));

  return (
    <GestureDetector gesture={drag}>
      <Animated.View style={[{ width: 80, height: 80, backgroundColor: 'royalblue' }, style]} />
    </GestureDetector>
  );
}

How a gesture-driven animation fits together, step by step

Here is the full path from finger to pixels for the draggable box, in order:

1. You wrap the app once in <GestureHandlerRootView style={{ flex: 1 }}> so gestures work anywhere inside it.
2. You create shared values x and y for the box’s position — UI-thread numbers, so updating them never stutters.
3. You build a gesture with Gesture.Pan() and describe what to do on each move in onChange.
4. You attach it by wrapping the box in <GestureDetector gesture={drag}>.
5. As the user drags, onChange runs on the UI thread and adds the finger’s movement to x and y.
6. Because useAnimatedStyle watches those shared values, the box’s translateX/translateY update instantly — so it tracks the finger at 60fps without involving the slow JavaScript lane.