📲 React Native (TypeScript) এ File-based Passing Params Between Screens

React Native অ্যাপে এক স্ক্রিন থেকে অন্য স্ক্রিনে ডাটা পাঠানো একটি খুবই সাধারণ এবং গুরুত্বপূর্ণ কাজ। বিশেষ করে file-based structure এবং TypeScript ব্যবহার করলে টাইপ সেফটি ও কোড মেইনটেইন করা অনেক সহজ হয়।

🔹 Params কী?

Params হলো এমন কিছু ডাটা যা আমরা একটি স্ক্রিন থেকে অন্য স্ক্রিনে পাঠাই। যেমন:

• User ID
• User Name
• Product Details
• Any dynamic value

📁 File-based Folder Structure

src/
 └── screens/
     ├── HomeScreen.tsx
     └── ProfileScreen.tsx
  

⚙️ Navigation Setup (TypeScript)

প্রথমে আমরা একটি Param List ডিফাইন করবো যাতে TypeScript জানে কোন স্ক্রিনে কী ডাটা যাবে।

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

🚀 HomeScreen থেকে Params পাঠানো

এখন HomeScreen.tsx থেকে আমরা Profile স্ক্রিনে ডাটা পাঠাবো।

import { View, Text, Button } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { RootStackParamList } from '../types';

type Props = NativeStackScreenProps;

const HomeScreen = ({ navigation }: Props) => {
  return (
    
      🏠 Home Screen

      
          navigation.navigate('Profile', {
            userId: 101,
            userName: 'Prabir'
          })
        }
      />
    
  );
};

export default HomeScreen;
  

📥 ProfileScreen এ Params গ্রহণ করা

এবার ProfileScreen.tsx এ আমরা পাঠানো ডাটা রিসিভ করবো।

import { View, Text } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { RootStackParamList } from '../types';

type Props = NativeStackScreenProps;

const ProfileScreen = ({ route }: Props) => {
  const { userId, userName } = route.params;

  return (
    
      👤 Profile Screen
      User ID: {userId}
      User Name: {userName}
    
  );
};

export default ProfileScreen;
  

🖥️ Output কী হবে?

✅ TypeScript ব্যবহার করার সুবিধা

• ভুল params পাঠালে আগেই error দেখাবে
• Auto-suggestion পাওয়া যায়
• Production-ready code
• Large app এ bug কম হয়

💡 Best Practices

• সব Param List আলাদা `types.ts` ফাইলে রাখুন
• Navigation logic পরিষ্কার রাখুন
• Params ছোট ও meaningful রাখুন