WebView with inline HTML not working

[rodrigobdz]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
      Memory: 871.64 MB / 16.00 GB
      Shell: 2.7.1 - /usr/local/bin/fish
    Binaries:
      Node: 8.11.3 - /usr/local/opt/node@8/bin/node
      Yarn: 1.9.2 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/opt/node@8/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 25.0.0, 25.0.3, 26.0.1, 26.0.3
        API Levels: 23, 25, 26
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.4.1 => 16.4.1
      react-native: ^0.56.0 => 0.56.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

WebView not working any more as expected when used with inline HTML.
The regression was introduced in commit 634e7e1 by @mmmulani with the commit message:

iOS only: Breaking Change: Restrict WebView to only http(s) URLs

Summary:
To prevent people from linking file:// or other URLs inside RN WebViews, default to not allowing those types of URLs.
This adds the originWhitelist to specify other schemes or domains to be allowed.
If the url is not allowed, it will be opened in Safari/by the OS instead.

This is not well documented in CHANGELOG which leads to unexpected breaking behavior. It is also not described as an iOS specific change.

What was the rationale behind the breaking change?

This issue is related to #19986.

Reproducible Demo

See #19986's Reproducible Demo.

Workaround

Adding originWhitelist wildcard as in #19986's comment.

[hramos]

To be clear, the changelog specifies this breaking changes applies to both iOS and Android. The commit you're pointing to is iOS only, but there are other commits in the 0.56 release that deal with Android.

Would you mind sending a PR to add the workaround to the docs?

Duplicate of #19986

[rodrigobdz]

The commit you're pointing to is iOS only, but there are other commits in the 0.56 release that deal with Android.

That's my point. In my case, I'm perceiving the breaking change in iOS only. Android still shows local files without the workaround.

My goal by opening a second issue to #19986 was to discuss the breaking change before sending a PR. It seems counterintuitive to add an originWhitelist wildcard in order to render inline HTML.

[hramos]

Ah, it wasn't clear originally. Do you want to use the discussion repository we have set up for this?

[rodrigobdz]

Sure. Which repository are we talking about?

[hramos]

It's the one linked to under "Start a Discussion" when you open a new issue at https://github.com/facebook/react-native/issues/new/choose

[rodrigobdz]

Thanks.