How to Use Deep Linking in React Native Apps

To use deep linking in React Native, configure your app to handle URL schemes or universal links and use the Linking API to listen for incoming URLs. This lets your app open specific screens when users tap links outside the app.

Syntax

Deep linking in React Native mainly uses the Linking module. You listen for URLs with Linking.addEventListener('url', callback) and get the initial URL with Linking.getInitialURL(). You also configure URL schemes in native files.

• Linking.getInitialURL(): Gets the URL that opened the app.
• Linking.addEventListener('url', callback): Listens for URL events while the app runs.
• Native config: Set URL schemes in Info.plist (iOS) and AndroidManifest.xml (Android).

javascript

import { Linking } from 'react-native';

// Get URL that opened the app
async function getUrl() {
  const url = await Linking.getInitialURL();
  return url;
}

// Listen for URL events
const subscription = Linking.addEventListener('url', ({ url }) => {
  // handle the url
});

Example

This example shows a simple React Native app that listens for deep links and displays the URL received. It handles the initial URL and any new URLs while running.

javascript

import React, { useEffect, useState } from 'react';
import { View, Text, Linking } from 'react-native';

export default function App() {
  const [url, setUrl] = useState(null);

  useEffect(() => {
    async function getUrl() {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl) setUrl(initialUrl);
    }
    getUrl();

    const subscription = Linking.addEventListener('url', event => {
      setUrl(event.url);
    });

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Deep Link URL:</Text>
      <Text>{url || 'No URL detected'}</Text>
    </View>
  );
}

Output

A screen showing text "Deep Link URL:" and below it the URL string received or "No URL detected" if none.

Common Pitfalls

• Not configuring native URL schemes or intent filters causes links not to open the app.
• Forgetting to remove event listeners leads to memory leaks.
• Not handling the initial URL means the app misses the link that opened it.
• Using deprecated Linking.addEventListener without cleanup causes bugs.

javascript

/* Wrong: Not removing listener */
useEffect(() => {
  Linking.addEventListener('url', handleUrl);
}, []);

/* Right: Remove listener on cleanup */
useEffect(() => {
  const subscription = Linking.addEventListener('url', handleUrl);
  return () => subscription.remove();
}, []);

Quick Reference

• Linking.getInitialURL(): Get URL that opened the app.
• Linking.addEventListener('url', callback): Listen for URL events.
• iOS: Add URL schemes in Info.plist under CFBundleURLTypes.
• Android: Add intent filters in AndroidManifest.xml for your scheme.
• Always clean up listeners in useEffect return function.

Key Takeaways

Configure native URL schemes or intent filters to enable deep linking.

Use Linking.getInitialURL() to handle the URL that opened the app.

Listen for URL events with Linking.addEventListener and clean up listeners properly.

Test deep links on both iOS and Android devices or simulators.

Handle URLs to navigate users to specific screens inside your app.