React Native for React Developers [Part 8: Navigation: Deep Links]

#reactnative #sharingiscaring #KinCarta #WorkingBetter #ForEveryone

Introduction

Now we are going to take a look at one nice feature that we can add to our app which is called deep links.

Deep linking allows users to access specific pages, products, or actions within an app directly from a link, rather than having to navigate through the app to find the content. This can make the user experience more seamless, as users are taken directly to the content they are looking for.

Deep links can also be used to personalize the user experience by pre-filling forms or automatically logging users into the app.

Deep linking can also be used for marketing and advertising purposes, such as by allowing advertisers to direct users to a specific page within an app to encourage them to make a purchase or by allowing app developers to track user behavior within the app.

Deep links can be used within apps or across different apps, which means that a user can be directed to a specific location within an app even if they were not previously using that app.

Deep linking can be implemented using various technologies, such as Universal Linking (iOS), App Link (Android) and URI Schemes.

Universal Linking (iOS) is a feature that allows developers to associate their website with their iOS app, so that when a user taps a link to the website on an iOS device, the corresponding page in the app will open instead of the website. This allows for a seamless user experience, as users are taken directly to the content they are looking for within the app.

App Link (Android) is similar to Universal Linking, but for Android devices. It allows developers to associate their website with their Android app, so that when a user taps a link to the website on an Android device, the corresponding page in the app will open instead of the website.

URI Schemes are a way to launch an app using a specific URL format. By using a specific URL format, an app can be launched and directed to a specific location within the app. For example, the URL "myapp://product/1234" could open the "My App" app and take the user directly to the product page for product 1234.

Deep links can also be used in push notifications, email and social media campaigns. By including a deep link in a notification or email, users can be directed to a specific location within an app, even if the app is not currently running on their device.

In summary, deep linking is a powerful tool that allows users to access specific pages, products, or actions within an app directly from a link, and also allows developers to track user behavior, personalize the user experience and to use it for marketing and advertising purposes. It can be implemented using various technologies such as Universal Linking (iOS), App Link (Android) and URI Schemes.

Setup

Now we are going to follow the React Navigation guide for implementing deep links which can be found here.

Basically our idea is to open our app and some specific screen and maybe pass some data which can be used on that screen, same like we do it on the web, for example on our website we can have some url like this https://www.example.com/details/?itemId=123 and in our code we can pick up the query string “?itemId=123” and we can use that itemId and its value on our details page.

The idea with the deep links its the same, we want to have a custom “protocol” (URI scheme) and we can name it whatever we want, and for our example we will use “melonapp://” and use that to access our app, for example we can put this link on some website “myapp://details/?ItemId=123” and if we click on that link from our phone, our app will open to the details screen and we can access the itemId we have passed in the deep link and show it on the screen.

iOS

So let's start. If we follow the documentation, it says that first we need to make some changes in the ios project.

Open the AppDelegate.mm with VsCode or xCode and first import RCTLinkingManager.h (make sure you put it before “#if RCT_NEW_ARCH_ENABLED” or your app won't build):

And add this peace of code at the end of the file, before the @end:

// Add this inside `@implementation AppDelegate` above `@end`:
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}        

Next we need to add our custom uri-scheme, so we can either do it manually from xcode, or from the terminal, and in our case I will use the terminal. To do that, execute the following command from the root of our project:

npx uri-scheme add melonapp --ios        

To test if everything works we can run the following command from our terminal:

npx uri-scheme open melonapp:// --ios        

If you have done everything right the popup will appear to open the link into your app, or the app will start automatically.

Android

To setup the deep link for android, simply run the following command from the root of our project:

npx uri-scheme add melonapp --android        

And now if you run the following command the app should start:

npx uri-scheme open melonapp:// --android        

You can also add this link to a note or a contact on your device (ios/android) or the simulator, and when you click on that link the app should start, but have in mind that if you type the link in the browser it won't work, it only work if the link is clicked and handled by the OS.

Implementation

For this example we will add two deep links, one which we can use to go to the settings screen, and one for the details screen on which we will pass the itemId.

First we need to add some configuration for our deep links:

const config = {
?screens: {
???Home: {
?????screens: {
???????Settings: 'settings',
?????},
???},
???Details: 'details/:itemId',
?},
};

const linking = {
?prefixes: ['melonapp://'],
?config,
};        

In our config object we have our routes configured, and since our Setting screen is a screen from a nested navigation in our Home screen, first we need to add the Home screen and inside its screens we add the Settings. Have in mind that the property names in this object (“Home” and “Settings” must be exactly the same as the name property of the actual screen in the navigation).

To add a parameter in our deep link we use SCREEN/:PARAMETER_NAME, or in our case we want to pass itemId to our details screen or in our case “melonapp://details/123” and in our code we will have the item ide under route.params.itemId.

As a final part we add the linking object as a part to our NavigationContainer and we are done:

<NavigationContainer linking={linking}>        

Now if we execute the following command from the terminal:

npx uri-scheme open melonapp://settings --ios        

The setting screen will open in our app, and if we execute the following one:

npx uri-scheme open melonapp://details/1414 --ios        

The details screen will open and we will have the 1414 value printed in its place.

React Native for React Developers [Part 1: React Native and the new Architecture]

React Native for React Developers [Part 2: React Native CLI vs Expo]

React Native for React Developers [Part 3: Setting up Dev Environment]

React Native for React Developers [Part 4: xCode and Android Studio]

React Native for React Developers [Part 5: Core Components, Styling, Platform Specific Code, Permissions and Custom Fonts]

React Native for React Developers [Part 6: Navigation: Stack Navigation]

React Native for React Developers [Part 7: Navigation: Bottom Tab Navigation]

React Native for React Developers [Part 8: Navigation: Deep Links]

React Native for React Developers [Part 9: Push Notifications: iOS]

React Native for React Developers [Part 10: Push Notifications: Android]