Deep linking basics in React Native

Introduction

Deep linking lets your app open specific screens directly from a link. This helps users jump right to what they want without extra steps.

You want users to open a product page directly from a web link.

You want to send notifications that open a specific app screen.

You want to share app content links with friends.

You want to handle special URLs that open your app.

You want to improve user experience by skipping the home screen.

Syntax

React Native

import { Linking } from 'react-native';

// To handle incoming links
Linking.addEventListener('url', handleUrl);

function handleUrl(event) {
  const url = event.url;
  // parse url and navigate
}

// To open a link
Linking.openURL('myapp://screen');

Use Linking.addEventListener('url', callback) to listen for links that open your app.

Use Linking.openURL() to open links from your app.

Examples

This listens for any link that opens the app and logs the URL.

React Native

Linking.addEventListener('url', (event) => {
  console.log('Opened with URL:', event.url);
});

This opens the app to the profile screen with ID 123 if deep linking is set up.

React Native

Linking.openURL('myapp://profile/123');

Sample App

This app listens for deep links and shows an alert with the URL when opened by a link. It also has a button to open a profile screen via a deep link.

React Native

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

export default function App() {
  useEffect(() => {
    const handleUrl = (event) => {
      Alert.alert('Deep Link Opened', event.url);
    };

    Linking.addEventListener('url', handleUrl);

    return () => {
      Linking.removeEventListener('url', handleUrl);
    };
  }, []);

  const openProfile = () => {
    Linking.openURL('myapp://profile/42');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to Deep Linking Demo</Text>
      <Button title="Open Profile 42" onPress={openProfile} />
    </View>
  );
}

Important Notes

Remember to configure your app manifest (Android) and info.plist (iOS) to support your custom URL scheme.

Test deep links using command line tools or by clicking links on your device.

Always remove event listeners in cleanup to avoid memory leaks.

Summary

Deep linking lets users open specific app screens from links.

Use Linking API to listen and open URLs.

Configure your app to handle your custom URL schemes properly.