📌 Introduction

যখন আমরা React Native অ্যাপে বিভিন্ন স্ক্রিনের মধ্যে যাই, তখন অনেক সময় এক স্ক্রিন থেকে আরেক স্ক্রিনে ডাটা পাঠানো লাগে। যেমন:

• 🆔 Product Screen → productId send করা
• 👤 Profile Screen → userName send করা
• 📄 Details Screen → full object send করা

React Navigation এ এই কাজটি খুব সহজ এবং শক্তিশালী। এই টপিকটিতে আমরা দেখবো:

• 🔹 Params পাঠানোর নিয়ম
• 🔹 Params রিসিভ করার নিয়ম
• 🔹 Objects পাঠানো
• 🔹 Optional params
• 🔹 Default params
• 🔹 Updating params

🎯 Passing Params (Basic)

এক স্ক্রিন থেকে আরেক স্ক্রিনে ডাটা পাঠাতে আমরা ব্যবহার করি:

navigation.navigate("Details", { id: 101, name: "Mobile Phone" });
    

ব্যাখ্যা:

• "Details" → যেই স্ক্রিনে যাবে
• { id: 101, name: "Mobile Phone" } → পাঠানো ডাটা

📥 Receiving Params in Another Screen

রিসিভ করতে ব্যবহার করা হয় route.params

export default function DetailsScreen({ route }) {
  const { id, name } = route.params;

  return (
    <View>
      <Text>Product ID: {id}</Text>
      <Text>Product Name: {name}</Text>
    </View>
  );
}
    

🧩 Passing an Entire Object

অনেক সময় পুরো Object পাঠানোর প্রয়োজন হয়।

📤 Sending Object

navigation.navigate("Details", {
  product: {
    id: 1,
    title: "Laptop",
    price: 50000,
    stock: true
  }
});
    

📥 Receiving Object

const { product } = route.params;

<Text>{product.title}</Text>
<Text>{product.price}</Text>
    

❓ Optional Params

কখনো কখনো Params না থাকলেও স্ক্রিন কাজ করতে পারে। তখন Optional Params ব্যবহার করা হয়।

const { name = "Guest User" } = route.params ?? {};
    

যদি name না থাকে → "Guest User" দেখাবে।

🔧 Setting Default Params

Stack Navigator এ default params সেট করা যায়:

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ id: 0, name: "Unknown" }}
/>
    

♻️ Updating Params (Live Update)

স্ক্রিনে থাকা অবস্থায় Params আপডেট করতে:

navigation.setParams({ price: 999 });
    

এটি স্ক্রিনটি রিফ্রেশ না করে UI আপডেট করে।

↩️ Sending Data Back on Go Back

Go Back করার সময় ডাটা পাঠাতে useNavigation hook ব্যবহার করা হয়।

First Screen → Open Second Screen

navigation.navigate("Second", {
  onReturn: (value) => {
    console.log("Received:", value);
  }
});
    

Second Screen → Send Back Data

route.params.onReturn("Hello from second screen");
navigation.goBack();
    

💡 Best Practices

• ✔ ছোট ডাটা Params দিয়ে পাঠান
• ✔ বড় ডাটা (images, arrays) Context / Redux এ রাখুন
• ✔ Sensitive ডাটা Params এ পাঠাবেন না
• ✔ Params Optional রাখলে অ্যাপ ক্র্যাশ করবে না

🎉 Conclusion

React Native এ স্ক্রিন থেকে স্ক্রিনে ডাটা পাঠানো খুবই সহজ এবং অত্যন্ত প্রয়োজনীয়। Params ব্যবহার করে আপনি যেকোনো ধরনের ডাটা পাঠাতে পারবেন — simple value, object, even callback function!

এখন আপনি সহজেই Professional Navigation Flow তৈরি করতে পারবেন।