{{announcement.body}}
{{announcement.title}}

Deep Linking in React Native with React Navigation

DZone 's Guide to

Deep Linking in React Native with React Navigation

In this article, we discuss how to add deep linking in a React Native with React Navigation in order to create a better UX.

· Web Dev Zone ·
Free Resource

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 output will look like this:

Image title

Example output

Create a React Native App

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

Shell




xxxxxxxxxx
1


1
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.

Shell




xxxxxxxxxx
1


 
1
yarn add react-navigation react-navigation-stack react-native-gesture-handler react-native-reanimated react-native-screens@1.0.0-alpha.23



The next step is to link all the libraries you just installed. I am using a 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 iOS, you just have to run the following set of commands.

Shell




xxxxxxxxxx
1


1
cd ios
2
pod install



You may also like: React Native Developers: Create Your First App.
For Android, add the following lines to the  android/app/build.gradle file under  dependencies section.
Groovy




xxxxxxxxxx
1


 
1
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
2
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.

Java




xxxxxxxxxx
1
16


 
1
// Add this with other import statements
2
import com.facebook.react.ReactActivityDelegate;
3
import com.facebook.react.ReactRootView;
4
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
5
 
          
6
// Add this inside "class MainActivity"
7
 
          
8
@Override
9
protected ReactActivityDelegate createReactActivityDelegate() {
10
return new ReactActivityDelegate(this, getMainComponentName()) {
11
@Override
12
protected ReactRootView createRootView() {
13
return new RNGestureHandlerEnabledRootView(MainActivity.this);
14
}
15
};
16
}



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.

JavaScript




xxxxxxxxxx
1
12


 
1
import React from 'react'
2
import { View, Text } from 'react-native'
3
 
          
4
function HomeScreen() {
5
  return (
6
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
7
      <Text>Home Screen</Text>
8
    </View>
9
  )
10
}
11
 
          
12
export default HomeScreen



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

JavaScript




xxxxxxxxxx
1
12


 
1
import React from 'react'
2
import { View, Text } from 'react-native'
3
 
          
4
function DeepLinkScreen() {
5
  return (
6
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
7
      <Text>Deep Link Screen</Text>
8
    </View>
9
  )
10
}
11
 
          
12
export default DeepLinkScreen



Configure Deep Linking in React Navigation

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

JavaScript




xxxxxxxxxx
1


 
1
import React from 'react'
2
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
3
import { createStackNavigator } from 'react-navigation-stack'
4
 
          
5
import HomeScreen from './screens/HomeScreen'
6
import DeepLinkScreen from './screens/DeepLinkScreen'



Next, create a stack navigator with HomeScreen as the initial screen.

JavaScript




xxxxxxxxxx
1
14


 
1
const MainApp = createStackNavigator({
2
  Home: {
3
    screen: HomeScreen,
4
    navigationOptions: {
5
      headerTitle: 'Home'
6
    }
7
  },
8
  DeepLink: {
9
    screen: DeepLinkScreen,
10
    navigationOptions: {
11
      headerTitle: 'DeepLink'
12
    }
13
  }
14
})



To enable deep linking the app requires some identifier to recognize the path to the screen to open from the given external URL. react-navigation has path attribute that tells the router relative path to match against the URL. Re-configure both the routes as following:

JavaScript




xxxxxxxxxx
1
18


 
1
const MainApp = createStackNavigator({
2
  Home: {
3
    screen: HomeScreen,
4
    navigationOptions: {
5
      headerTitle: 'Home'
6
    },
7
    path: 'Home'
8
  },
9
  DeepLink: {
10
    screen: DeepLinkScreen,
11
    navigationOptions: {
12
      headerTitle: 'DeepLink'
13
    },
14
    path: 'rndeeplink'
15
  }
16
})
17
 
          
18
const AppContainer = createAppContainer(MainApp)



The last piece of the puzzle here is to configure the navigation to extract the path from the incoming URL from an external resource. This is done by uriPrefix. Add the following code snippet at the end of the file.

JavaScript




xxxxxxxxxx
1


 
1
export default () => {
2
  const prefix = 'myapp://'
3
 
          
4
  return <AppContainer uriPrefix={prefix} />
5
}



Do not forget to import the navigator inside App.js file, which is the main entry point of the current React Native app.

JavaScript




xxxxxxxxxx
1


 
1
import React from 'react'
2
import AppContainer from './src/navigation'
3
 
          
4
function App() {
5
  return <AppContainer />
6
}
7
 
          
8
export default App



Configure URI Scheme for Native iOS Apps

To make this work, you have to configure the native iOS app to open URLs based on the prefix myapp://. Open ios/rnDeepLinkDemo/AppDelegate.m file and add the following.

Objective C




xxxxxxxxxx
1


 
1
// Add the header at the top of the file:
2
#import <React/RCTLinkingManager.h>
3
 
          
4
// Add this above the `@end`:
5
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
6
 options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
7
{
8
 return [RCTLinkingManager application:app openURL:url options:options];
9
}



Then, open the ios/rnDeepLinkDemo.xcodeproj in the Xcode app. Select the app from the left navigation bar.

react native deep linking iOS

Selecting app

Open the Info tab.

Opening info tab in XCode

Next, go to the URL Types.

URL types

Click the + button and in identifier as well as URL schemes add myapp.

Adding URL type properties

Rebuild the React Native binaries by running react-native run-ios.

Testing the Deep Link

The external URL is going to look like this:

Java




xxxxxxxxxx
1


 
1
myapp://rndeeplink



To test it out, there are two ways. You can either test by executing the command below in a new terminal tab.

Shell




xxxxxxxxxx
1


1
xcrun simctl openurl booted myapp://rndeeplink



Or, open the Safari web browser in your iOS device or simulator. Type in the URL and press enter.

Final output

Further Reading

Topics:
react native ,web dev ,tutorial ,deep linking ,spa ,app dev

Published at DZone with permission of Krissanawat Kaewsanmuang . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}