Day 8: Implementing Deep Linking in React Native

In this tutorial, you’ll learn how to set up deep linking in a React Native app using React Navigation. By the end of today’s lesson, you’ll be able to open specific screens of your app directly from external links.

What You Will Learn Today:

1. Setting up deep linking with React Navigation
2. Configuring deep links for different screens
3. Testing deep links on Android and iOS
4. Handling custom schemes and universal links

Step 1: Setting Up React Navigation for Deep Linking

React Navigation has built-in support for deep linking, making it straightforward to set up in React Native.

1. Open App.js and configure the deep linking settings for React Navigation:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen'; // A screen to demonstrate deep linking

const Stack = createNativeStackNavigator();

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'], // Define URI schemes or website URLs
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:id', // Dynamic path with ID parameter
    },
  },
};

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

Explanation:

• prefixes: Specifies the deep link prefixes your app will support, including custom schemes (e.g., myapp://) or website URLs (e.g., https://myapp.com).
• config.screens: Maps screen names to specific paths. For example, navigating to myapp://details/123 will open the DetailsScreen with an id parameter of 123.

Step 2: Creating Screens for Deep Linking

To demonstrate deep linking, let’s create a DetailsScreen component that receives an id parameter from the deep link.

1. Create a new file called DetailsScreen.js:

touch DetailsScreen.js

2. Open DetailsScreen.js and add the following code:

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

export default function DetailsScreen({ route }) {
  const { id } = route.params; // Get the 'id' parameter from the route

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Text>ID: {id}</Text>
    </View>
  );
}

Explanation:

• route.params: Accesses the id parameter provided by the deep link (e.g., myapp://details/123).
• The DetailsScreen displays the ID passed through the deep link.

Step 3: Configuring Deep Links on Android

To handle deep linking on Android, you need to configure the AndroidManifest.xml file.

1. Open android/app/src/main/AndroidManifest.xml and add an intent filter to the <activity> tag:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="myapp.com" />
</intent-filter>

Explanation:

• android:scheme: Defines a custom URI scheme for deep linking (myapp://).
• android:host: Specifies the domain part of the URL (e.g., myapp.com).
• This configuration ensures that URLs matching myapp:// or https://myapp.com open the app on Android.

Step 4: Configuring Deep Links on iOS

To enable deep linking on iOS, configure the URL schemes in Xcode.

1. Open your app in Xcode by running:

npx react-native run-ios

2. Go to Info.plist and add a URL scheme under the URL Types section:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>myapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

Explanation:

• CFBundleURLSchemes: Specifies a custom URL scheme (myapp://) that iOS will recognize as a deep link for your app.
• With this configuration, iOS devices will open links with myapp:// in your app.

Step 5: Testing Deep Links

Now that deep linking is set up, let’s test it on both Android and iOS.

1. Testing on Android

1. Run your app on an Android emulator or physical device.
2. Open a terminal and enter the following command to open a deep link:

adb shell am start -W -a android.intent.action.VIEW -d "myapp://details/123"

You should see the DetailsScreen with ID: 123.

2. Testing on iOS

1. Run your app on an iOS simulator or physical device.
2. Open Safari and enter the following link:

myapp://details/123

If the deep link is configured correctly, you’ll be taken to the DetailsScreen with ID: 123.

Step 6: Handling Universal Links (Web URLs)

If your app should also open from URLs like https://myapp.com, configure universal links.

1. Go to your Firebase Console, then Dynamic Links > New Dynamic Link, and create a link that can open either the web or app version.
2. Ensure the universal link’s domain matches the one in your prefixes config.

Step 7: Recap and Summary

In today’s tutorial, you learned how to implement deep linking in a React Native app. Here’s a quick summary of what you’ve done:

• Configured React Navigation to handle deep links with custom schemes and universal links.
• Created screens and passed parameters through deep links.
• Configured Android and iOS settings to handle deep linking.
• Tested deep links on both Android and iOS devices.
• Explored universal links to support web-based URLs.

With deep linking, your app can provide a smoother experience by sending users directly to specific screens, boosting engagement and usability.

Next Up: Day 9 – Implementing In-App Purchases in React Native

In Day 9, we’ll dive into implementing in-app purchases (IAP) so that users can make purchases within the app, such as subscriptions, premium features, or digital goods.

Stay tuned for more advanced features tomorrow!