📱 File Based Stack Navigation (Hooks সহ) – React Native (TypeScript)

React Native অ্যাপে এক স্ক্রিন থেকে আরেক স্ক্রিনে যাওয়ার জন্য Navigation সবচেয়ে গুরুত্বপূর্ণ বিষয়। এই অধ্যায়ে আমরা শিখব কীভাবে File Based Stack Navigation ব্যবহার করে Hooks এবং TypeScript সহ একটি প্রফেশনাল ন্যাভিগেশন সিস্টেম তৈরি করা যায়।

---

🔹 Stack Navigation কী?

Stack Navigation ঠিক মোবাইলের Back Stack-এর মতো কাজ করে। একটি স্ক্রিনের উপর আরেকটি স্ক্রিন বসে এবং Back করলে আগের স্ক্রিনে ফিরে যায়।

• Login → Home → Profile
• Back button support
• Header control

---

🔹 File Based Navigation Structure

বড় অ্যাপে প্রতিটি স্ক্রিন আলাদা ফাইলে রাখা হয়, একে বলা হয় File Based Navigation।

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

---

🔹 Required Packages Install

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

এগুলো Stack Navigation কাজ করার জন্য প্রয়োজন।

---

🔹 Stack Navigator Setup (TypeScript)

import { createNativeStackNavigator } from '@react-navigation/native-stack';

export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: number };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

এখানে আমরা TypeScript type ব্যবহার করেছি, যাতে কোন স্ক্রিনে কী parameter যাবে তা আগেই জানা থাকে।

---

🔹 StackNavigator.tsx (File Based)

import { NavigationContainer } from '@react-navigation/native';
import { Stack } from './StackTypes';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';

export default function StackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

🔹 useNavigation Hook ব্যবহার

useNavigation() Hook ব্যবহার করে আমরা এক স্ক্রিন থেকে অন্য স্ক্রিনে যেতে পারি।

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

const navigation = useNavigation<
  NativeStackNavigationProp<RootStackParamList>
>();

navigation.navigate('Profile', { userId: 101 });

✔ TypeScript থাকায় ভুল route বা ভুল parameter দিলে আগেই error দেখাবে।

---

🔹 useRoute Hook দিয়ে Data Receive

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

const route = useRoute<
  RouteProp<RootStackParamList, 'Profile'>
>();

const { userId } = route.params;

এর মাধ্যমে Profile Screen এ Home Screen থেকে পাঠানো data পাওয়া যায়।

---

🔹 Navigation Output (User Experience)

• App ওপেন → Home Screen দেখা যাবে
• Button ক্লিক → Profile Screen ওপেন হবে
• Back Press → Home Screen এ ফিরে আসবে
• Header Auto Manage হবে

---

✨ Summary

• File Based Structure অ্যাপকে clean রাখে
• Stack Navigation Back system দেয়
• Hooks কোডকে সহজ করে
• TypeScript app কে bug-free করে
• Production ready navigation তৈরি হয়

✅ এই পদ্ধতি ফলো করলে আপনি একটি Professional React Native App তৈরি করতে পারবেন।