messageCross Icon
Cross Icon
Mobile App Development

How to Implement React Native Deep Linking with Expo Router

How to Implement React Native Deep Linking with Expo Router
How to Implement React Native Deep Linking with Expo Router

Have you ever tapped a link in a spatial computing notification, a shared AI workspace, or a standard email and landed instantly on a precise screen within an app? That is the power of deep linking. In 2026, deep linking has transitioned from a supplementary feature to the core infrastructure of the Universal App ecosystem, blurring the line between the web and your React Native app.

With the latest Expo Router, setting up deep linking is more intuitive than ever, moving toward a file-system convention. By utilizing Continuous Native Generation (CNG) and Type-Safe Routing, the complexity of managing linking.ts or deeply nested state objects has been eliminated. Your project’s directory structure now serves as its own API map.

In this guide, we will build a production-ready deep link setup optimized for the latest iOS and Android standards. Leveraging AI tools like those used by experts at Zignuts can further streamline your app development and marketing workflows, allowing for automated route validation and "intent-aware" user journeys.

Why React Native Deep Linking Matters in 2026

Deep linking isn’t just a “nice-to-have” anymore; it is the core infrastructure for the Universal App experience. It powers high-intent features such as:

  • Contextual AI Handoffs: Seamlessly moving a user from a natural language query in an AI workspace (like Gemini or ChatGPT) directly into a specific, data-populated screen in your app.
  • Next-Gen Auth Loops: Handling secure OAuth 2.1 callbacks, biometric "Magic Links," and passkey redirects without the friction of traditional browser switching.
  • Intelligent Push Notifications: Moving beyond simple redirects to opening apps in specific states, like a pre-filled checkout or a live collaboration session.
  • Interactive Link Previews: Supporting modern UI standards like iOS "Liquid Glass" and Android "Live Tiles," allowing users to interact with your app’s content before they even tap the link.
  • Cross-App Workflows: Allowing specialized apps to pass complex data objects directly to yours, creating a "mesh" of interconnected native services.

Think of it as giving your app a Universal Address System. In an era where users expect instant access, deep linking ensures your app is always ready to respond to a click, a voice command, or an AI suggestion.

Step 1: Create a New Expo Project

If you don’t have a project yet, start fresh:

Code

npx create-expo-app@latest my-deep-linking-app
cd my-deep-linking-app

And enable routing in app/_layout.tsx:

Code

import { Stack } from "expo-router";

export default function RootLayout() {
  return <Stack />;
}

Step 2: Add a Custom URL Scheme

Your app needs its own unique scheme (like deeplinkr://). Open app.json and add this inside expo:

Code

{
  "expo": {
    ...
    "scheme": "deeplinkr" // Your custom scheme
  }
}

Now your app can recognise deeplinkr://... links.

Step 3: Define Routes with Expo Router

Here’s the magic: Expo Router automatically maps your file structure into deep links. Let’s create a few screens inside the app/ folder:

Code

app/
 ├─ index.tsx             → deeplinkr://
 ├─ profile/[id].tsx      → deeplinkr://profile/:id
 ├─ orders/[orderId].tsx  → deeplinkr://orders/:orderId
 └─ _not-found.tsx        → fallback for bad links

app/index.tsx

Code

import { Text, View, Button } from "react-native";
import { Link } from "expo-router";

export default function Home() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 18 }}>Welcome Home</Text>
      <Link href="/profile/42" asChild>
        <Button title="Go to Profile 42" />
      </Link>
    </View>
  );
}

app/profile/[id].tsx

Code

import { useLocalSearchParams } from "expo-router";
import { Text, View } from "react-native";

export default function Profile() {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 18 }}>Profile ID: {id}</Text>
    </View>
  );
}

app/orders/[orderId].tsx

Code

import { useLocalSearchParams } from "expo-router";
import { Text, View } from "react-native";

export default function Orders() {
  const { orderId } = useLocalSearchParams<{ orderId: string }>();

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 18 }}>Order ID: {orderId}</Text>
    </View>
  );
}

app/_not-found.tsx

Code

import { Text, View } from "react-native";

export default function NotFound() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 18, color: "red" }}>Page not found</Text>
    </View>
  );
}

That’s it - routes are ready! 

Step 4: Run the App (Standalone Build for Deep Linking)

Heads up: If you’re running the app inside Expo Go, deep linking won’t work. Expo Go only supports exp:// links, not your custom scheme like deeplinkr://.

To test properly, you’ll need to create a native build of your app. Luckily, you don’t need to use EAS for this - you can run it directly with the React Native CLI.

4.1 Prebuild the Native Project

Since Expo Router runs in the managed workflow, first generate the native iOS/Android projects:

Code

npx expo prebuild

