Android 11+ issue with package visibility

[giovanni-caiazzo]

Hi,
Thank you for making this repo. It is working on iOS and Android 10 and lower. Unfortunately it is not working on Android 11+ because they introduced package visibility and so if you don't add WalletConnect app visibility in the android manifest the app will not be able to see that any wallet app is installed in the phone and it will redirect to the browser.
See here for details.
Basically with Expo Managed you can't put this code in AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">
    [...]

    <queries>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="http"/>
      </intent>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="https"/>
      </intent>
    </queries>
</manifest>

If you have any idea on what to do it would help me a lot. I would prefer not ejecting, but that seems the only possibility right now...

[joshuacue]

Hi, Thank you for making this repo. It is working on iOS and Android 10 and lower. Unfortunately it is not working on Android 11+ because they introduced package visibility and so if you don't add WalletConnect app visibility in the android manifest the app will not be able to see that any wallet app is installed in the phone and it will redirect to the browser. See here for details. Basically with Expo Managed you can't put this code in AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">
    [...]

    <queries>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="http"/>
      </intent>
      <intent>
          <action android:name="android.intent.action.VIEW" />
          <data android:scheme="https"/>
      </intent>
    </queries>
</manifest>

If you have any idea on what to do it would help me a lot. I would prefer not ejecting, but that seems the only possibility right now...

I was able to create customize AndroidManifest.xml with the use of plugin, and watching this file -- the built path is android/app/src/main/AndroidManifest/xml:

Then here is hows my plugin and what other related files look like:

1. In project root, create a new file app.plugin.js file

const { withAndroidManifest } = require('@expo/config-plugins')

module.exports = function withMyCustomConfig(config) {
  return withAndroidManifest(config, async config => {
    // Modifiers can be async, but try to keep them fast.
    config.modResults = await setCustomConfigAsync(config, config.modResults);
    return config;
  });
};

// Splitting this function out of the mod makes it easier to test.
async function setCustomConfigAsync(
  config,
  androidManifest
){
  //this came from the first generated AndroidManifest.xml  name, which is also your app name
  const myAppName = "com.xxxx.xxxx"
  const rest = androidManifest.manifest
  
  return {
    manifest: {
      ...rest,
      $: {
        "xmlns:android": "http://schemas.android.com/apk/res/android",
        "package": myAppName
      },
      queries: [
        ...rest.queries,
        {
            intent:[{
              action: { 
                $: {
                  "android:name": "android.intent.action.VIEW",
                },
              },
              data: {
                $: {
                  "android:scheme": "http"
                }
              }
            },
            {
              action: { 
                $: {
                  "android:name": "android.intent.action.VIEW",
                },
              },
              data: {
                $: {
                  "android:scheme": "https"
                }
              }
            }
          ],
        }
      ]
    }
  };
}

2. add this file as plugins inside app.json:

  expo: {
     "plugins": ["./app.plugin"], //this line
  }

3. and this is my metro.config.js

const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
module.exports = {
  resolver: {
    extraNodeModules: require("expo-crypto-polyfills"),
    sourceExts: [...defaultResolver.sourceExts, "cjs"],
  }
}

4. and finally do expo prebuild.

Note: Delete android and ios build folders before running another expo prebuild.