How to use "deeplink" to land user to a particular app page?

This page describes one of the approaches of handling deep links in your app. It uses references to Example app, to configure it for your applicationCode use How to start Example app.

• How to send deep link over push message
• Example of the code implementation

How to send deep link over push message

First you will need to identify the schema for your deep link, usually it is reverse DNS notation: com.infobip.mobilemessaging://deeplink/. And also define screens that you want to open as part of deep link such as testDeeplinkingScreen, testDeeplinkingScreen2. And then it will be possible to send deep link over push message and to handle notificationTapped event.

To send message with deeplink parameter you can use Portal or HTTP API, ask your account manager in case of further questions. For our example deep link parameter will be following com.infobip.mobilemessaging://deeplink/testDeeplinkingScreen/testDeeplinkingScreen2

Example of the code implementation

Create screens, which will be opened by the deeplink

In the Example app 2 simple screens for deeplink testing created, you can check them: testDeeplinkingScreen.js, testDeeplinkingScreen2.js These screens are added to the NavigationStack in App.js

    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen name="Home" component={HomeScreen}/>
                    <Stack.Screen name={'TestDeeplinkingScreen'} component={TestDeeplinkingScreen}/>
                    <Stack.Screen name={'TestDeeplinkingScreen2'} component={TestDeeplinkingScreen2}/>
                 </Stack.Navigator>
            </NavigationContainer>
        );
    }

Implement deeplinks handling method

In the Example app handleDeeplinkEvent method is implemented in homeScreen.js. For parsing url properly react-native-url-polyfill dependency was added.

    handleDeeplinkEvent = (deeplinkUrl) => {
        //taking not empty path segments from Url
        let pathSegments = new URL(deeplinkUrl).pathname.split('/').filter(Boolean);
        for (let pathSegment of pathSegments) {
            //opening of the concrete screen, using react native Navigation
            this.props.navigation.navigate(pathSegment);
        }
    };

Handle deeplink on notificationTapped event.

        mobileMessaging.register("notificationTapped", (eventData) => {
            if (!eventData[0].deeplink) {
                return;
            }
            this.handleDeeplinkEvent(eventData[0].deeplink);
        });

Don't forget to unregister from notificationTapped event on componentWillUnmount() method.

       mobileMessaging.unregister("notificationTapped", this.handleNotificationTappedEvent);

Handle application opening by the deeplink

React Native's Linking library is used, check its documentation for additional information.

Register iOS application for custom URL scheme as described here

In provided example iOS application is registered for com.infobip.mobilemessaging scheme. Check project by opening Example.xcworkspace in Xcode, other changes are in AppDelegate.mm

Register Android application for custom URL scheme as described here

In provided example Android application is registered for com.infobip.mobilemessaging scheme. Check it by opening AndroidManifest.xml

Handle deeplink on events

To handle deeplink if application is already opened call handleDeeplinkEvent as callback for Linking.addEventListener('url', callback)

Linking.addEventListener('url', (initialUrlDict) => {
            this.handleDeeplinkEvent(initialUrlDict.url);
        });

To handle deeplink if application isn't opened use Linking.getInitialURL() method.

        Linking.getInitialURL().then((initialUrl) => {
            if (!initialUrl) {
                return;
            }
            this.handleDeeplinkEvent(initialUrl);
        }).catch(error => {
            console.log('Initial URL is not provided');
        })

Full source code can be found in example application. It can be tested for Android by calling from command line following code:

adb shell am start -a android.intent.action.VIEW -d "com.infobip.mobilemessaging://deeplink/TestDeeplinkingScreen/TestDeeplinkingScreen2" com.example

for iOS just open link com.infobip.mobilemessaging://deeplink/TestDeeplinkingScreen/TestDeeplinkingScreen2 in a browser.