Android keeps killing the custom browser tab when the app is inactive

[namti]

Which platform(s) does your issue occur on?

• Android
• Android versions: 11
• Device: Galaxy A20,

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.0.4
• Plugin(s):

  {
  "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^6.2.0",
      "@fortawesome/pro-duotone-svg-icons": "^6.2.0",
      "@fortawesome/pro-light-svg-icons": "^6.2.0",
      "@fortawesome/pro-regular-svg-icons": "^6.2.0",
      "@fortawesome/pro-solid-svg-icons": "^6.2.0",
      "@fortawesome/pro-thin-svg-icons": "^6.2.0",
      "@fortawesome/react-native-fontawesome": "^0.3.0",
      "@gorhom/bottom-sheet": "^4.4.4",
      "@react-native-async-storage/async-storage": "~1.17.3",
      "@react-native-community/art": "^1.2.0",
      "@react-native-community/blur": "^4.2.0",
      "@react-native-community/cli-platform-android": "^6.2.0",
      "@react-native-community/cli-platform-ios": "^6.2.0",
      "@react-native-community/masked-view": "^0.1.10",
      "@react-native-firebase/analytics": "^14.1.0",
      "@react-native-firebase/app": "^14.1.0",
      "@react-native-firebase/crashlytics": "^14.1.0",
      "@react-native-firebase/messaging": "^14.1.0",
      "@react-navigation/bottom-tabs": "^6.4.0",
      "@react-navigation/devtools": "^6.0.10",
      "@react-navigation/native": "^6.0.13",
      "@react-navigation/stack": "^6.3.1",
      "@shopify/flash-list": "^1.2.2",
      "axios": "^0.21.1",
      "base-64": "^1.0.0",
      "buffer": "^6.0.3",
      "colord": "^2.9.3",
      "date-format": "^3.0.0",
      "expo": "^45.0.0",
      "expo-blur": "~11.1.0",
      "expo-haptics": "^11.3.0",
      "expo-linear-gradient": "^11.4.0",
      "expo-secure-store": "~11.2.0",
      "expo-splash-screen": "~0.15.1",
      "expo-status-bar": "^1.4.0",
      "expo-updates": "~0.13.4",
      "expo-web-browser": "~10.2.1",
      "innertext": "^1.0.3",
      "lodash": "^4.17.21",
      "md5": "^2.3.0",
      "moment": "^2.29.1",
      "prop-types": "^15.8.1",
      "public-ip": "^4.0.4",
      "randomid": "^1.1.0",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "react-native": "0.68.2",
      "react-native-add-calendar-event": "^4.0.0",
      "react-native-auto-scrolling": "^2.2.1",
      "react-native-barcode-builder": "^2.0.0",
      "react-native-calendars": "^1.1264.0",
      "react-native-confirmation-code-field": "^7.1.0",
      "react-native-copilot": "^2.5.1",
      "react-native-crisp-chat-sdk": "^0.11.0",
      "react-native-device-info": "^8.4.9",
      "react-native-fast-image": "^8.6.3",
      "react-native-gesture-handler": "^2.3.0",
      "react-native-in-app-review": "^4.1.1",
      "react-native-inappbrowser-reborn": "^3.7.0",
      "react-native-pell-rich-editor": "^1.8.8",
      "react-native-reanimated": "^2.10.0",
      "react-native-render-html": "^6.3.4",
      "react-native-safe-area-context": "4.2.4",
      "react-native-screens": "~3.11.1",
      "react-native-send-intent": "^1.3.0",
      "react-native-snap-carousel": "^3.9.1",
      "react-native-sound-player": "^0.13.2",
      "react-native-status-bar-height": "^2.6.0",
      "react-native-svg": "12.3.0",
      "react-native-svg-transformer": "^0.14.3",
      "react-native-svg-uri": "^0.0.1",
      "react-native-system-navigation-bar": "^2.0.0",
      "react-native-url-polyfill": "^1.3.0",
      "react-native-vision-camera": "^2.15.2",
      "react-native-web": "0.17.7",
      "react-native-webview": "^11.18.2",
      "react-redux": "^7.2.2",
      "redux": "^4.0.5",
      "redux-flipper": "^2.0.2",
      "redux-persist": "^6.0.0",
      "redux-thunk": "^2.3.0",
      "rn-fade-carousel": "^1.0.0",
      "vision-camera-code-scanner": "^0.2.0",
      "xdate": "^0.8.2"
  },
  "devDependencies": {
      "@babel/core": "^7.12.9",
      "@rnx-kit/dep-check": "^1.13.0",
      "babel-jest": "~25.2.6",
      "jest": "^26.6.3",
      "metro-react-native-babel-preset": "^0.72.3",
      "metro-react-native-babel-transformer": "^0.72.2",
      "react-native-clean-project": "^3.6.4",
      "react-native-dotenv": "^3.2.0",
      "react-native-flipper": "^0.146.0",
      "react-native-gradle-plugin": "^0.0.7",
      "react-test-renderer": "17.0.2",
      "redux-devtools-extension": "^2.13.9"
  }
  }

Please, tell us how to recreate the issue in as much detail as possible.

I use openAuth to open the sign-in page. Users need to switch to the email app to get a code then come back to the app to paste the code. When switch back to the app, the opened custom browser tab closed.

Is there any code involved?

InAppBrowser.openAuth('https://auth.example.com', 'exampleapp://auth', {
  // iOS Properties
  ephemeralWebSession: false,
  // Android Properties
  showTitle: false,
  enableUrlBarHiding: true,
  enableDefaultShare: false,
}).then((response) => {
  if (
    response.type === 'success' &&
    response.url
  ) {
    alert(JSON.stringify(response));
  }
})

[namti]

Found the issue. Fixed it by adding showInRecents: true to the options.