Deep Linking Your React Native App

componentDidMount() {  
Linking.addEventListener('url', this.handleOpenURL);
}componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}handleOpenURL(event) {
console.log(event.url);
const route = e.url.replace(/.*?:\/\//g, '');
// do something with the url, in our case navigate(route)
}
peopleapp://people/0
peopleapp://people/1
peopleapp://people/2
..etc
react-native init PeopleApp
npm i -s react-navigation
yarn add react-navigation
router.js
home.js
people.js
// index.ios.js or index.android.js
import { AppRegistry } from 'react-native';import Router from './router';
AppRegistry.registerComponent('PeopleApp', () => Router);
// router.js
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';import { StackNavigator } from 'react-navigation';import Home from './home';import People from './people';const Router = StackNavigator({
Home: { screen: Home },
People: { screen: People },
});export default Router;
import React from 'react';
import { Platform, Text, Linking } from 'react-native';class Home extends React.Component {
static navigationOptions = { // A
title: 'Home',
};componentDidMount() { // B
if (Platform.OS === 'android') {
Linking.getInitialURL().then(url => {
this.navigate(url);
});
} else {
Linking.addEventListener('url', this.handleOpenURL);
}
}

componentWillUnmount() { // C
Linking.removeEventListener('url', this.handleOpenURL);
} handleOpenURL = (event) => { // D
this.navigate(event.url);
} navigate = (url) => { // E
const { navigate } = this.props.navigation;
const route = url.replace(/.*?:\/\//g, '');
const id = route.match(/\/([^\/]+)\/?$/)[1];
const routeName = route.split('/')[0];

if (routeName === 'people') {
navigate('People', { id, name: 'chris' })
};
} render() {
return <Text>Hello from Home!</Text>;
}}export default Home;
import React from 'react';
import { Text, Image, View, StyleSheet } from 'react-native';const people = { // A 0: {
name: 'Leela',
image: 'http://vignette1.wikia.nocookie.net/en.futurama/images/d/d4/Turanga_Leela.png/revision/latest?cb=20150218013044',
}, 1: {
name: 'Bender',
image: 'https://vignette2.wikia.nocookie.net/en.futurama/images/4/43/Bender.png/revision/latest?cb=20150206072725',
}, 2: {
name: 'Amy',
image: 'https://i.ytimg.com/vi/4sCtTq7K3yI/hqdefault.jpg',
}, 3: {
name: 'Fry',
image: 'http://www.supergrove.com/wp-content/uploads/2017/03/fry-futurama-22-which-robot-from-quotfuturamaquot-are-you.jpg',
}
}class People extends React.Component {
static navigationOptions = {
title: 'People',
}; render() {
const { id } = this.props.navigation.state.params; // B if (!people[id])
return
<Text>Sorry, no data exists for this user</Text>return ( // C
<View>
<Text style={styles.text}>{people[id].name}</Text>
<Image
resizeMode="contain"
style={styles.image}
source={{ uri: people[id].image }}
/>
</View>
)
}
}const styles = StyleSheet.create({
text: {
margin: 19,
fontSize: 22,
},
image: {
width: 400,
height: 400,
},
});export default People;

Configuring iOS

Step 1. Add URL type to info.plist

  1. Open info.plist and at the top of the file, create a new property called URL types

Step 2. Add the following code to AppDelegate.m

Below last existing import add this import:

#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {  return [RCTLinkingManager application:app openURL:url options:options]; }
peopleapp://people/0

Configuring Android

First, we need to open our Manifest file and add the app name we will want to be referencing, in our case peopleapp.

<intent-filter android:label="filter_react_native">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="peopleapp" android:host="people" /> // A
</intent-filter>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store