Why does React Native WebView go to about:blank in release build?

Question

I have a component like this:

class PayPalWebView extends Component {
  static propTypes = {
    payKey: PropTypes.string,
    payPalLoginUrl: PropTypes.string,
    onNavigationStateChange: PropTypes.func,
  }

  getPayPalLoginURL = () => this.props.payPalLoginUrl + this.props.payKey

  render () {
    return (
      <WebView
        source={{ url: this.getPayPalLoginURL() }}
        scalesPageToFit={true}
        onNavigationStateChange={this.props.onNavigationStateChange}
      />
    )
  }
}

I use it to handle the login flow for PayPal payments inside my react native app.

The development version inside an emulator works and correctly opens the PayPal login page.
When I switch to release build configuration inside the emulator, it doesn't work any more and only opens about:blank.

The issue occurred both on Android and iOS. However it suddenly started working this morning on iOS without me changing anything.

I've confirmed the output of getPayPalLoginURL being correct and also set the source attribute of the WebView to a fixed value. Also tried different values such as { url: "https://example.com"} to make sure it's not related to the PayPal URL, but again it fails only on the release build.

I have also found other SO questions, where people suggested to set a fixed width on the WebView, which also didn't work.

Any suggestions to fix or to debug are much appreciated.

Answer 1

Replace

source={{ url: this.getPayPalLoginURL() }}

with

source={{ uri: this.getPayPalLoginURL() }}

check this