Cyber Monday Sales

9/ 20

promotion ends on December 4th

Mega Bundle

Get developer licenses for all our products at 90% off discount.

Single Product

20% off any product. Use discount code CYBERMONDAY.

$6,183

$699

20% OFF

  • 15+ fully functional mobile apps
  • 600+ screens
  • 1,000+ features
  • 200,000+ lines of code
  • free lifetime updates
  • fully functional codebase
  • 1000+ paid customers
  • 60,000+ developers using our products
  • free lifetime updates
BUY NOW Start Shopping

In this tutorial, you are going to build a small demo by adding the feature of a deep linking in a React Native application. To support deep linking and navigation in the app, react-navigation library is going to be used. There are use cases in which using an external URL a user is going to transit to a specific screen in your application. This URL can be provided on a web page, for instance. Navigating to the exact screen in the React Native app from an external URL is what the process of Deep Linking is about.

deep linking react native

In this article, we are going to build a simple deep linking mechanism in React Native, which takes a user to a specific screen of a sample app, after clicking on a deep link outside the app (e.g. Safari). The experience will look like this:

deep linking react native

Create a React Native app

To get started, please create a new React Native project by executing the following command:

react-native init rnDeepLinkDemo

To be able to support Deep linking navigation, let us add the required npm packages. Once the project directory has been generated, navigate inside the project folder from your terminal and install the following dependencies.

yarn add react-navigation react-navigation-stack react-native-gesture-handler react-native-reanimated [email protected]

The next step is to link all the libraries you just installed. I am using React Native version greater than 0.60.x. If you are using a lower version of React Native, please follow the instructions to link the libraries here.

For the iOS platform, you just have to run the following set of commands.

cd ios
pod install

For the Android platform, add the following lines to the android/app/build.gradle file under dependencies section.

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Next, go to android/app/src/main/java/com/rndeeplinkdemo/MainActivity.java file and add the following.

// Add this with other import statements
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

// Add this inside "class MainActivity"

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}

Create two mock screens

After the dependencies have installed and react-navigation configured for each platform, create two mock screen files inside the src/screens directory. First, create a file HomeScreen.js with the following code snippet. This screen is going to be the initial screen when the app loads.

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  )
}

export default HomeScreen

Next, create another file DeepLinkScreen.js. This screen is going to open when the user is transiting from a URL.

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

function DeepLinkScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Deep Link Screen</Text>
    </View>
  )
}

export default DeepLinkScreen

Configure Deep Linking in React Navigation

Let us create a stack navigator from both the screen files. Import the following statements inside the file src/navigation.js.

import React from 'react'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavig

Shopping Cart