Deep Linking in React Native

Deep Linking in React Native

Deep Linking হলো এমন একটি সিস্টেম যার মাধ্যমে আপনার React Native অ্যাপকে **বাইরের কোনো লিংক → সরাসরি নির্দিষ্ট স্ক্রিনে** পাঠানো যায়। যেমন: 

myapp://profile/10

এই লিংক ক্লিক করলে অ্যাপ সরাসরি Profile Screen-এ যাবে এবং সেই user id (10) পাস করবে।

🔍 Deep Linking কেন ব্যবহার করবেন?

  • Shareable links → অ্যাপের ভেতরের পেজ শেয়ার করা যায়
  • Push Notification → লিংক ক্লিক করলে নির্দিষ্ট স্ক্রিন খুলে
  • OAuth Login → (Google, Facebook login redirect URL)
  • Dynamic Links → ই-কমার্স প্রোডাক্ট পেজে সরাসরি নেয়া
  • App-to-App navigation → অন্য অ্যাপ থেকে সরাসরি খোলা

🔗 Deep Linking এর দুটি ধরন

  • Custom URL Scheme → যেমন myapp://home
  • Universal Linking (iOS) / App Links (Android) → যেমন https://myapp.com/profile/5

আজ আমরা React Navigation ব্যবহার করে Deep Linking সেটআপ দেখবো।

⚙️ Deep Linking Setup (React Navigation)

📌 Step 1 – Linking Configuration

const linking = {
  prefixes: ["myapp://", "https://myapp.com"],
  config: {
    screens: {
      Home: "home",
      Profile: "profile/:id",
    },
  },
};

এখানে Profile স্ক্রিনে id param পাঠানো হচ্ছে।

📌 Step 2 – Navigation Container-এ Linking Pass করা

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

export default function App() {
  return (
    
        {/* Screens */}
    
  );
}

🧪 Deep Link Test করার উপায়

👉 iOS Simulator

xcrun simctl openurl booted "myapp://profile/10"

👉 Android Emulator

adb shell am start -W -a android.intent.action.VIEW -d "myapp://profile/10"

👉 Browser Test (Universal Link)

https://myapp.com/profile/10

ব্রাউজারে ক্লিক করলে অ্যাপ খুলে যাবে (ইনস্টল করা থাকলে)।

📥 অ্যাপের ভিতরে Deep Link ধরার উপায়

import * as Linking from "expo-linking";
import { useEffect } from "react";

useEffect(() => {
  const subscription = Linking.addEventListener("url", event => {
    const url = event.url;
    console.log("Incoming URL:", url);
  });

  return () => subscription.remove();
}, []);

এই কোড অ্যাপ চলাকালীন আসা deep link গুলো হ্যান্ডেল করবে।

🛠 Custom URL Scheme সেটআপ

📌 Android → AndroidManifest.xml

<intent-filter>
    <data android:scheme="myapp" android:host="profile" />
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>

📌 iOS → Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

💡 Deep Linking Best Practices

  • Always use clean URL patterns like /product/:id
  • Push Notification → Deep Link map করে দিন
  • Dynamic linking ব্যবহার করুন (Firebase Dynamic Links)
  • In-app link click → Always validate params
  • Analytics add করুন (User কোন লিংক থেকে এলো)

🎉 Conclusion

Deep Linking অ্যাপকে স্মার্ট, আধুনিক এবং শেয়ারযোগ্য করে তোলে। এর মাধ্যমে অ্যাপের নির্দিষ্ট page/share/cart/profile → সরাসরি link করা সম্ভব। React Navigation দিয়ে এটি সেটআপ করা সহজ, এবং Android ও iOS উভয় প্ল্যাটফর্মেই এটি খুব গুরুত্বপূর্ণ।

← Previous Next →
👼 Quiz
/

লোড হচ্ছে...