Implementing Deep linking in React native mobile apps

Muhsin K

Muhsin K

Published on

3 minute read

Learnings from implementing Deep linking in Chatwoot mobile apps

We live in a world where things are interlinked. We share links more frequently than ever before and want our customers to reach their desired pages swiftly, regardless of their platforms. Deep links could help significantly in enhancing this experience.

What is deep linking?

Deep linking enables a user to navigate to specific content in a mobile application using a URL.

Deep links are web links that can activate your app and contain information needed to load specific app sections. They can be used as triggers in external events like push notification, emails, web links etc.

They enable users to save more time and energy without locating a particular page by themselves – significantly improving the user experience.

Note: The "deep" refers to the depth of the page in a hierarchical app structure of pages.

Why deep linking?

Deeplinking enhances the user experience for mobile app users. Before implementing Deep linking In Chatwoot, a user on a mobile device clicking on a conversation link received via an email would be taken to the web browser, even if they have the Chatwoot app installed.

With deep linking, the Chatwoot app can open the conversation screen based on the id in the URL. Then, when the user clicks on a link, it will open the app, and the user is navigated to the exact point in the app where they are destined. This is a much better user experience.

How to implement Deep Linking?

Deep links can be implemented in ios and android by the following methods :

  • Custom URL scheme (iOS Universal Links)
  • Intent URL (Android)

Configuration for Android

Add an intent-filter in AndroidManifest.xml to specify the host link

<data android:scheme="https" android:host="http://app.chatwoot.com/" />

Then build the project. To test this action, run the following command in your terminal.

adb shell am start -W -a android.intent.action.VIEW -d "https://app.chatwoot.com/app/accounts/1/conversations/12121" com.chatwoot.app

Now the app will open up successfully if everything went well.

Configuration for iOS

Apple recommends Universal links as the way to open your web links in your mobile app.

To support universal linking in iOS, we need to add some configuration on the server-side as well. First, the endpoint must use HTTPS.

Your server has to have a route that is defined as a get request with the path /apple-app-site-association.. When a request is made to that path, you must return a file with the configuration recommended below.

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "<TeamID>.<Bundle-Identifier>",
                "paths": [ "NOT /super_admin/*", "*" ]
            }
        ]
    }
}

Implementation on the server-side

Apart from the configurations required in your mobile app, you would also need to implement some changes on your server for deep links to work for ios.

Here is an example implementation for a ruby on rails server.

routes.rb

get 'apple-app-site-association' => 'apple_app#site_association'

app/controllers/apple_controller.rb

class AppleController < ApplicationController
  def site_association
    site_association_json = render_to_string action: 'site_association', layout: false
    send_data site_association_json, filename: 'apple-app-site-association', type: 'application/json'
  end
end

app/views/appleapp/siteassociation.html.erb

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "<%= ENV['IOS_APP_ID'] %>",
                "paths": [ "NOT /super_admin/*", "*" ]
            }
        ]
    }
}

Find the implementation of Universal links in Chatwoot in this pull request.

Once your server endpoint is ready, Launch Xcode. Select the Signing & Capabilities tab and then select the enable Associated Domains and add domains. Make sure to prefix the domain with applinks: in place of https://

deeplinking-xcode

Find the implementation of Universal links in Chatwoot mobile app in this pull request.

Final Steps

Once our app is ready to handle deep Links, we need to implement actions to navigate the user to required screens. React native has Linking module, which will provide API that allows us to listen for an incoming linked url.

Linking gives you a general interface to interact with incoming app links. For example, if an app link triggered the app launch, it provides the link url. Otherwise, it will provide null. If we get the link url, it redirects to the exact screen based on the incoming URL.

useEffect(() => {
 // Get the deep link used to open the app
   const initialUrl = await Linking.getInitialURL();
 // Redirect to particualr screen based on inital url
   navigation.navigate('ChatScreen');
}, []);

Your mobile app should now be ready to handle deep links if you have followed the above instructions. Thank you for reading, and I hope you liked it. Please let us know if you have any doubts ;)