iOS: WebView stays in loading state

[johncblandii]

MOTIVATION

Fixes #5974

WebView does not load when startInLoadingState is true on iOS; Android works perfectly fine. The issue is a hidden UIWebView never exits the loading state.

Test Plan

React Native: 0.52.2
iOS: 11.3

I added a simple logging statement and it logs:

2018-06-07 22:32:34.481172-0500 HarvestPoint[52403:2799087] LOADING:: TRUE, TRUE

That's the only log it gets when startInLoadingState={true} on JS. If I turn that off, you'll see a list of TRUE, TRUE then a FALSE, FALSE which then renders the UI.

The fix sets the default height to 1 which actually loads the UI. Once there is a height, the iOS code properly triggers the onLoadingFinish callback.

Related PRs

#16792: Migrate RCTWebView to WKWebView

Release Notes

[IOS] [BUGFIX] [WebView] - Set a default height on a hidden WebView to avoid UIWebView problem

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[johncblandii]

This is the error. Any clue as to whether this is intermittent or really broken with this small change?

error: bundling failed: TypeError: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/@babel/traverse/lib/scope/index.js:978:13)
    at BlockScoping.updateScopeInfo (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
    at BlockScoping.run (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
    at newFn (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/@babel/traverse/lib/path/context.js:65:20)
    at NodePath.call (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/@babel/traverse/lib/path/context.js:100:12)
    at TraversalContext.visitQueue (/private/tmp/react-native-NhQrzVYk/EndToEndTest/node_modules/@babel/traverse/lib/context.js:142:16)

[facebook-github-bot]

@johncblandii I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

[mailyokesh]

I have this issue as well where as when i try to load a webpage in ios all i see is a white screen. Android the page loads fine. I have links for 4 pages so irrespective of the order the first 3 will work and the 4 th one will show just the white screen. Any way this change will fix this? I dont see any errors being returned by the webview but all IOS webview shows is a white screen.

[hramos]

WebView PRs are on hold pending approval of the WebView proposal at react-native-community/discussions-and-proposals#3

[RSNara]

This looks interesting, although I'm not exactly sure if this hack is the right solution.

We're moving WebViews to react-native-community/react-native-webview as a part of an effort to reduce the surface area of React Native. Would you mind launching this PR/issue over at the community repository instead?