iOS iPad crash on InAppBrowser.open() when `modalPresentationStyle: 'popover'`

[zacharyweidenbach]

Which platform(s) does your issue occur on?

• iOS
• emulator (iPad Pro 12.9in 5th gen) with iOS 14.5 and on physical device iPad Mini

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

• CLI: (run react-native --version to fetch it)
  "react-native": "0.63.3"
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)

  "dependencies": {
    "@hookform/resolvers": "^1.0.1",
    "@notifee/react-native": "^1.6.0",
    "@react-native-async-storage/async-storage": "^1.13.2",
    "@react-native-community/cameraroll": "^4.0.1",
    "@react-native-community/cookies": "^5.0.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "^5.9.10",
    "@react-native-community/slider": "^3.0.3",
    "@react-native-firebase/analytics": "^12.1.0",
    "@react-native-firebase/app": "^12.1.0",
    "@react-native-firebase/crashlytics": "^12.1.0",
    "@react-native-picker/picker": "^1.9.4",
    "@react-navigation/bottom-tabs": "^5.11.1",
    "@react-navigation/material-top-tabs": "^5.3.10",
    "@react-navigation/native": "^5.8.9",
    "@react-navigation/stack": "^5.12.6",
    "@reduxjs/toolkit": "^1.5.0",
    "@types/supercluster": "^5.0.2",
    "babel-plugin-module-resolver": "^4.0.0",
    "crypto-js": "^3.3.0",
    "date-fns": "^2.16.1",
    "express": "^4.17.1",
    "json-stringify-safe": "^5.0.1",
    "lodash": "^4.17.20",
    "nock": "^13.1.1",
    "query-string": "^6.13.7",
    "react": "16.13.1",
    "react-hook-form": "^6.11.5",
    "react-native": "0.63.3",
    "react-native-background-fetch": "^2.7.0",
    "react-native-background-geolocation": "redacted",
    "react-native-circular-progress": "^1.3.6",
    "react-native-date-picker": "^3.2.9",
    "react-native-dotenv": "^2.4.2",
    "react-native-exception-handler": "^2.10.10",
    "react-native-exit-app": "^1.1.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-inappbrowser-reborn": "^3.6.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.3",
    "react-native-keychain": "^6.2.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^2.0.2",
    "react-native-maps": "0.27.1",
    "react-native-modalize": "^2.0.8",
    "react-native-permissions": "^3.0.0",
    "react-native-portalize": "^1.0.7",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-skeleton-placeholder": "^3.0.2",
    "react-native-snap-carousel": "3.7.4",
    "react-native-splash-screen": "^3.2.0",
    "react-native-svg": "^12.1.0",
    "react-native-swipeable": "^0.6.0",
    "react-native-tab-view": "^2.15.2",
    "react-native-version-number": "^0.3.6",
    "react-native-webview": "^10.10.2",
    "react-query": "^3.2.0",
    "react-redux": "^7.2.2",
    "react-use": "^15.3.4",
    "redux-persist": "^6.0.0",
    "rn-fetch-blob": "^0.12.0",
    "styled-components": "^5.2.1",
    "supercluster": "^7.1.2",
    "svgs": "^4.1.1",
    "uuid": "^3.3.2",
    "yup": "^0.31.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@jackfranklin/test-data-bot": "^1.3.0",
    "@react-native-community/eslint-config": "^1.1.0",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/jest-native": "^4.0.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/react-hooks": "^7.0.0",
    "@testing-library/react-native": "^7.1.0",
    "@types/crypto-js": "^4.0.1",
    "@types/date-fns": "^2.6.0",
    "@types/detox": "^17.14.2",
    "@types/express": "^4.17.13",
    "@types/jest": "^25.2.3",
    "@types/json-stringify-safe": "^5.0.0",
    "@types/lodash": "^4.14.167",
    "@types/react-native": "^0.63.2",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/react-native-maps": "^0.24.0",
    "@types/react-native-snap-carousel": "3.7.4",
    "@types/react-redux": "^7.1.12",
    "@types/redux-persist": "^4.3.1",
    "@types/styled-components": "^5.1.4",
    "@types/styled-components-react-native": "^5.1.1",
    "@types/uuid": "^3.3.28",
    "@types/yup": "^0.29.9",
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "babel-jest": "^25.1.0",
    "detox": "^18.18.1",
    "eslint": "^6.5.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.21.5",
    "immer": "^8.0.0",
    "isomorphic-fetch": "^3.0.0",
    "jest": "26.0.1",
    "jest-circus": "^27.0.5",
    "jest-cucumber": "^3.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "msw": "^0.31.0",
    "prettier": "2.2.1",
    "react-native-flipper": "^0.66.0",
    "react-native-web": "^0.14.8",
    "react-query-native-devtools": "^0.3.2",
    "react-test-renderer": "16.13.1",
    "redux-flipper": "^1.4.2",
    "typescript": "^3.8.3"
  },

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

Describe the steps to reproduce it.

The crash occurs when attempting to open the inappbrowser in with modalEnabled: true on iOS with specifically an iPad. The crash does not occur when using an iphone. Also of note, no error is thrown in the JS Runtime layer, the crash as seen is from the log output in xcode. The crash:

