React Native Deep Link

Create React Native New Project.

react-native init deepLink
cd deepLink
touch router.js home.js  people.js

Setup your navigation

//route.jsimport React from "react";
import PropTypes from "prop-types";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from "./home";
import People from "./people";
const Router = createStackNavigator({
Home: { screen: Home },
People: { screen: People }
});
export default createAppContainer(Router);

React native Linking

import { Linking } from "react-native";componentDidMount() {
if (Platform.OS === "android") {
Linking.getInitialURL().then(url => {
console.log('url is', url);
this.navigate(url);
});
}
}

Navigate to another screen.

navigate = url => {
const { navigate } = this.props.navigation;
const route = url.replace(/.*?:\/\//g, '');
const id = route.match(/\/([^\/]+)\/?$/)[1];
const routeName = route.split("/")[0];
if (routeName === "deep") {
navigate("People", { id, name: "chris" });
}
};
//people.js/* @flow weak */import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";
const people = {
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.getParam("id", "");
if (!people[id]) {
return <Text>Sorry, no data exists for this user </Text>;
}
return (
<View>
<Text style={styles.text}>{people[id].name}</Text>
<Image
resizeMode="contain"
style={styles.image}
source={{ uri: people[id].image }}
/>
</View>
);
}
}
export default People;const styles = StyleSheet.create({
text: {
margin: 19,
fontSize: 22
},
image: {
width: 400,
height: 400
}
});

Configure with android.

<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="deeplink" android:host="deep" />
</intent-filter>
deeplink://deep/0
deeplink://deep/1
deeplink://deep/2
$  adb shell am start -W -a android.intent.action.VIEW -c     android.intent.category.BROWSABLE -d "deeplink://deep/0" com.deeplink
Tribute for Edison Laptop
https://halgatewood.com
https://halgatewood.com

--

--

--

Software developer / JavaScript / React / React Native / Firebase / Node.js / C Programming / Book Reader / Story Teller

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

useEffect: 4 Tips Every Developer Should Know

React.js SPA with .NET Core 5

A way to setup the CI/CD pipeline for a Node app Server

React JS

404 Not Found with Docker, React Router and Nginx

Creating a Converter app in JavaScript

Unsubscribe a Subscription with Angular in 5 ways

Rest & Express.Js

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
Edison Devadoss

Edison Devadoss

Software developer / JavaScript / React / React Native / Firebase / Node.js / C Programming / Book Reader / Story Teller

More from Medium

Expo CLI vs React Native CLI

Hookstate Performance: Subscribing to single items in a collection

FlatList | React Native Component Explained

Creating pagination in react-native

React native pagination in FlatList