Peakiq Blog

Deep Linking in React Native Using AppDelegate swift

Step-by-step guide to implementing deep linking in React Native using AppDelegate.swift. Learn how to handle custom URL schemes and universal links on iOS.

Editorial3 min read508 words

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.