react-native: [WebView] WebView not loading source / Staying in loading state

In my case an alignItems: 'center' in the parent container was causing the problem.

I think this issue should not be closed. It can only work when at top level, but not work under a <View> tag.

Also having this issue. WebView loads when it’s the only component being returned, but not when it’s nested inside a View component.

[edit] I’m not sure why, but my problem seems to have been solved by setting a width property in my WebView’s styling. Possibly some issue with the parent’s flex property?

@matthewvincent when it’s nested inside a View component,you setting flex : 1 and webview’s flex : 1,it does work

Hey noabyuna, thanks for reporting this issue!

React Native, as you’ve probably heard, is getting really popular and truth is we’re getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don’t know how to do something or something is not working as you expect but not sure it’s a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you’re using. Thank you for your contributions!

This is still an issue, but only on iOS. Android works perfectly fine. The issue is a hidden UIWebView never exits the loading state.

React Native: 0.52.2 iOS: 11.3

Can we get this reopened, @hramos?

Logging RCTWebView’s webView.loading

I added a simple logging statement and it logs:

2018-06-07 22:32:34.481172-0500 HarvestPoint[52403:2799087] LOADING:: TRUE, TRUE

That’s the only log it gets when startInLoadingState={true} on JS. If I turn that off, you’ll see a list of TRUE, TRUE then a FALSE, FALSE which then renders the UI.

  NSLog(@"LOADING:: %@, %@", webView.loading  ? @"TRUE" : @"FALSE", webView.isLoading  ? @"TRUE" : @"FALSE");
  if (_injectedJavaScript != nil) {
    NSString *jsEvaluationValue = [webView stringByEvaluatingJavaScriptFromString:_injectedJavaScript];

    NSMutableDictionary<NSString *, id> *event = [self baseEvent];
    event[@"jsEvaluationValue"] = jsEvaluationValue;

    _onLoadingFinish(event);
  }
  // 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]);
  }

The Fix

In WebView.ios.js, editing the hidden style fixes the loading:

  hidden: {
    height: 1,
    flex: 0, // disable 'flex:1' when hiding a View
  },

Originally the height is 0.

My Component

// @flow

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { WebView } from 'react-native';
import { Spinner } from 'native-base';

import * as actions from '../data/actions';
import { HPLoading } from '../components';

export class Iframe extends Component {
  static propTypes = {
    url: PropTypes.string,
  };

  render() {
    return (
      <WebView
        allowsInlineMediaPlayback={true}
        domStorageEnabled={true}
        renderLoading={this._renderLoading}
        source={{uri: this.props.url}}
        startInLoadingState={true}
      />
    );
  }

  _renderLoading = () => {
    return (
      <HPLoading />
    );
  }
}

Even I tried everything mentioned in the thread but nothing worked for me. At the end, I switched over to https://github.com/react-native-china/react-native-webkit-webview that uses WKWebView instead of UIWebView as recommended by apple for iOS 8 and above, and everything started working normally.

Having a similar issue with the WebView on a physical Android device, OnePlus 3T.

startInLoadingState renders the loading state, but the content never loads … unless I switch the WiFi on or off, then the WebView content loads instantly.

That seems like a reasonable workaround.

Also not showing when nested inside of a View, works when it’s alone.