React-native: Webview showing blank page instead of error page when failed to load

Created on 18 Nov 2016 · 13Comments · Source: facebook/react-native

Description

Webview showing blank page instead of error page (Webpage not available page, just like below image link)when failed to load.

http://i.stack.imgur.com/D3JD7.jpg

Reproduction

Close internet connection and try to load a webpage. Page will fail to load but not showing error page, but showing blank page. Actually it showing an error page but with blink og second it turn into blank page.

Solution

Need to fix it so it showing error page.

Additional Information

React Native version: [0.37.0]
Platform: [Android]
Operating System: [MacOS]

Locked

Source

fschai89

👍4

Most helpful comment

The problem is not fixed now!

React Native: 0.49.3
iOS: 11.0.3

someok on 22 Oct 2017

👍5

All 13 comments

I don't think it is supposed to show an error page when it fails to load - that doesn't seem to be in the spec for webview, for example. Does the underlying platform webview work that way?

lacker on 30 Nov 2016

React Native v.0.42.0

This is my code:

<View style={{ flex: 1, marginBottom: 20 }}>
        <WebView
          source={source}
          style={{ width: width, height: (this.state.height > 0) ? this.state.height + 20 : 0 }}

          javaScriptEnabled
          injectedJavaScript={HEIGHT_CORRECTION_SCRIPT}

          renderLoading={() => <ActivityIndicator size={'small'} />}
          renderError={() => <LoadingError />}

          onLoadEnd={this._onNavigationStateChange}
          onContentSizeChange={this._onNavigationStateChange}
          onNavigationStateChange={this._onNavigationStateChange}
        />
</View>

and I also have this error View, which is <LoadingError /> from above.

<View style={styles.container}>
      <Icon name="ios-warning-outline" size={30} style={styles.icon} />
      <Text style={styles.text}>{ERROR_MESSAGE}</Text>
</View>

When I place a console.log, inside the error view, I get this message in the logs, so it means that it is called. But I never get it shown on the screen. Instead I get some failure page, default one from the webview I guess...

Testing the error, with an iframe with bad url...

Does anyone has any know-how, or can help with, how to get the error view to show up?

gorjanz on 11 May 2017

renderLoading={() => }

not work for me, on 0.44.2 for Android

rogerluo410 on 21 Jun 2017

renderLoading={() => }

not work for me, on 0.44.2 for Android

rogerluo410 on 21 Jun 2017

👎1

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.