Force Android App Link to open in browser

Question

We have a React Native app which shows our mobile website and adds some extra features.

Since Android 12 App links (like domain.com) always open our app: https://developer.android.com/training/app-links

This behaviour is not always desirable, for example in this scenario:

1. Customer is logged in and starts an order via their browser
2. Customer needs to pay via an app from their bank
3. After payment, the customer is redirected back to our website (domain.com/returnUrl)

Now the app is opened, instead of the browser, so the customer isn't logged-in and isn't allowed to view the page.

In this case, after payment started from the browser, we would like to redirect the customer back to the browser instead of the app.

Is there a way to open a link in the browser (ie. via domain.com/returnUrl?force-browser) instead of the app?

Related: Android App link - Open a url from app in browser without triggering App Link

Answer 1

The best possible solution for that can be using android:pathPattern in android manifest. Basically you have to provide path pattern (a sort regex) to match the valid links.

Documentation for that can be found here. https://developer.android.com/guide/topics/manifest/data-element

Answer 2

Based on this answer, I've created a RN Native Module and instead of using await Linking.openURL(url) you can just use the Native Module's exposed method to open Android App links.

I've followed the official RN tutorial to make an Android Native Module.

So in summary, first you will have to create a Java class file inside android/app/src/main/java/com/your-app-name/folder. I've named the module DefaultBrowserModule so the path is src/main/java/com/your-app-name/DefaultBrowserModule.java. Here's how it looks like:

package com.your-app-name;

import android.content.Intent;
import android.net.Uri;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class DefaultBrowserModule extends ReactContextBaseJavaModule {
    private ReactApplicationContext _context;

    DefaultBrowserModule(ReactApplicationContext context) {
        super(context);
        this._context = context;
    }

    @NonNull
    @Override
    public String getName() {
        return "DefaultBrowserModule";
    }

    // This is the method that we're exposing
    @ReactMethod
    public void openUrl(String url) {
        Intent defaultBrowser = Intent.makeMainSelectorActivity(Intent.ACTION_MAIN, Intent.CATEGORY_APP_BROWSER);
        defaultBrowser.setData(Uri.parse(url));
        // Through ReactApplicationContext's current activty, start a new activity
        this._context.getCurrentActivity().startActivity(defaultBrowser);
    }
}

After that we'll have to register the module with React Native. That can be done by adding a new Java class file to the android/app/src/main/java/com/your-app-name/ folder. I've named mine DefaultBrowserPackage: src/main/java/com/your-app-name/DefaultBrowserPackage.java:

package com.your-app-name;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class DefaultBrowserPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new DefaultBrowserModule(reactContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

The last step is to register the DefaultBrowserPackage inside of MainApplication.java (android/app/src/main/java/com/your-app-name/MainApplication.java). Locate ReactNativeHost’s getPackages() method and add your package to the packages list

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // below DefaultBrowserPackage is added to the list of packages returned
  packages.add(new DefaultBrowserPackage());
  return packages;
}

Now we are ready to use it inside of JS. So wherever you want to use it, you can do it like this:

import { Linking, NativeModules, Platform } from 'react-native';

// DefaultBrowserModule should be equal to the return value of the getName() method
// inside of the src/main/java/com/your-app-name/DefaultBrowserModule.java class
const { DefaultBrowserModule } = NativeModules;

export const openUrl = async (url) => {
  if (Platform.OS === 'android') {
    DefaultBrowserModule.openUrl(url);
  } else {
    await Linking.openURL(url);
  }
};

// And then use it like this
await openUrl('https://my-app-link-domain.com');

Answer 3

Deep and universal linking happens on the operating level and it's hard to control the behavior of other app linking I think it should security breach as some apps try to override the deep link behaviors of another app.

Try to create your simple page with your custom URL https://my-domain.com which redirect to tour target URL without opening associated app.