*** Terminating app due to uncaught exception 'NSGenericException', reason: 'UIPopoverPresentationController (<UIPopoverPresentationController: 0x7fab150fdd50>) should have a non-nil sourceView or barButtonItem set before the presentation occurs.'
*** First throw call stack:
(
	0   CoreFoundation                      0x00007fff20422fba __exceptionPreprocess + 242
	1   libobjc.A.dylib                     0x00007fff20193ff5 objc_exception_throw + 48
	2   UIKitCore                           0x00007fff23e56a58 __66-[UIPopoverPresentationController presentationTransitionWillBegin]_block_invoke + 0
	3   UIKit                               0x000000011641d04d -[UIPopoverPresentationControllerAccessibility presentationTransitionWillBegin] + 41
	4   UIKitCore                           0x00007fff23e62b14 __80-[UIPresentationController _initViewHierarchyForPresentationSuperview:inWindow:]_block_invoke + 2632
	5   UIKitCore                           0x00007fff23e602dc __56-[UIPresentationController runTransitionForCurrentState]_block_invoke.466 + 511
	6   UIKitCore                           0x00007fff24bb1e36 -[_UIAfterCACommitBlock run] + 54
	7   UIKitCore                           0x00007fff246d01f8 _runAfterCACommitDeferredBlocks + 333
	8   UIKitCore                           0x00007fff246c01e4 _cleanUpAfterCAFlushAndRunDeferredBlocks + 221
	9   UIKitCore                           0x00007fff246f1a36 _afterCACommitHandler + 85
	10  CoreFoundation                      0x00007fff2038fd31 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23
	11  CoreFoundation                      0x00007fff2038a542 __CFRunLoopDoObservers + 541
	12  CoreFoundation                      0x00007fff2038aaf5 __CFRunLoopRun + 1129
	13  CoreFoundation                      0x00007fff2038a1a7 CFRunLoopRunSpecific + 567
	14  GraphicsServices                    0x00007fff2b874d85 GSEventRunModal + 139
	15  UIKitCore                           0x00007fff246c14df -[UIApplication _run] + 912
	16  UIKitCore                           0x00007fff246c639c UIApplicationMain + 101
	17  PrimeWellOnTarget-Test              0x000000010f51d0c0 main + 112
	18  libdyld.dylib                       0x00007fff2025abbd start + 1
	19  ???                                 0x0000000000000001 0x0 + 1
)
libc++abi: terminating with uncaught exception of type NSException
*** Terminating app due to uncaught exception 'NSGenericException', reason: 'UIPopoverPresentationController (<UIPopoverPresentationController: 0x7fab150fdd50>) should have a non-nil sourceView or barButtonItem set before the presentation occurs.'
terminating with uncaught exception of type NSException
CoreSimulator 757.5 - Device: iPad Pro (12.9-inch) (5th generation) (B48EA0CC-DD58-49B9-B64C-22E94E869CCB) - Runtime: iOS 14.5 (18E182) - DeviceType: iPad Pro (12.9-inch) (5th generation)

Is there any code involved?

export const useOpenInBrowser = () => {
  return React.useCallback(async (url: string) => {
    try {
      const hasInAppBrowser = await InAppBrowser.isAvailable();

      if (hasInAppBrowser) {
        InAppBrowser.close();
        return InAppBrowser.open(url, {
          readerMode: false,
          modalEnabled: true,
          animated: true,
          modalPresentationStyle: 'popover',
        }).catch(swallowResponse);
      } else {
        const canOpenInStandardBrowser = await Linking.canOpenURL(url);
        if (canOpenInStandardBrowser) {
          return Linking.openURL(url);
        }
      }
    } catch (e) {
      logRuntimeError('openInBrowser error', e);
    }
  }, []);
};

By switching modalEnabled: false the .open() method does not cause a crash.
Or switching modalPresentationStyle: 'popover' to 'automatic' does not cause a crash.

[jdnichollsc]

Hello mate, if I understand, you want to use popover when modal option is enabled, right?

[zacharyweidenbach]

Hello mate, if I understand, your want to use popover when modal option is enabled, right?

Correct.

[jdnichollsc]

Ok, let me check, any pull request is welcome in the meantime! <3

[trithien98]

Ok, let me check, any pull request is welcome in the meantime! <3

Hi @jdnichollsc . i trying make inappbrower in ios device use safari like ui this picture from your github repo page but not work .
Can you teach me how can i making the inapp browers same you .My device is Simulator Iphone11
my code is `InAppBrowser.openAuth(
'https://github.com/proyecto26/react-native-inappbrowser',
deepLink,
{

        dismissButtonStyle: 'cancel',
        preferredBarTintColor: '#453AA4',
        preferredControlTintColor: 'white',
        readerMode: false,
        animated: true,
        modalPresentationStyle: 'fullScreen',
        modalTransitionStyle: 'coverVertical',
        modalEnabled: true,
        enableBarCollapsing: false,


        showTitle: true,
        toolbarColor: '#6200EE',
        secondaryToolbarColor: 'black',
        navigationBarColor: 'black',
        navigationBarDividerColor: 'white',
        enableUrlBarHiding: true,
        enableDefaultShare: true,
        forceCloseOnRedirection: false,
      },
    ).then((response) => {
      if (response.type === 'success' && response.url) {
        Linking.openURL(response.url);
      }
    });`

[jdnichollsc]

No idea, let me know if you find any Apple documentation about this issue

[sergibondarenko]

I hit this error too. I tried to put the InAppBrowser calls in the try ... catch to call the normal browser openLink as a fallback but the app crashed on the InAppBrowser.open call nevertheless. Because the exception is thrown by the native code.

try {
  if (!(await InAppBrowser.isAvailable())) {
    throw new Error()
  }

  await InAppBrowser.open(widgetUrl, BROWSER_CONFIG)
} catch (error) {
  await openLink(widgetUrl)
}

[Abhishek2250]

Hi, I'm also facing the same issue with iPad
Another issue: wix/react-native-navigation#6344
Issue on apple dev: https://developer.apple.com/forums/thread/685031

[Abhishek2250]

modalPresentationStyle: isIpad() ? "pageSheet" : "popover"

#workaround