Deep Linking in React Native with AppDelegate.swift

Originally published on PEAKIQ

1️⃣ Setting Up Deep Linking in AppDelegate.swift

First, modify your AppDelegate.swift file to handle deep linking.

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 and add the following:

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>peakiq</string> <!-- Your custom scheme -->
</array>
</dict>
</array>

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


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

3️⃣ Configure Deep Linking in React Navigation

Modify App.tsx to define linking behavior.

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

Run these commands to test deep linking:

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

Method 2: Using Safari

1. Open Safari on the simulator.

2. Enter peakiq://profile/123 and press Go.

Your app should open and navigate to the Profile screen.

Method 3: Using React Native Code

To test deep linking within your app, add a button:

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 navigate directly to the Profile screen.

If you plan to support universal links (https://peakiq.in), you’ll also need to configure Apple Associated Domains and host the apple-app-site-association file.