WebView with inline HTML not working

• 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 634e7e11e3ad39e0b13bf20cc7722c0cfd3c3e28 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 <WebView> 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]

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.