🎞️ React Native Reanimated & Gestures (TypeScript)

আধুনিক React Native অ্যাপে smooth animation ও gesture-based interaction (swipe, drag, pinch, tap) খুবই গুরুত্বপূর্ণ। এই কাজগুলো efficient ভাবে করার জন্য আমরা ব্যবহার করি React Native Reanimated + Gesture Handler ।

🔍 Reanimated & Gesture Handler কী?

• Reanimated → UI Thread-এ animation চালায়
• Gesture Handler → Touch, Swipe, Pan, Pinch detect করে
• JS Thread block হয় না → App থাকে smooth
• High-performance animation সম্ভব

📁 File Based Folder Structure (TypeScript)

src/
 ├─ screens/
 │   └─ GestureBoxScreen.tsx
 ├─ components/
 │   └─ DraggableBox.tsx
 ├─ navigation/
 │   └─ AppNavigator.tsx
 └─ App.tsx
  

⚙️ Required Packages Install

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

⚠️ Reanimated install করার পর Babel config ও Android rebuild দরকার।

🧩 Draggable Box Component (TypeScript)

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

const DraggableBox = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const panGesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    });

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

  return (
    
      
    
  );
};

export default DraggableBox;

const styles = StyleSheet.create({
  box: {
    width: 120,
    height: 120,
    backgroundColor: 'teal',
    borderRadius: 12,
  },
});
  

📱 Screen Usage

import { View } from 'react-native';
import DraggableBox from '../components/DraggableBox';

const GestureBoxScreen = () => {
  return (
    
      
    
  );
};

export default GestureBoxScreen;
  

🎯 Output Explanation

💡 কেন Reanimated ব্যবহার করবেন?

• High FPS animation
• Gaming, swipe card, bottom sheet তৈরিতে অপরিহার্য
• Production-grade UI experience
• React Native performance dramatically improve করে