Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebView onLoadEnd never get call (iOS) #18802

Closed
2 of 3 tasks
thormengkheang opened this issue Apr 11, 2018 · 11 comments
Closed
2 of 3 tasks

WebView onLoadEnd never get call (iOS) #18802

thormengkheang opened this issue Apr 11, 2018 · 11 comments
Labels
Component: WebView Related to the WebView component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@thormengkheang
Copy link

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0

Steps to Reproduce

import React from "react";
import { StyleSheet, Text, View, WebView } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <WebView
        source={{ html: "<h1>Hello World<h1>" }}
        onLoadEnd={e => console.log("end", e)}
        onLoadStart={e => console.log("start", e)}
        onError={e => console.log("error", e)}
      />
    );
  }
}

Snack

Expected Behavior

It should both log start and end.

Actual Behavior

Only start event is logged.

@react-native-bot
Copy link
Collaborator

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

@react-native-bot react-native-bot added ⏪Old Version Component: WebView Related to the WebView component. labels Apr 11, 2018
@thormengkheang
Copy link
Author

thormengkheang commented Apr 11, 2018

@react-native-bot yes

@thormengkheang thormengkheang changed the title WebView onLoadEnd never get call WebView onLoadEnd never get call [iOS] Apr 11, 2018
@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Apr 11, 2018
@thormengkheang thormengkheang changed the title WebView onLoadEnd never get call [iOS] WebView onLoadEnd never get call (iOS) Apr 11, 2018
@RichardLindhout
Copy link

I can confirm this issue

@Tamiyadd
Copy link

i can confirm issue too

@337240552
Copy link

i can confirm issue too, android platform

@mhidou
Copy link
Contributor

mhidou commented Jul 2, 2018

When you use WebView with source={{ html }} the url is about:blank.

InRCTWebView.m:346 we have ![webView.request.URL.absoluteString isEqualToString:@"about:blank"]:

// we only need the final 'finishLoad' call so only fire the event when we're actually done loading.
  else if (_onLoadingFinish && !webView.loading && ![webView.request.URL.absoluteString isEqualToString:@"about:blank"]) {
  _onLoadingFinish([self baseEvent]);
}

Setting an empty url in WebView's source fixes this issue:

<WebView
  source={{ html: `<h1>Hello World<h1>`, baseUrl: '' }}
  onLoadEnd={e => console.log('end', e)}
  onLoadStart={e => console.log('start', e)}
  onError={e => console.log('error', e)}
  />

@Damoness
Copy link

Damoness commented Jul 2, 2018

you have solved my problem

@soyanakagawa
Copy link
Contributor

v0.56.0
baseUrl not work.

This issue will solve when RN use WKWebView instead of UIWebView.
#321

@jamonholmgren
Copy link
Collaborator

I'm not planning to migrate this issue to https://github.com/react-native-community/react-native-webview as @soyanakagawa indicated that using WKWebView will fix it, and we're defaulting to WKWebView over there. If you want, you can try that package and see if your issues are resolved. If so, we could probably close this issue.

@kelset
Copy link
Contributor

kelset commented Sep 24, 2018

There has been no further interaction here so I feel safe in closing per comment above

@kelset kelset closed this as completed Sep 24, 2018
jhihruei added a commit to jhihruei/react-native-qrcode that referenced this issue Jan 3, 2019
rishichawda added a commit to rishichawda/react-native-qrcode-generator that referenced this issue Apr 9, 2019
Fix the issue where `onLoad` and `onLoadEnd` were not triggered after the view was loaded. This
happens because `url` is `about://(null)` in iOS when using `html` in source like this: `source={{
html }}`. Setting the `baseUrl` parameter on the prop fixes the issue. For reference :
facebook/react-native#18802 (comment)

#2
rishichawda added a commit to rishichawda/react-native-qrcode-generator that referenced this issue Apr 9, 2019
Fix the issue where `onLoad` and `onLoadEnd` were not triggered after the view was loaded. This
happens because `url` is `about://(null)` in iOS when using `html` in source like this: `source={{
html }}`. Setting the `baseUrl` parameter on the prop fixes the issue. For reference :
facebook/react-native#18802 (comment)

#2
@arfa123
Copy link

arfa123 commented Apr 16, 2019

v0.56.0
baseUrl not work.

This issue will solve when RN use WKWebView instead of UIWebView.
#321

this works for me, thanks

@facebook facebook locked as resolved and limited conversation to collaborators May 5, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 24, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Component: WebView Related to the WebView component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests