Deep Linking in React Native with AppDelegate.swift

#reactnative #ios #deeplinking #appdelegate

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/deep-linking-in-react-native-using-appdelegate-swift

1️⃣ Setting Up Deep Linking in AppDelegate.swift

First, update your AppDelegate.swift to handle incoming URLs:

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider

@main
class AppDelegate: RCTAppDelegate {

  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    self.moduleName = "peakiq"
    self.dependencyProvider = RCTAppDependencyProvider()
    self.initialProps = [:]

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  override func sourceURL(for bridge: RCTBridge) -> URL? {
    return self.bundleURL()
  }

  override func bundleURL() -> URL? {
    #if DEBUG
    return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
    #else
    return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    #endif
  }

  // Handle URL Schemes (e.g., peakiq://)
  override func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
    return RCTLinkingManager.application(app, open: url, options: options)
  }

  // Handle Universal Links (e.g., https://peakiq.in)
  override func application(
    _ application: UIApplication,
    continue userActivity: NSUserActivity,
    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
  ) -> Bool {
    if let url = userActivity.webpageURL {
      return RCTLinkingManager.application(application, open: url, options: [:])
    }
    return false
  }
}

2️⃣ Configure Deep Linking in Info.plist

Open:

ios/peakiq/Info.plist

Add the following:

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

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>peakiq</string>
  <string>https</string>
</array>

This enables iOS to recognize peakiq:// as a valid deep link.

3️⃣ Configure Deep Linking in React Navigation

Update your App.tsx:

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

const Stack = createStackNavigator();

const linking = {
  prefixes: ['peakiq://', 'https://peakiq.in'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile/:id',
    },
  },
};

const App = () => {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={() => <></>} />
        <Stack.Screen name="Profile" component={() => <></>} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

4️⃣ Testing Deep Linking

🔹 Method 1: Using Terminal

xcrun simctl openurl booted peakiq://homexcrun simctl openurl booted peakiq://profile/123

🔹 Method 2: Using Safari

Open Safari in simulator
Enter:

peakiq://profile/123

🔹 Method 3: Using React Native Code

import { Linking, Button } from 'react-native';

const testDeepLinking = () => {
  Linking.openURL('peakiq://profile/123');
};

<Button title="Test Deep Link" onPress={testDeepLinking} />;

✅ Conclusion

You’ve successfully configured deep linking in your React Native app using AppDelegate.swift 🚀

Now:

👉 peakiq://profile/123 will open your app and navigate directly to the Profile screen.

DEV Community