import { Pressable, Text, StyleSheet } from 'react-native';

function MyButton({ onPress, label }: { onPress: () => void; label: string }) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        pressed && styles.buttonPressed,
      ]}
    >
      {({ pressed }) => (
        <Text style={[styles.label, pressed && styles.labelPressed]}>
          {label}
        </Text>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#3B82F6',
    paddingHorizontal: 24,
    paddingVertical: 14,
    borderRadius: 12,
  },
  buttonPressed: {
    backgroundColor: '#1D4ED8',
    transform: [{ scale: 0.97 }],
  },
  label: { color: 'white', fontWeight: '700', fontSize: 16 },
  labelPressed: { opacity: 0.85 },
});

npx expo install react-native-gesture-handler

// app/_layout.tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* решта вашого layout */}
    </GestureHandlerRootView>
  );
}

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { View } from 'react-native';

const tapGesture = Gesture.Tap()
  .onEnd(() => {
    console.log('Тап!');
  });

function MyComponent() {
  return (
    <GestureDetector gesture={tapGesture}>
      <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
    </GestureDetector>
  );
}

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { View, Text, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function TapExample() {
  const [taps, setTaps] = useState(0);

  const singleTap = Gesture.Tap()
    .runOnJS(true)              // колбек виконується в JS потоці
    .onEnd(() => setTaps((n) => n + 1));

  const doubleTap = Gesture.Tap()
    .numberOfTaps(2)
    .runOnJS(true)
    .onEnd(() => setTaps(0));   // подвійний тап — скидає лічильник

  // Комбінація: спочатку перевіряємо подвійний тап
  const combined = Gesture.Exclusive(doubleTap, singleTap);

  return (
    <GestureDetector gesture={combined}>
      <View style={styles.box}>
        <Text style={styles.text}>{taps}</Text>
        <Text style={styles.hint}>Тап +1 · Подвійний тап 0</Text>
      </View>
    </GestureDetector>
  );
}

import { useRef } from 'react';
import { Animated, View, StyleSheet } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';

export function DraggableBox() {
  const offsetX = useRef(new Animated.Value(0)).current;
  const offsetY = useRef(new Animated.Value(0)).current;

  // Зберігаємо позицію між жестами
  const startX = useRef(0);
  const startY = useRef(0);

  const pan = Gesture.Pan()
    .runOnJS(true)
    .onBegin(() => {
      // Запам'ятовуємо поточну позицію
      startX.current = (offsetX as any)._value;
      startY.current = (offsetY as any)._value;
    })
    .onChange((event) => {
      offsetX.setValue(startX.current + event.translationX);
      offsetY.setValue(startY.current + event.translationY);
    });

  return (
    <GestureDetector gesture={pan}>
      <Animated.View
        style={[
          styles.box,
          { transform: [{ translateX: offsetX }, { translateY: offsetY }] },
        ]}
      />
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  box: { width: 80, height: 80, borderRadius: 16, backgroundColor: '#3B82F6' },
});

import { ScrollView } from 'react-native-gesture-handler'; // <- RNGH ScrollView!
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { useRef } from 'react';

function SwipeableList() {
  const scrollRef = useRef(null);

  const swipeGesture = Gesture.Pan()
    .activeOffsetX([-10, 10])   // активується лише при горизонтальному русі
    .failOffsetY([-5, 5]);       // провалюється при вертикальному

  return (
    // Важливо: ScrollView з react-native-gesture-handler
    <ScrollView ref={scrollRef}>
      {items.map((item) => (
        <GestureDetector key={item.id} gesture={swipeGesture}>
          <SwipeableRow item={item} />
        </GestureDetector>
      ))}
    </ScrollView>
  );
}

npx expo install expo-haptics

import * as Haptics from 'expo-haptics';
import { Pressable, Text, StyleSheet } from 'react-native';

interface HapticButtonProps {
  onPress: () => void;
  label: string;
  variant?: 'default' | 'danger';
}

export function HapticButton({ onPress, label, variant = 'default' }: HapticButtonProps) {
  const handlePressIn = async () => {
    // Миттєвий тактильний відгук ще до відпускання кнопки
    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  };

  const handlePress = async () => {
    if (variant === 'danger') {
      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
    }
    onPress();
  };

  return (
    <Pressable
      onPressIn={handlePressIn}
      onPress={handlePress}
      style={({ pressed }) => [
        styles.button,
        variant === 'danger' && styles.dangerButton,
        pressed && styles.pressed,
      ]}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}

// components/SwipeableRow.tsx
import { useRef, useCallback } from 'react';
import { Animated, View, Text, Pressable, StyleSheet, Dimensions } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import * as Haptics from 'expo-haptics';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const DELETE_THRESHOLD = SCREEN_WIDTH * 0.7;
const ACTION_WIDTH = 80;

interface Props {
  item: { id: string; title: string };
  onDelete: (id: string) => void;
}

export function SwipeableRow({ item, onDelete }: Props) {
  const translateX = useRef(new Animated.Value(0)).current;
  const startX = useRef(0);
  const isThresholdReached = useRef(false);

  const pan = Gesture.Pan()
    .runOnJS(true)
    .activeOffsetX([-5, 5])       // горизонтальний жест
    .failOffsetY([-10, 10])       // провалюється при вертикалі
    .onBegin(() => {
      startX.current = (translateX as any)._value;
    })
    .onChange((event) => {
      const newX = Math.min(0, startX.current + event.translationX);
      translateX.setValue(newX);

      // Haptic при перетині порогу
      const threshold = -DELETE_THRESHOLD;
      if (newX < threshold && !isThresholdReached.current) {
        isThresholdReached.current = true;
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
      } else if (newX > threshold && isThresholdReached.current) {
        isThresholdReached.current = false;
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      }
    })
    .onEnd((event) => {
      const currentX = (translateX as any)._value;

      if (currentX < -DELETE_THRESHOLD) {
        // Видалення: анімуємо за межі екрана
        Animated.timing(translateX, {
          toValue: -SCREEN_WIDTH,
          duration: 200,
          useNativeDriver: true,
        }).start(() => {
          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
          onDelete(item.id);
        });
      } else if (currentX < -ACTION_WIDTH / 2) {
        // Зупиняємось на ACTION_WIDTH (показуємо кнопку Delete)
        Animated.spring(translateX, {
          toValue: -ACTION_WIDTH,
          useNativeDriver: true,
        }).start();
      } else {
        // Повертаємось
        Animated.spring(translateX, {
          toValue: 0,
          useNativeDriver: true,
        }).start();
      }
      isThresholdReached.current = false;
    });

  const deleteStyle = {
    transform: [{ translateX }],
  };

  // Прогрес для забарвлення фону
  const bgColor = translateX.interpolate({
    inputRange: [-DELETE_THRESHOLD, -ACTION_WIDTH, 0],
    outputRange: ['#EF4444', '#EF4444', '#F87171'],
    extrapolate: 'clamp',
  });

  return (
    <View style={styles.container}>
      {/* Фоновий шар */}
      <Animated.View style={[styles.background, { backgroundColor: bgColor }]}>
        <Text style={styles.deleteLabel}>🗑</Text>
      </Animated.View>

      {/* Foreground */}
      <GestureDetector gesture={pan}>
        <Animated.View style={[styles.row, deleteStyle]}>
          <Text style={styles.title}>{item.title}</Text>
        </Animated.View>
      </GestureDetector>
    </View>
  );
}

// components/UndoSnackbar.tsx
import { useEffect, useRef } from 'react';
import { Animated, Pressable, Text, StyleSheet } from 'react-native';

interface Props {
  message: string;
  onUndo: () => void;
  onDismiss: () => void;
  duration?: number;
}

export function UndoSnackbar({ message, onUndo, onDismiss, duration = 3000 }: Props) {
  const opacity = useRef(new Animated.Value(0)).current;
  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  useEffect(() => {
    // Анімація появи
    Animated.timing(opacity, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();

    // Автозакриття
    timerRef.current = setTimeout(() => {
      dismiss();
    }, duration);

    return () => clearTimeout(timerRef.current);
  }, []);

  const dismiss = () => {
    Animated.timing(opacity, {
      toValue: 0,
      duration: 150,
      useNativeDriver: true,
    }).start(onDismiss);
  };

  const handleUndo = () => {
    clearTimeout(timerRef.current);
    dismiss();
    onUndo();
  };

  return (
    <Animated.View style={[styles.container, { opacity }]}>
      <Text style={styles.message}>{message}</Text>
      <Pressable onPress={handleUndo} style={styles.undoBtn}>
        <Text style={styles.undoText}>Скасувати</Text>
      </Pressable>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 24,
    left: 16,
    right: 16,
    backgroundColor: '#1E293B',
    borderRadius: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  message: { color: 'white', fontSize: 14 },
  undoBtn: { marginLeft: 16 },
  undoText: { color: '#60A5FA', fontWeight: '700', fontSize: 14 },
});

const longPress = Gesture.LongPress()
  .minDuration(500)    // мс до спрацювання (дефолт: 500)
  .maxDistance(10)     // максимальне переміщення пальця при утриманні (пікселі)
  .runOnJS(true)
  .onStart((event) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
    setShowContextMenu(true);
    setMenuPosition({ x: event.absoluteX, y: event.absoluteY });
  });

import { ActionSheetIOS, Platform } from 'react-native';

const showContextMenu = () => {
  if (Platform.OS === 'ios') {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Скасувати', 'Редагувати', 'Поділитись', 'Видалити'],
        cancelButtonIndex: 0,
        destructiveButtonIndex: 3,
        title: 'Що зробити з елементом?',
      },
      (buttonIndex) => {
        if (buttonIndex === 1) handleEdit();
        if (buttonIndex === 2) handleShare();
        if (buttonIndex === 3) handleDelete();
      }
    );
  } else {
    // На Android показуємо власний Modal
    setShowModal(true);
  }
};

