Open navigation menu
Close suggestions
Search
Search
en
Change Language
Upload
Sign in
Sign in
Download free for days
0 ratings
0% found this document useful (0 votes)
37 views
Deep Linking Your React Native App
Deep linking your react native app
Uploaded by
Cristhian Cruz
AI-enhanced title
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content,
claim it here
.
Available Formats
Download as PDF or read online on Scribd
Download now
Download
Save Deep linking your react native app For Later
Download
Save
Save Deep linking your react native app For Later
0%
0% found this document useful, undefined
0%
, undefined
Embed
Share
Print
Report
0 ratings
0% found this document useful (0 votes)
37 views
Deep Linking Your React Native App
Deep linking your react native app
Uploaded by
Cristhian Cruz
AI-enhanced title
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content,
claim it here
.
Available Formats
Download as PDF or read online on Scribd
Download now
Download
Save Deep linking your react native app For Later
Carousel Previous
Carousel Next
Save
Save Deep linking your react native app For Later
0%
0% found this document useful, undefined
0%
, undefined
Embed
Share
Print
Report
Download now
Download
You are on page 1
/ 16
Search
Fullscreen
suncas Dea Leng Your Rest Nate op by Gna aa Meson i jet started Gilshaan Jabbar = 29Followers About ) Sionin (cetstarsa) @O “This is your last free member-only story this month. Sign up for Medium and get an extra one Deep Linking Your React Native App In this post, Pll quickly walk through how to add deep linking to a React Native app for both iOS and Android using React Navigation. HOW TO HANDLEoa Ling Your eat Nate op by nan aoa Mesum REACT NATIVE, APP Deep Linking is a technique in which a given URL or resource is used to open a specific page or screen on mobile. So, instead of just launching the app on mobile, a deep link can lead a user to a specific page within the app, providing a better experience. This specific page or screen may reside under aseries of hierarchical pages, hence the term “deep” in deep linking. There are many cases where providing a url to transition a user to a specific point in your app on load makes a lot of sense. For example, say you have a person's profile, and you want to provide a link somewhere on the web or in another app, so that when the user clicks on a link, we not only open the app but also navigate to the exact point in the app that we want to go. This is what deep linking is, and this is what we will be walking through in this post. pugnan necimcarisep ekg ourencaaiveapp Stee aneseas oer er Re ae py Sta a den Linking will provide for us an API that will allow us to listen for an incoming linked url, and then we can handle the ur! like conponentDsdMount ()[ Linking. addBventiistener(turl', this.handleOpenURL) ; ) componentwillunnount (){ Linking. renoveEventListener(‘url', this-handledpenURL) ; ) handleopenvRL (event) { console. log (event uri}; const route ~ e,url.zeplace(/.#2:\/\ide 1) // do something with the url, in our case navigate (route) , When a user in an external app or website clicks on one of our links, we will open in our new app and navigate to the intended url: peopleapp: //people/0 Peopleapp: //psopie/1 peopleapp: //psople/2 teste pugnan necimcarisep ekg ourencaaiveapp Stee aeseas ep nn Yaa Nate hp an asin That will navigate to the people route, and then show a person based on the Let's get started by creating a new React Native app and adding react- navigation native init Peoplenep Once installed, cd into the new directory and install react-navigation using pm or yarn npn i vs ct-navigation or pugnan necimcarisep ekg ourencaaiveapp Stee anesucces oop Ling Your Nave Ap by nan aba Mtn Now that we have our app and some navigation, let’s create a router and two views: a home view and the people view. Now, let’s go into incex.ios.js / index.andvoid.js and import the router will will create next. 02.52 or index. android Registry } from ‘reac import | Apch import Router AppReg Router); “Peopleapp', Now, we'll go ahead and create the router. In router.j // router. js Inport React import AppReg from "react; pugnan necimcarisep ekg ourencaaiveapp Steeoop Ling Your Nave Ap by nan aba Mtn vrext, } from! ‘react-native'; import { StackNavigator } from 'react~navigation'; import Hons from *./hone'; Anport People from './people' const Router = StackWavigator(( Home: ( 2 Home People: 2 People }, De export default Router: Then, we'll create the Home component. In rome.5s import React from 'react"; import { Platform, Text, Linking } from ‘react-native';class Hone extends React.Component. | static navigationdptions = ( // A tle: "Home, he conponentDidount () ( // B if (Platform.0s === "android') { Linking. get InitialURI () .then (url this-navigate (ur); De b else { Linking.addtventhistener("url', this.handleopenvRL) ; > ' pignan nest caridep ekg oursencaaiv spp SScHee6succes oop Ling Your Nave Ap by nan aba Mtn componentwitlUnmount () ( // Linking. renoveRventListener ("url', this-hand!eQpenURi) : ' handleopenURL = (event) => { // D this.navigate(event.url) , navigate = (url) => ( // B const { navigate ) = this.props-navigation; const route = url.zeplace(/.*?:\/\//d, ')7 const id ~ route.mateh (/4/(C°\/14)\/28/) [11 const routeName ~ route.split('/") [0]; Af (routeNane “== "people') ( navigate ("People", { id, name: "chris? }} bh render () { return
7 n export default Home; ‘A. We declare atitle using static aavigationoptions for react-navigation to show a title when we are on this route. B. If we are on android, we immediately call the navigate method passing inthe ut . Ifwe are on iOS, We add an event listener to call nanateovent1 pugnan necimcarisep ekg ourencaaiveapp Stee meoop Ling Your Nave Ap by nan aba Mtn when an incoming link is detected. C.We delete the Linking listener on conponentwiiiveno. D. When handleOpenURL is called, we pass the event url to the navigate method. E, We first parse the url to get the id and route name. We then check to see ifthe route name is equal to peopte , and if so we navigate to the People component, passing the id as a prop. Now we can go to pecpie.is and create the component there that will be showing a person based on a route id. In peopie.is import React from 'react'; import { Text, In: people = { // A , View, Stylesheet } from ‘rea: ative! ;const "hetps //vignettel wikia nocookie .net/en. futurana/ images Leela.png/revision/lavest ?cb~20150218013044", ela, 4/4 /Tuxang pugnan necimcarisep ekg ourencaaiveapp Stee sesucces oop Ling Your Nave Ap by nan aba Mtn Le rane: "Bender", thetps: //vignet: png/revision/latest7cl » ‘sikia nocookie.net/en.futurana/images/4/43/Bender 0150206072725", 2 i amet "Bay", image: 'hetps://i.yting.con/vi/4sCtTq7K3yi/hadefault. ps" b a name: "Fry', image: "hetp: //www .supergrove..com/wp-content /uploads/2017/03/fry- futurana-22-which-robot-from-quot futuramaquet~are-you.jp3" , } clase People extends React.Component ( static navigationdptions = [ tle: 'People', Me render () ( const | id ) = this.props.navigation.state.params; // B Af (Ipeopielial)
Sorry, no data exists for this userreturn ( // ©
(people [id] .nane}
pignan nectmcaridep kn oursencaiveapp SSH neoop Ling Your Nave Ap by nan aba Mtn Jeonst styles = StyleSheet.create( A. We create a hardcoded object with some information about a few people, including only their name and image with a corresponding id key. B. We destructure the sa prop that we will be receiving. If no user exists for this id, we display a message. C. We use the ia to reference the correct person, displaying their image and name. Ok, now that we have all of our basic code set up, we now need to configure both iOS and Android to enable deep linking. Configuring iOS pugnan necimcarisep ekg ourencaaiveapp Stee seisucces oop Ling Your Nave Ap by nan aba Mtn Step 1. Add URL type to inso.plist 1. Open inso.piist and at the top of the file, create a new property called 2. Expand item 0 (zero) and choose URL Schemes. 3. Give item 0 the name you would like your app to be linkable as. In our case, Ichose pe as the name. pignan nectmcarisep ekg oursencaaiveappSScHee6succes oop Ling Your Nave Ap by nan aba Mtn ----> peopleapp will be what we use to identify the app. Once this identifier is set up, we will be able to reference it outside of the application in web browsers omeotherinfo/. < and other apps, like $0: peopieapp://soneur Step 2. Add the following code to apr Below last existing import add this import: janager b> fimport
*)opt cat ionopentRLoptionskt nkingNanager application:app openUR: options:options|; ) .egate.m should look something like this linked Github Now your final »; gist. pignan nectmcaridep kn ourene avg Steeseas ep nn Yaa Nate hp an asin Now we should be able to open up safari or chrome and pass in the following url: And the app should redirect on load to the correct route, showing the correct person's info! punan nectmcaridep ekg ourenc avg SScHee6 saesucces Dea Leng Your React Nate op by lana aba Meson Configuring Android First, we need to open our Manifest file and add the app name we will want to be referencing, in our case peopieape In enaroid/app/sre/nain Open Androscttans test xn and add the following intent filter below the last intent filter already listed, within the
tag: wtent-filter android:label="filter_rea: ‘tion android:name="android. intent a tegory android:nane: intent tegory android:nane: intent android: schene: Here is an idea of how your androidanitext.xni should now look. pugnan necimcarisep ekg ourencaaiveapp Stee ieseas ep Un YR Nate hp an ba Msn The
tag specifies the URL scheme which resolves to the activity in which the intent filter has been added. In this example the intent filter accepts URIs that begin with peopieapp://pcopie . To learn more about this configuration, check out this documentation. That is all we need as far as configuration goes. To test this out, open Android Studio, Open Run -> Edit Configurations and change the launch options to URL, passing in the following url: peopieapp: //peoe pignan nectmcaridep ekg oursencaiveappSScHee6 si8succes oop Ling Your Nave Ap by nan aba Mtn Now when we run the app, we should see Bender! ‘The final code for this example can be found here, ReactNatve React Nate Developers React Programming React pugnan necimcarisep ekg ourencaaiveapp Stee see
You might also like
Chapter-5 React Native API, HTTP, Navigation, and Storage
PDF
No ratings yet
Chapter-5 React Native API, HTTP, Navigation, and Storage
57 pages
Presentation
PDF
No ratings yet
Presentation
41 pages
Lecture # 18 - React Native Navigations: by Dr. Sidra Sultana
PDF
No ratings yet
Lecture # 18 - React Native Navigations: by Dr. Sidra Sultana
53 pages
React Router
PDF
No ratings yet
React Router
13 pages
Stacknavigation
PDF
No ratings yet
Stacknavigation
39 pages
UberPresentation PDF
PDF
No ratings yet
UberPresentation PDF
122 pages
Crud React
PDF
No ratings yet
Crud React
33 pages
React Navigation PDF
PDF
No ratings yet
React Navigation PDF
35 pages
ReactRouter-Redux-API
PDF
No ratings yet
ReactRouter-Redux-API
89 pages
Reaacttt Native w9
PDF
No ratings yet
Reaacttt Native w9
27 pages
How To Use React Router in Your Application
PDF
No ratings yet
How To Use React Router in Your Application
5 pages
Web Age Technology Webinar Series: Routing and Navigation With React-Router
PDF
No ratings yet
Web Age Technology Webinar Series: Routing and Navigation With React-Router
25 pages
Navigation: Brent Vatne & Eric Vicenti
PDF
No ratings yet
Navigation: Brent Vatne & Eric Vicenti
47 pages
lecture7
PDF
No ratings yet
lecture7
28 pages
ReactJS - React Router, Route With Parameters, Child Routes 1
PDF
No ratings yet
ReactJS - React Router, Route With Parameters, Child Routes 1
42 pages
React Native
PDF
0% (2)
React Native
100 pages
Mobile Technologies C5
PDF
No ratings yet
Mobile Technologies C5
41 pages
react_notes
PDF
No ratings yet
react_notes
12 pages
L1 ReactNativeIntroduction
PDF
No ratings yet
L1 ReactNativeIntroduction
70 pages
React router
PDF
No ratings yet
React router
5 pages
React task
PDF
No ratings yet
React task
19 pages
React Native
PDF
No ratings yet
React Native
4 pages
Unit 4_ Routing and State Management
PDF
No ratings yet
Unit 4_ Routing and State Management
28 pages
Advance Web Assignment 1 To 8
PDF
No ratings yet
Advance Web Assignment 1 To 8
7 pages
Lap-Trinh-Tren-Thiet-Bi-Di-Dong - L1-Reactnativeintroduction - (Cuuduongthancong - Com)
PDF
No ratings yet
Lap-Trinh-Tren-Thiet-Bi-Di-Dong - L1-Reactnativeintroduction - (Cuuduongthancong - Com)
69 pages
Mobile App Development
PDF
No ratings yet
Mobile App Development
3 pages
Single Page Applications
PDF
No ratings yet
Single Page Applications
30 pages
Amazon Clone Using React: Objective
PDF
No ratings yet
Amazon Clone Using React: Objective
19 pages
Getting Started With React Native - Sample Chapter
PDF
50% (2)
Getting Started With React Native - Sample Chapter
32 pages
Get Started With React Native 3
PDF
No ratings yet
Get Started With React Native 3
12 pages
Exploring Cross-Platform Development Wit
PDF
No ratings yet
Exploring Cross-Platform Development Wit
98 pages
React Navigation - Example
PDF
No ratings yet
React Navigation - Example
15 pages
Chapter Four - More On React Native Components
PDF
No ratings yet
Chapter Four - More On React Native Components
42 pages
React Router
PDF
No ratings yet
React Router
6 pages
ppt
PDF
No ratings yet
ppt
12 pages
Routing
PDF
No ratings yet
Routing
23 pages
CIT-5104-Lesson-4-REACTIVE NATIVE
PDF
No ratings yet
CIT-5104-Lesson-4-REACTIVE NATIVE
56 pages
79bbcebb1195e1535ccab9efb2f822fe
PDF
No ratings yet
79bbcebb1195e1535ccab9efb2f822fe
4 pages
Ahmed 70076068 T1
PDF
No ratings yet
Ahmed 70076068 T1
7 pages
Blog Contant
PDF
No ratings yet
Blog Contant
57 pages
20 HHGGG
PDF
No ratings yet
20 HHGGG
14 pages
Dcit 202-Mobile Application Development: Session 4 - Interaction
PDF
No ratings yet
Dcit 202-Mobile Application Development: Session 4 - Interaction
19 pages
Beginning Mobile App Development PDF
PDF
100% (2)
Beginning Mobile App Development PDF
99 pages
FrontEnd Development 11
PDF
No ratings yet
FrontEnd Development 11
42 pages
Introduction To React Native
PDF
No ratings yet
Introduction To React Native
9 pages
Lecture 4 A
PDF
No ratings yet
Lecture 4 A
32 pages
Free Chapter React Native Wordpress API Ebook
PDF
No ratings yet
Free Chapter React Native Wordpress API Ebook
23 pages
asasdasdasdas
PDF
No ratings yet
asasdasdasdas
3 pages
11 Introduction to React Native
PDF
No ratings yet
11 Introduction to React Native
10 pages
React Router: Jogesh K. Muppala
PDF
No ratings yet
React Router: Jogesh K. Muppala
5 pages
React-Native-Building-Mobile-Apps
PDF
No ratings yet
React-Native-Building-Mobile-Apps
8 pages
Create React Native Firebase CRUD App With Firestore
PDF
No ratings yet
Create React Native Firebase CRUD App With Firestore
28 pages
Chapter 1: Understanding Why React Native Is The Future of Mobile Apps
PDF
No ratings yet
Chapter 1: Understanding Why React Native Is The Future of Mobile Apps
3 pages
Unit 6 - React Native With Android
PDF
No ratings yet
Unit 6 - React Native With Android
80 pages
React 5 Router Dom
PDF
No ratings yet
React 5 Router Dom
17 pages
React Native Guide
PDF
100% (1)
React Native Guide
31 pages
React Native Basics
PDF
No ratings yet
React Native Basics
3 pages
WE Lab Assignment 2
PDF
No ratings yet
WE Lab Assignment 2
6 pages
Labereco
PDF
No ratings yet
Labereco
44 pages
Clean Up Redux Code With React-Redux Hooks PDF
PDF
No ratings yet
Clean Up Redux Code With React-Redux Hooks PDF
10 pages
5 Ways To Animate A React App PDF
PDF
No ratings yet
5 Ways To Animate A React App PDF
33 pages
Don't Use Async Redux Middleware PDF
PDF
No ratings yet
Don't Use Async Redux Middleware PDF
2 pages
How To Set Up User Authentication Using React, Redux, and Redux Saga
PDF
No ratings yet
How To Set Up User Authentication Using React, Redux, and Redux Saga
20 pages
My Awesome React Redux Structure PDF
PDF
No ratings yet
My Awesome React Redux Structure PDF
26 pages
Flutter Vs Native Vs React-Native Examining Performance PDF
PDF
No ratings yet
Flutter Vs Native Vs React-Native Examining Performance PDF
2 pages
My Awesome React Redux Structure PDF
PDF
No ratings yet
My Awesome React Redux Structure PDF
26 pages
Clean Up Redux Code With React-Redux Hooks
PDF
No ratings yet
Clean Up Redux Code With React-Redux Hooks
10 pages
9 Web Components UI Libraries You Should Know in 2019
PDF
0% (1)
9 Web Components UI Libraries You Should Know in 2019
12 pages
React Redux Saga Example App. - Ron Lavit
PDF
No ratings yet
React Redux Saga Example App. - Ron Lavit
8 pages
The Complete Guide To Create Your First Mobile App With React Native and Redux Sagas - Part 1
PDF
No ratings yet
The Complete Guide To Create Your First Mobile App With React Native and Redux Sagas - Part 1
10 pages
Building A React Native JWT Client - API Requests and AsyncStorage
PDF
No ratings yet
Building A React Native JWT Client - API Requests and AsyncStorage
24 pages
React Redux Saga Example App. - Ron Lavit
PDF
No ratings yet
React Redux Saga Example App. - Ron Lavit
8 pages