Implementing Deep Linking in React Native with Expo

Introduction

What is Deep Linking?
Deep linking allows mobile apps to open specific screens or content based on a URL, providing a seamless navigation experience for users.

Why Use Deep Linking?
It improves user engagement by allowing users to jump directly to a particular section of the app (like from an email or external link) rather than navigating manually.

Deep Linking in React Native with Expo
React Native and Expo offer built-in support for deep linking, making it easier to implement on both iOS and Android without the need for heavy native code.

Setting Up Deep Linking in Expo

1. Create a New Expo Project (or use an existing one)

Start by creating a new Expo project using expo init, or use an existing project:

expo init MyDeepLinkingApp
cd MyDeepLinkingApp

2. Configuring app.json

To set up deep linking in Expo, you need to modify the app.json file. Define the scheme for your app, which serves as the prefix for your deep links:

jsonCopy code{
  "expo": {
    "name": "MyDeepLinkingApp",
    "slug": "my-deep-linking-app",
    "scheme": "myapp",   // Add this line for deep linking
    ...
  }
}

The "scheme" defines the custom URL that will be used to open your app. In this case, deep links will follow the format myapp://

Implementing Deep Linking with React Navigation

1. Install React Navigation

React Navigation is a popular library for routing in React Native apps. Install the necessary packages:

npm install @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

2. Configure Navigation

Set up navigation with deep linking support:

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

const Stack = createStackNavigator();

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:id',  // deep link with parameter
    },
  },
};

function HomeScreen() {
  return <Text>Home Screen</Text>;
}

function ProfileScreen({ route }) {
  const { id } = route.params;
  return <Text>Profile Screen, ID: {id}</Text>;
}

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

The linking object enables deep linking by defining URL prefixes (myapp://) and specifying screens that can be accessed via deep links.

Handling Parameters in Deep Links

The example above shows how a profile screen can take an ID parameter in the URL, like myapp://profile/123, and display the corresponding ID in the app.

Testing Deep Linking

1. Testing in Expo Go

You can test deep linking using the Expo Go app. Simply run your app:

expo start

From the command line, trigger a deep link:

expo open --url myapp://profile/123

Alternatively, you can type this URL in the browser or an app that supports deep links on your device to see the deep link in action.

2. Testing on a Physical Device or Emulator

To test deep linking on a physical device, simply enter the link in the browser and ensure that the app is installed and running in the background.

Advanced Deep Linking Features

1. Handling Deep Linking via Email or Push Notifications

Deep linking is particularly useful when combined with email or push notifications. For example, a user may receive a verification email containing a deep link (myapp://verify?token=abc123), which, once clicked, will direct them to the account verification page.

In your code, capture the token from the deep link URL and handle it appropriately:

function VerificationScreen({ route }) {
  const { token } = route.params;
  return <Text>Token: {token}</Text>;
}

2. Adding Fallbacks for Non-Supported Platforms

In some cases, a user might click a deep link on a platform that doesn't support your app (e.g., a web browser). You can implement fallback URLs that redirect users to your website or app store to download the app.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: '',
      Profile: 'profile/:id',
    },
  },
  getInitialURL: async () => {
    const url = await Linking.getInitialURL();
    return url;
  },
};

Conclusion

Deep linking enhances user experience by providing direct navigation to specific screens within your app. Expo simplifies deep linking implementation for both iOS and Android. With this guide, you can easily implement deep linking in your React Native apps using Expo.