Reanimated & Gestures in React Native — বিস্তারিত ব্যাখ্যা

React Native Reanimated এবং React Native Gesture Handler মোবাইল অ্যাপের স্মুথ অ্যানিমেশন, জেসচার এবং ন্যাচারাল ফ্লুইড ইন্টারঅ্যাকশন তৈরি করতে ব্যবহার করা হয়। Native Thread-এ কাজ করার কারণে UI অনেক বেশি দ্রুত ও ল্যাগ-ফ্রি থাকে।

🔹 Reanimated কী?

React Native Reanimated 2 হচ্ছে একটি অ্যাডভান্সড অ্যানিমেশন লাইব্রেরি, যেটি UI Thread-এ কোড রান করায়। ফলে এর অ্যানিমেশন অত্যন্ত স্মুথ, স্ক্রল/জেসচার-ফ্রেন্ডলি এবং পারফরমেন্স-কেন্দ্রিক।

Native-Level পারফরমেন্স
Declarative + Worklet Based Animation
Gesture-Based Interaction Support
Shared Values + Derived Values Support

🔹 Install & Setup

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

babel.config.js এ যোগ করতে হবে:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

🔹 Shared Value ও Animated Style

Shared Value হলো এমন একটি ভ্যালু যা Worklet এর মধ্যে Native Thread-এ চলতে পারে।

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function Box() {
  const boxScale = useSharedValue(1);

  const style = useAnimatedStyle(() => ({
    transform: [{ scale: boxScale.value }],
  }));

  return (
    <Animated.View
      style={[{ width: 100, height: 100, backgroundColor: 'teal' }, style]}
      onTouchStart={() => {
        boxScale.value = withTiming(1.3, { duration: 200 });
      }}
      onTouchEnd={() => {
        boxScale.value = withTiming(1, { duration: 200 });
      }}
    />
  );
}

👉 এতে Box টাচ করলে Scale বড় হয় এবং ছাড়লে আবার ছোট হয়।

🔹 Gesture Handler — মোবাইল জেসচার Control

Gesture Handler ব্যবহার করে আপনি Drag, Tap, Pan, LongPress, Pinch ইত্যাদি জেসচার সহজেই পরিচালনা করতে পারবেন।

📌 Example: Drag Gesture + Reanimated

import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedGestureHandler, useAnimatedStyle } from 'react-native-reanimated';

export default function DragBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const gesture = useAnimatedGestureHandler({
    onActive: (event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    },
    onEnd: () => {
      translateX.value = withTiming(0);
      translateY.value = withTiming(0);
    }
  });

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

  return (
    <PanGestureHandler onGestureEvent={gesture}>
      <Animated.View 
        style={[
          { width: 100, height: 100, backgroundColor: 'teal', borderRadius: 10 }, 
          animatedStyle
        ]} 
      />
    </PanGestureHandler>
  );
}

👉 Box টি স্ক্রিনে টেনে আনা যায় এবং ছাড়লে নিজ অবস্থায় ফিরে যায়।

🔹 New Gesture API (v2)

Reanimated 2.3+ এ আরও সহজ Gesture API এসেছে:

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

const gesture = Gesture.Pan()
  .onStart(() => {})
  .onUpdate((e) => {})
  .onEnd(() => {});

এটি ড্র্যাগ, পিঞ্চ, ট্যাপ সবকিছু একত্রে আরও সহজ করেছে।

🔹 কোথায় Reanimated & Gestures ব্যবহার হবে?

Bottom Sheet Animation
Swipeable Cards (Tinder Style)
Custom Drawer Navigation
Carousel & Slider
Pull-to-Refresh Animation
Drag & Drop List
Interactive Charts

✔ উপসংহার

Reanimated + Gesture Handler React Native-এ প্রফেশনাল, ফ্লুইড এবং নেটিভ-লেভেল অ্যানিমেশন তৈরি করতে সবচেয়ে শক্তিশালী কম্বিনেশন। আপনার অ্যাপের UI/UX কে আরও উন্নত করতে এই দুই লাইব্রেরি খুব গুরুত্বপূর্ণ ভূমিকা রাখে।

Reanimated & Gestures