This creates ios/ and android/ folders inside your project.

4.2 Run on iOS Simulator

Make sure you have Xcode installed, then run:

Code

npx react-native run-ios

This will:

  • Build the iOS project
  • Launch the app in your simulator
  • Register your custom scheme (deeplinkr://)

Now you can test deep links with:

Code

xcrun simctl openurl booted "deeplinkr://profile/42"

4.3 Run on Android Emulator

Make sure you have Android Studio installed with an emulator running, then run:

Code

npx react-native run-android

After it installs, test deep links with the following command:

Code

adb shell am start -W -a android.intent.action.VIEW -d "deeplinkr://orders/123" com.mydeeplinkingapp

4.4 Still want Expo Go for development?

No worries - you can continue using Expo Go for most development, and only switch to native builds when you need to test deep linking or features that require custom native code.

Hire Now!

Hire React Native Developers Today!

Ready to bring your app concept to life? Start your journey with Zignuts expert React Native developers.

**Hire now**Hire Now**Hire Now**Hire now**Hire now

Step 5: Test Deep Links (Real World)

Once your app is installed via a native build (not Expo Go), you can test deep links just like your users will.

Option 1: Command-line Testing

5.1 On iOS Simulator

Code

xcrun simctl openurl booted "deeplinkr://profile/42"

5.2 On Android Emulator

Code

adb shell am start -W -a android.intent.action.VIEW -d "deeplinkr://orders/123" com.mydeeplinkingapp

Option 2: Real-World Copy & Click

  1. Copy one of your deep links, e.g.:
    • deeplinkr://profile/42
    • deeplinkr://orders/123
  2. Paste it into Notes, Safari/Chrome, Slack, or an email draft inside the simulator/emulator.
  3. Tap on the link.
    • If your app is open, it will navigate directly to the screen.
    • If your app is in the background, it will resume and navigate.
    • If your app is closed, it will launch fresh and navigate to the screen.

Option 3: Invalid Links

  1. Try something like:
    • deeplinkr://foo/bar
  2. Paste it into Notes, Safari/Chrome, Slack, or an email draft inside the simulator/emulator.
  3. Tap on the link.
    • If your app is open, it will navigate directly to the screen.
    • If your app is in the background, it will resume and navigate.
    • If your app is closed, it will launch fresh and navigate to the screen.

Important Limitations of Custom URL Schemes

In 2026, while deep linking react native expo router simplifies internal navigation, custom URL schemes (like deeplinkr://) have critical limitations in a professional app development workflow:

  • Installation Dependency: Custom schemes only function if the app is already installed. If it isn't, the link simply fails to resolve, leaving the user on a dead end.
  • No Store Redirection: These schemes cannot automatically route users to the App Store or Play Store.
  • Security Shift: Modern OS updates now prioritize verified ownership. Without verification, custom schemes are more susceptible to "link hijacking" by malicious apps.

To ensure a seamless user journey, modern workflows move toward Universal Links (iOS) and App Links (Android). These use standard https:// URLs that open the app if installed or redirect to a website or App Store if it isn't (Deferred Deep Linking). Utilizing modern services like Supalink or Freezed Links allows you to maintain user context throughout the installation process, a strategy frequently implemented by experts at Zignuts to maximize user retention.

Conclusion: Mastering React Native Deep Linking

In 2026, implementing React Native Deep Linking with Expo Router has become a refreshingly streamlined process. By moving away from imperative configurations and embracing a file-system-first approach, the barrier to entry for complex navigation has effectively vanished.

The era of wrestling with boilerplate linking.ts files is over. What remains is a clean, intuitive, and highly scalable architecture that handles the heavy lifting for you. Whether you are integrating biometric auth loops, context-aware AI suggestions, or smart previews, your routing is already optimized for the future of app development.

However, as the ecosystem evolves toward Universal Links and AI-driven intent-aware journeys, the technical nuances can become complex. To ensure your project stays ahead of the curve with performance-first architecture, many businesses choose to Hire React Native Developers who specialize in the latest Expo ecosystem and native integrations. Professional expertise ensures that your deep linking strategy is not only functional but also secure and optimized for maximum user retention.

Ready to Scale Your App?

Zignuts leverages cutting-edge AI-powered marketing and app development expertise to empower projects with seamless integration and rapid deployment. If you're looking for efficient solutions tailored to your business needs, Contact Zignuts today to discuss how we can bring your digital vision to life.

card user img
Twitter iconLinked icon

A problem solver with a passion for building robust, scalable web solutions that push the boundaries of technology and deliver impactful results

Frequently Asked Questions

No items found.
Book Your Free Consultation Click Icon

Book a FREE Consultation

No strings attached, just valuable insights for your project

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!
View All Blogs