react-native: [Android WebView] can't load url

I’m trying to load this URL https://gitter.im/login in my web view component, but it doesn’t loads.

It just displays this:

I’ve tried to load it in a default android browser and it had loaded successfully.

Some code:

        <View style={{flex: 1}}>
          <WebView
            ref='webview'
            style={{height: 400}}
            url={'https://gitter.im/login/'}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            onNavigationStateChange={this.onNavigationStateChange}
          />
        </View>

I’m on 0.18.0-rc.

Also tried other URLs, and it ~~works perfectly~~ works well only if there is no js. It seems like a bug with enabling javascript.

Also tried to use javaScriptEnabledAndroid, but nothing was change.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 43 (8 by maintainers)

Commits related to this issue

Webview: Fix broken fullscreen modals due to zero body height. Summary: Supersedes PR #8536 Fixes #5211 JavaScript plugins such as Fotorama are broken when attempting use its fullscreen feature. If... — committed to immidi/react-native by danielbraun 8 years ago
Webview: Fix broken fullscreen modals due to zero body height. Summary: Supersedes PR #8536 Fixes #5211 JavaScript plugins such as Fotorama are broken when attempting use its fullscreen feature. If... — committed to HomePass/react-native by danielbraun 8 years ago

Most upvoted comments

Hi, I had this problem too but when I specify the width in the style then the page is now displayed/rendered.

const styles = StyleSheet.create({
  webView: {
    backgroundColor: 'rgba(255,255,255,0.8)',
    height: 350,
    width: 350 // <-- Required somehow
  }
});

fnd009 on Aug 24, 2016

This is because it cannot get the height of Webview to handle the CSS height:100%. Instead of injecting JS as a workaround, which may cause unexpected CSS bugs on the page (could happen on Android < 4.4 - since they are crappy), a fix could be adding this in createViewInstance() of ReactWebViewManager.java.

RelativeLayout.LayoutParams relativeParams = new RelativeLayout.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
webView.setLayoutParams(relativeParams);

but I don’t know if this will cause any other side effects.

ncnlinh on May 18, 2016

@kevinejohn now it nested only inside some containers – Navigator and Root

I’ve fixed that by injection this js code:

const jsForInjection = `
  var el = document.getElementsByTagName('body')[0];
  el.style.height = '${Dimensions.get('window').height}px';
`

terrysahaidak on Feb 8, 2016

I’ve spent several hours and managed to make all WebView pages to display on Android. I’m using version 0.30.

Make sure the key of props passed to source is uri, not url. I was using url on iOS, but it only accepts uri as the key on Android
Set startInLoadingState to false. Whenever I set startInLoadingState to true, the page just doesn’t load.
Inject JS and set html or body’s height directly to your webview’s height (I’m not sure if it is fixed in the latest release)

Hope it helps!

tyao1 on Aug 11, 2016

@geirman I’ll try with 0.23.0-rc1 and will write the result.

terrysahaidak on Mar 24, 2016

I figured it out. If you make the WebView as the parent instead of being nested in the View it loads the websites fine. Not exactly sure why.

kevinejohn on Feb 8, 2016