import { useRef } from 'react';
import { Animated, Image, StyleSheet, View } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';

export function InteractiveImage({ source }: { source: any }) {
  const scale = useRef(new Animated.Value(1)).current;
  const rotation = useRef(new Animated.Value(0)).current;

  const savedScale = useRef(1);
  const savedRotation = useRef(0);

  const pinch = Gesture.Pinch()
    .runOnJS(true)
    .onUpdate((event) => {
      scale.setValue(savedScale.current * event.scale);
    })
    .onEnd((event) => {
      savedScale.current = savedScale.current * event.scale;
    });

  const rotate = Gesture.Rotation()
    .runOnJS(true)
    .onUpdate((event) => {
      rotation.setValue(savedRotation.current + event.rotation);
    })
    .onEnd((event) => {
      savedRotation.current = savedRotation.current + event.rotation;
    });

  // Одночасне масштабування і обертання
  const composed = Gesture.Simultaneous(pinch, rotate);

  // Конвертуємо радіани у градуси для CSS rotate
  const rotateStr = rotation.interpolate({
    inputRange: [-Math.PI * 2, Math.PI * 2],
    outputRange: ['-360deg', '360deg'],
  });

  return (
    <GestureDetector gesture={composed}>
      <Animated.Image
        source={source}
        style={[
          styles.image,
          {
            transform: [
              { scale },
              { rotate: rotateStr },
            ],
          },
        ]}
      />
    </GestureDetector>
  );
}

