I recently came across this situation where I had to deep link an app in React Native. After googling a lot, I realised that there’s a lack of up-to-date tutorials out there. So as I had a bunch of issues trying to figure this out I decided to write something on that subject.

So the point here is to create a link that should led us directly to our app and also be able to takes us to some specific section inside of it. For example, if you want to share some content on the app, all you’ll have to do is to share a link that should be something like nameapp://post/{id}.So that link should open the app and navigate us to some specific post inside our app, that’s our goal.

I’d like to take as reference the article written by Nader Dabit that helped me a lot to build my own deep link. Now let’s write an updated version using React Hooks, functional components and all that new good stuff.

First of all we create a new RN project, at the moment I write this article the latest stable version is 0.62.2.

npx react-native init DeepLink --version 0.62.2

Once the project is created lets install react-navigation package to handle our navigation. As we are using version 5.x we have to install it as follows:

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
npx pod-install ios

Add this line at the very top of your entry file (index.js or App.js) to initialise the package:

import 'react-native-gesture-handler';

Now the project is ready to go. if you’re getting any issue installing the package please check react navigation docs. Now we go ahead and create Home.js and **Post.js **files. Let’s start by our routing at App.js file by creating a simple navigation stack and importing the files we just created.

#mobile-app-development #react-hook #javascript #deep-linking #react-native #react