Enable dialog to ask go with app or browser while clicking the link using Linking in React Native

Introduction

We will see how to enable dialog popover when clicking the application link outside the application.

Linking:

Linking gives you a general interface to interact with both incoming and outgoing app links.

To know more about linking https://reactnative.dev/docs/linking

Deep Links

on mobile you want that link open your app, Android calls it Deep Links (Universal Links — iOS).

There are two ways to handle URLs that open your app.

1. If the app is already open, the app is foregrounded and a Linking ‘url’ event is fired

You can handle these events with Linking.addEventListener(‘url’, callback) — it calls callback({url}) with the linked URL

2. If the app is not already open, it is opened and the url is passed in as the initialURL

You can handle these events with Linking.getInitialURL() — it returns a Promise that resolves to the URL, if there is one.

For Android:

Locate the AndroidManifest.xml file in your React Native project. It’s typically located in the android/app/src/main directory.

In your React Native app, set up custom URL schemes for your app. This allows your app to be associated with specific URLs. To do this, you’ll need to modify the app’s AndroidManifest.xml (for Android) and Info.plist (for iOS).

2. Add an Intent Filter for Your Deep Link URL: Inside the <activity> element for your main activity, add an <intent-filter> element to specify the deep link URL you want to handle. The <intent-filter> should include an <action> and a <category> for the DEFAULT category:

 <intent-filter android:label="@string/app_name"  android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "http://www.example.com/gizmos” -->
        <data android:scheme="https"
              android:host="medium.com"
              />
             
        <!-- note that the leading "/" is required for pathPrefix-->
    </intent-filter>
3. Save the Manifest File:
4. Save the changes to the AndroidManifest.xml file.
5. Rebuild Your Android App:
Note:
android:autoVerify=”true” should be true
android:schema should be http/https
host should be domain
consider https://medium.com
https -> schema
medium.com ->host
4. Each and every changes need to rebuild the app
Now, Get an application by email. Go to email and click the link. 
Now it will detect the domain and show a dialog popover as over with the app or browser. 
Continue with the app, it will redirect you to the application even if the application is 
closed.
But now it’s redirected to only app not into particular module.
 For Examble, https:medium.com/profile When i’m opening the link it should open the app
 and redirect to profile module. For archiving this , use Linking Eventlistener 
import { Linking } from 'react-native';

  useEffect(() => {
    console.log('Received deep link: usseeeee');
 
    const handleDeepLink = async () => {
      const url = await Linking.getInitialURL();
 
      if (url) {
        // Handle the deep link URL here
        console.log('Received deep link:', url);
        if(url.includes('tasks/myTasks/')){
          // const regex = /\/tasks\/myTasks\/([^?]+)\?uuid=([^&]+)/;
          const regex = /\/profile\/([^?]+)/;
   
          // Use the regex pattern to extract the id and uuid
          const match = url.match(regex);
          console.log('match',match);
         
          if (match) {
           //navication 
          } else {
            console.log('URL does not match the pattern.');
          }
   
        }
      }
    };
 
    // Add an event listener for deep linking
    Linking.addEventListener('url', handleDeepLink);
 
   
    // This will run when the component mounts, and also when the app is resumed.
      const onResume = () => {
        console.log('Received onresume----',Linking);
        Linking.getInitialURL().then((url) => {
        console.log('Received onresume----url',url);


          if (url) {
            handleDeepLink(url);
          }
        })
      };


      // Add an event listener to handle deep links when the app is resumed.
      AppState.addEventListener('change', (nextAppState) => {
        console.log('Received deep----',nextAppState);
       
        if (nextAppState === 'active') {
          onResume();
        }
      });


      // Call onResume when the component initially mounts.
      onResume();
    // Clean up the event listener when the component unmounts
    return () => {
      (Linking as any).removeEventListener('url', handleDeepLink);
    };
  }, []);
It will work for both background and closed state of application.
The above things are only for Android applications. Hope this information is useful. Thank you for reading until the end. Please consider following the writer and this publication.
Reference Link:
https://reactnative.dev/docs/linking
https://developer.android.com/training/app-links#deep-links
https://developers.google.com/digital-asset-links/v1/getting-started
https://developers.google.com/digital-asset-links/v1/create-statement
https://developer.android.com/guide/topics/manifest/activity-element
https://medium.com/wolox/ios-deep-linking-url-scheme-vs-universal-links-50abd3802f97
https://reactnavigation.org/docs/deep-linking/#universal-links
https://saadibrah.im/implement-deep-linking-in-react-native-apps-using-universal-links-and-url-schema/
https://www.youtube.com/watch?v=rvDq2WMU4mw

Search

Insight's