const styles = StyleSheet.create({
  image: { width: 200, height: 200, borderRadius: 16 },
});

// hooks/useUndoDelete.ts
import { useState, useRef, useCallback } from 'react';
import * as Haptics from 'expo-haptics';

interface UndoState<T> {
  deletedItem: T | null;
  deletedIndex: number;
}

export function useUndoDelete<T extends { id: string }>(
  items: T[],
  setItems: React.Dispatch<React.SetStateAction<T[]>>
) {
  const [undoState, setUndoState] = useState<UndoState<T>>({
    deletedItem: null,
    deletedIndex: -1,
  });
  const timerRef = useRef<ReturnType<typeof setTimeout>>();

  const deleteItem = useCallback((id: string) => {
    const index = items.findIndex((i) => i.id === id);
    const item = items[index];
    if (!item) return;

    // Видаляємо зі списку
    setItems((prev) => prev.filter((i) => i.id !== id));
    setUndoState({ deletedItem: item, deletedIndex: index });

    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

    // Таймер кінцевого видалення (тут можна викликати API)
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      setUndoState({ deletedItem: null, deletedIndex: -1 });
      // TODO: api.deleteItem(id)
    }, 3000);
  }, [items, setItems]);

  const undoDelete = useCallback(() => {
    clearTimeout(timerRef.current);
    if (!undoState.deletedItem) return;

    // Повертаємо елемент на місце
    setItems((prev) => {
      const newItems = [...prev];
      newItems.splice(undoState.deletedIndex, 0, undoState.deletedItem!);
      return newItems;
    });
    setUndoState({ deletedItem: null, deletedIndex: -1 });
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  }, [undoState, setItems]);

  const dismissUndo = useCallback(() => {
    setUndoState({ deletedItem: null, deletedIndex: -1 });
  }, []);

  return {
    deleteItem,
    undoDelete,
    dismissUndo,
    showUndo: undoState.deletedItem !== null,
  };
}

// app/(tabs)/list.tsx
import { useState } from 'react';
import { FlatList, View, StyleSheet, SafeAreaView } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import { SwipeableRow } from '@/components/list/SwipeableRow';
import { UndoSnackbar } from '@/components/list/UndoSnackbar';
import { useUndoDelete } from '@/hooks/useUndoDelete';

const INITIAL_ITEMS = Array.from({ length: 10 }, (_, i) => ({
  id: String(i + 1),
  title: `Завдання #${i + 1}`,
  subtitle: `Опис завдання номер ${i + 1}`,
}));

export default function ListScreen() {
  const [items, setItems] = useState(INITIAL_ITEMS);
  const { deleteItem, undoDelete, dismissUndo, showUndo } = useUndoDelete(items, setItems);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={styles.container}>
        <FlatList
          data={items}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <SwipeableRow
              item={item}
              onDelete={() => deleteItem(item.id)}
            />
          )}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          contentContainerStyle={styles.list}
        />

        {showUndo && (
          <UndoSnackbar
            message="Елемент видалено"
            onUndo={undoDelete}
            onDismiss={dismissUndo}
            duration={3000}
          />
        )}
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#F8FAFC' },
  list: { padding: 16, gap: 2 },
  separator: { height: 1, backgroundColor: '#E2E8F0' },
});