🧭 React Native React Navigation Hooks পরিচিতি (TypeScript)

React Native অ্যাপে এক স্ক্রিন থেকে অন্য স্ক্রিনে যাওয়ার জন্য আমরা React Navigation ব্যবহার করি। আর এই Navigation সহজ ও শক্তিশালী করার জন্য React Navigation আমাদের কিছু Hooks দেয়।

এই অধ্যায়ে আমরা File-based structure অনুসরণ করে React Navigation Hooks কী, কেন দরকার, কিভাবে কাজ করে এবং তার Output কী হয়—সবকিছু বিস্তারিত দেখবো।

📌 React Navigation Hooks কী?

React Navigation Hooks হচ্ছে কিছু বিশেষ function, যেগুলো ব্যবহার করে আমরা:

• Screen navigate করতে পারি
• Route params access করতে পারি
• Navigation state জানতে পারি
• Screen focus/unfocus detect করতে পারি

🔗 Common React Navigation Hooks

• useNavigation
• useRoute
• useFocusEffect
• useIsFocused

📂 File-based Folder Structure (TypeScript)

src/
 ├─ navigation/
 │   └─ AppNavigator.tsx
 ├─ screens/
 │   ├─ HomeScreen.tsx
 │   └─ ProfileScreen.tsx
 └─ App.tsx
  

🧩 useNavigation Hook

useNavigation ব্যবহার করে আমরা যেকোনো component থেকে screen navigate করতে পারি।

📄 HomeScreen.tsx

import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { username: string };
};

export default function HomeScreen() {
  const navigation = useNavigation>();

  return (
    
      Home Screen
       navigation.navigate('Profile', { username: 'Prabir' })}
      />
    
  );
}
  

🧩 useRoute Hook

useRoute hook দিয়ে আমরা আগের screen থেকে পাঠানো params পড়তে পারি।

📄 ProfileScreen.tsx

import { View, Text } from 'react-native';
import { useRoute, RouteProp } from '@react-navigation/native';

type RootStackParamList = {
  Profile: { username: string };
};

export default function ProfileScreen() {
  const route = useRoute>();

  return (
    
      Welcome, {route.params.username}
    
  );
}
  

🧩 useFocusEffect Hook

Screen যখন active (focus) হয় তখন কোনো কাজ করতে চাইলে useFocusEffect ব্যবহার করা হয়।

import { Text } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

export default function HomeScreen() {
  useFocusEffect(
    useCallback(() => {
      console.log('Home Screen Focused');
    }, [])
  );

  return Home Screen;
}
  

🧩 useIsFocused Hook

Screen বর্তমানে visible কিনা জানতে useIsFocused ব্যবহার হয়।

import { Text } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

export default function ProfileScreen() {
  const isFocused = useIsFocused();

  return (
    
      {isFocused ? 'Screen Active' : 'Screen Not Active'}
    
  );
}
  

✅ সংক্ষেপে মনে রাখবেন

• useNavigation → screen navigate
• useRoute → route params পড়া
• useFocusEffect → screen focus event
• useIsFocused → screen visible কিনা
• TypeScript ব্যবহার করলে code আরও safe হয়