react-native-reanimated & gesture-handler

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

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0",
    "react-native-reanimated": "~4.0.0",
    "react-native-gesture-handler": "~2.28.0"
  }
}

// babel.config.js - el plugin DEBE ser el último
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

// app/_layout.tsx - GestureHandlerRootView en la raíz
import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
 
export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

# Después de instalar o cambio de babel - limpiar caché de Metro
npx expo start --clear

// components/draggable-card.tsx
import { StyleSheet, Text } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
 
const SNAP_BACK = { damping: 18, stiffness: 220 };
 
export function DraggableCard({ title }: { title: string }) {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
 
  const pan = Gesture.Pan()
    .onUpdate((e) => {
      translateX.value = e.translationX;
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      translateX.value = withSpring(0, SNAP_BACK);
      translateY.value = withSpring(0, SNAP_BACK);
    });
 
  const style = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));
 
  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.card, style]}>
        <Text>{title}</Text>
      </Animated.View>
    </GestureDetector>
  );
}
 
const styles = StyleSheet.create({
  card: {
    padding: 20,
    borderRadius: 12,
    backgroundColor: "#f0fdf4",
    margin: 16,
  },
});

## Verificación de instalación de Reanimated + RNGH
 
- [ ] npx expo install react-native-reanimated react-native-gesture-handler
- [ ] package.json muestra ~4.0.0 y ~2.28.0 (vía expo install)
- [ ] babel.config.js - reanimated/plugin es el ÚLTIMO plugin
- [ ] GestureHandlerRootView envuelve el layout raíz
- [ ] npx expo start --clear después del cambio de babel
- [ ] eas build --profile development después del cambio de versión nativa
- [ ] Pan gesture probado en dispositivo físico (no solo simulador)
- [ ] npx expo-doctor pasa

// ✅ Componentes y estilos worklet
import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 
// ❌ No mezcles para UI impulsada por gestos
import { Animated } from "react-native";

import { ScrollView } from "react-native-gesture-handler";