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 - o plugin DEVE ser o último
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

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

# Após a instalação ou alteração do babel - limpe o cache do 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,
  },
});

## Verificação de instalação Reanimated + RNGH
 
- [ ] npx expo install react-native-reanimated react-native-gesture-handler
- [ ] package.json mostra ~4.0.0 e ~2.28.0 (via expo install)
- [ ] babel.config.js - reanimated/plugin é o ÚLTIMO plugin
- [ ] GestureHandlerRootView envolve o layout raiz
- [ ] npx expo start --clear após alteração do babel
- [ ] eas build --profile development após atualização da versão nativa
- [ ] Gesto Pan testado em dispositivo físico (não apenas simulador)
- [ ] npx expo-doctor passa

// ✅ Componentes e estilos Worklet
import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 
// ❌ Não misture para UI controlada por gestos
import { Animated } from "react-native";

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