react-native-inappbrowser
react-native-inappbrowser copied to clipboard
Published
20 hours ago •
proyecto26
proyecto26
iOS iPad crash on InAppBrowser.open() when `modalPresentationStyle: 'popover'`
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 --versionto fetch it)"react-native": "0.63.3" - Plugin(s): (look for the version numbers in the
package.jsonfile 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.
Hello mate, if I understand, you want to use popover when modal option is enabled, right?
Hello mate, if I understand, your want to use
popoverwhen modal option is enabled, right?
Correct.
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);
}
});`
No idea, let me know if you find any Apple documentation about this issue
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)
}
Hi, I'm also facing the same issue with iPad Another issue: https://github.com/wix/react-native-navigation/issues/6344 Issue on apple dev: https://developer.apple.com/forums/thread/685031
modalPresentationStyle: isIpad() ? "pageSheet" : "popover"
#workaround