React Native Gesture Handler: Swipe ve Drag Animasyonları

1npm install react-native-gesture-handler react-native-reanimated

1import React from 'react';
2import { View, StyleSheet } from 'react-native';
3import {
4GestureHandlerRootView,
5PanGestureHandler,
6} from 'react-native-gesture-handler';
7import Animated, {
8useSharedValue,
9useAnimatedStyle,
10withSpring,
11runOnJS,
12} from 'react-native-reanimated';
13
14const SwipeDragExample = () => {
15const translateX = useSharedValue(0);
16const translateY = useSharedValue(0);
17
18const onGestureEvent = (event) => {
19translateX.value = event.nativeEvent.translationX;
20translateY.value = event.nativeEvent.translationY;
21};
22
23const onGestureEnd = (event) => {
24// Swipe hızı 500'den fazlaysa snap et
25if (Math.abs(event.nativeEvent.velocityX) > 500) {
26translateX.value = withSpring(
27event.nativeEvent.velocityX > 0? 150: -150
28);
29} else {
30// Yavaş hareket ise orijinal yere dön
31translateX.value = withSpring(0);
32}
33translateY.value = withSpring(0);
34};
35
36const animatedStyle = useAnimatedStyle(() => ({
37transform: [
38{ translateX: translateX.value },
39{ translateY: translateY.value },
40],
41}));
42
43return (
44<GestureHandlerRootView style={styles.container}>
45<PanGestureHandler
46onGestureEvent={onGestureEvent}
47onEnded={onGestureEnd}
48>
49<Animated.View style={[styles.box, animatedStyle]} />
50</PanGestureHandler>
51</GestureHandlerRootView>
52);
53};
54
55const styles = StyleSheet.create({
56container: {
57flex: 1,
58justifyContent: 'center',
59alignItems: 'center',
60backgroundColor: '#f5f5f5',
61},
62box: {
63width: 80,
64height: 80,
65backgroundColor: '#007AFF',
66borderRadius: 10,
67},
68});
69
70export default SwipeDragExample;