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

[terrysahaidak]

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.

[facebook-github-bot]

Hey terrysahaidak, 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!

[satya164]

Do other pages load? Can you open chrome://inspect and see if you can debug the issue?

[terrysahaidak]

@satya164 yup, it does. But I still cant load gitter.im site. It loads welcome screen, then I'm login through GitHub and redirecting back, but it doesn't loads. And when I'm trying to visit it again with my cookies, it won't load.
I think it isn't the problem with Gitter because there is an app for android called Developer Talks where the user should login through webview.

I'll try to inspect it later and let you know.

And sorry for my English :)

[terrysahaidak]

@satya164 I've debugged the issue and I assume that it doesn't render the HTML.

I can also submit the form with this code:

var submit = document.getElementById('allow')
submit.click()

[terrysahaidak]

Also tried to load this URL with this app (github) and it works.

[tomauty]

No console errors?

[terrysahaidak]

@tomauty no. BTW I'm running it in 5.1.1 on my sgs4 i9505.

It seems like a magic :smile:

[terrysahaidak]

Just tried it with 0.19.0-rc and got the same result. :worried:

[terrysahaidak]

Just got it working by deleting some css code. But still can't realize why it does not work like native webview?

I've disabled height: 100% html tag's rule (the best result i've got because of that). And got it:

[kevinejohn]

+1 I'm running into the same issue with certain websites.

[kevinejohn]

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.

[terrysahaidak]

@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';
`

[kevinejohn]

@terrysahaidak that worked. Thanks!

[maraujop]

This is happening to us too, a url that used to load correctly in RN WebView 0.18 is now a blank screen since RN 0.19

[terrysahaidak]

@maraujop could you inspect the web view with chrome://inspect?

[maraujop]

@terrysahaidak Sure, I've inspected the webview, This url renders a widget that gets inflated through some javascript execution. It looks like the javascript never executed because the widget is not inflated, however the console shows no errors and it used to work before.

[terrysahaidak]

did you use webview's javaScriptEnabled property?

because in my issue HTML was rendered, but not displayed.

[maraujop]

Thanks Terry for your help, but yes, javaScriptEnabled is set to true. I've just upgraded to 0.20-rc and it works again, so I guess it is fixed already.

[oillamp]

@terrysahaidak i have the same issue , a blank html, looks like many page redirection cause it, and how can i inspect my rn-app in chrome ? i connect my phone by usb, and just could see LG-D858

LGD858DB61B26E , no inspect button, but when i open mobile browser and open a page , the chrome inspect page show the inspect button ,but not belong to my app, how can i debugge the rn-webview? thanks a lot~

[terrysahaidak]

@oillamp connect you phone via USB, allow USB debugging and then got to this url chrome://inspect in chrome, then you'll see your device and page that currently opened in webview

hmm, it should display your rn-webview. try to use another webview (you can find it on react.parts or github)

[geirman]

@terrysahaidak @maraujop regarding the Feb 15 comment , can you confirm whether or not this is still an issue after 0.20-rc?

I've just upgraded to 0.20-rc and it works again, so I guess it is fixed already.

[oillamp]

@terrysahaidak i solve it by build react native android source code, and set the webview can be debug o f true.

[terrysahaidak]

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

[terrysahaidak]

Just tried with 0.23.0-rc4 and got the same result, unfortunately.

[slootzky]

I can confirm this behavior on 0.24 as well , @terrysahaidak workaround solves this for now.
thanks.

[ncnlinh]

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.

[timofischer81]

Still present in 0.26. Pages are not rendered after redirect in my case. Only removing the redirect solves it.

[hyperh]

+1 Getting this as well on React Native 0.24.1. Only happens for certain websites though. Can confirm that @terrysahaidak fix works.

[timofischer81]

how exactly does this fix work? If I am injecting the code proposed by @terrysahaidak I only get the react native error: "Can't find variable: Dimensions". Guess I am doing something wrong...

[hyperh]

@timofischer81 Did you do make sure to import {Dimensions} from 'react-native'

[timofischer81]

thx

[timofischer81]

I have no luck with this. Here is what I am trying to do, any advice is highly appreciated: I follow this link to a simple energy comparison website:

http://www.verivox.de/energy/msp?gc=true&cmpc=1723&cmpt=506645&existing=false&regional=false&Source_ID=1707&PLZ=10437&ranking=1&Site_ID=2&Tariff_ID=521574&usage=976&profile=H0&switch=2&ori=qwYAAAAACWFiY2UxMDQzN9ADAAACaDAAAQABAf----8BAQALAAAAFbsHAAABAAAAAAAAAAAAAAAAAACA----------8AAP--AQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAi0x-----wAAAAAAAAAAAAI%3d

The page loads and entering the checkout process by clicking the button works. But if I fill in data and want to go to the second checkout step (posting the data) I get to a 404 page. If I do exactly the same in Chrome (or "Internet") on the same smartphone I get to the next checkout step (I see from developer tools here that there is a 302 after posting the data). Does not work either using Webview or the alternative WebViewAndroid module, so the issue seems to be react specific. Any ideas how to debug this? With chrome::inspect I cannot see network request while the app loads so I have no clue what is going on or how to fix or work around this.

[terrysahaidak]

@timofischer81 can you post some code?

[timofischer81]

@terrysahaidak sure, this is the code, thanks for your time on this:

class webviewTest extends Component {

  constructor(props) {
    super();
    this.state = {
      backButtonEnabled: false,
      forwardButtonEnabled: false,
      url: "http://www.verivox.de/energy/msp?gc=true&cmpc=1723&cmpt=506645&existing=false&regional=false&Source_ID=1707&PLZ=10437&ranking=1&Site_ID=2&Tariff_ID=521574&usage=976&profile=H0&switch=2&ori=qwYAAAAACWFiY2UxMDQzN9ADAAACaDAAAQABAf----8BAQALAAAAFbsHAAABAAAAAAAAAAAAAAAAAACA----------8AAP--AQAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAi0x-----wAAAAAAAAAAAAI%3d"
    };
  }

  _onNavigationStateChange(navState) {
    this.setState({
      backButtonEnabled: navState.canGoBack,
      forwardButtonEnabled: navState.canGoForward,
      url: navState.url,
      status: navState.title,
      loading: navState.loading
    });
  }

  render() {
    return (
        <WebView
            ref="webview"
            automaticallyAdjustContentInsets={false}
            style={styles.webView}
            source={{uri: this.state.url}}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            decelerationRate="normal"
            startInLoadingState={true}
            scalesPageToFit={true}
            onNavigationStateChange={this._onNavigationStateChange.bind(this)}
        />
    );
  }
}

const styles = StyleSheet.create({
  webView: {
    backgroundColor: 'rgba(255,255,255,0.8)',
    height: 350
  }
});

[terrysahaidak]

@timofischer81 could you also try the same things with this app? Just to realize if it really react-specific.

Also, can you tell which version of React Native do you use and platform you're currently running on?

Maybe this can help you?

[timofischer81]

@terrysahaidak it works with the app you linked. Latest React (15.0.2) and React Native (0.26.2). I also tested React Native (0.25.1) and React (0.14.8) same problem there. Development plattform is windows, tested on Galaxy S7 and S6.

The only workaround I found so far was to use React Native Webview Crosswalk which imports the crosswalk library instead of the other web view modules.

[spicylobster]

@ncnlinh You are quite right. I finally solved this problem using your method. some other reference https://bugzilla.xamarin.com/show_bug.cgi?id=25932

[ncnlinh]

@spicylobster I was using a custom webview component for a while now. I think Webview itself in Android is very customizable, and one may want to add JavascriptInterface, override URL loading, and change other settings. So I feel that it's hard to ask RN to accommodate everything in one component...

[tyao1]

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

1. 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
2. Set startInLoadingState to false. Whenever I set startInLoadingState to true, the page just doesn't load.
3. 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!

[fnd009]

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
  }
});

[nfabian13]

@fnd009 That solved my issue. Thanks

[matthewvincent]

@fnd009 this solved my issue, no clue why but thanks!

[tioback]

I keep randomly getting a blank page. I noticed the following in logcat:

10-20 16:02:50.717  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.717  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.723  1096  1096 I art     : Alloc sticky concurrent mark sweep GC freed 4236(176KB) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 414us total 5.694ms
10-20 16:02:50.723  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.750  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.750  1096  1096 I art     : Alloc partial concurrent mark sweep GC freed 602(20KB) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 522us total 26.456ms
10-20 16:02:50.750  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.775  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.775  1096  1096 I art     : Alloc concurrent mark sweep GC freed 19(704B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 490us total 24.850ms
10-20 16:02:50.775  1096  1096 I art     : Forcing collection of SoftReferences for 50MB allocation
10-20 16:02:50.775  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.798  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.798  1096  1096 I art     : Alloc concurrent mark sweep GC freed 5(160B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 510us total 23.221ms
10-20 16:02:50.798  1096  1096 W art     : Throwing OutOfMemoryError "Failed to allocate a 53360652 byte allocation with 7620352 free bytes and 7MB until OOM"
10-20 16:02:50.798  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.798  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.802  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.825  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.825  1096  1096 I art     : Alloc partial concurrent mark sweep GC freed 4(128B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 509us total 23.039ms
10-20 16:02:50.825  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.850  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.850  1096  1096 I art     : Alloc concurrent mark sweep GC freed 5(160B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 547us total 25.362ms
10-20 16:02:50.850  1096  1096 I art     : Forcing collection of SoftReferences for 50MB allocation
10-20 16:02:50.850  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.876  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.876  1096  1096 I art     : Alloc concurrent mark sweep GC freed 3(96B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 1.177ms total 25.366ms
10-20 16:02:50.876  1096  1096 W art     : Throwing OutOfMemoryError "Failed to allocate a 53360652 byte allocation with 7620352 free bytes and 7MB until OOM"
10-20 16:02:50.876  1096  1096 W JavaBrowserViewRendererHelper: Error allocating bitmap
10-20 16:02:50.876  1096  1096 E chromium: [ERROR:java_browser_view_renderer_helper.cc(133)] Error unlocking java bitmap pixels.
10-20 16:02:50.876  1096  1096 W art     : Attempt to remove non-JNI local reference, dumping thread
10-20 16:02:50.878  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.878  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.883  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.905  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.905  1096  1096 I art     : Alloc partial concurrent mark sweep GC freed 6(192B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 506us total 22.271ms
10-20 16:02:50.905  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.930  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.930  1096  1096 I art     : Alloc concurrent mark sweep GC freed 1(32B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 521us total 24.907ms
10-20 16:02:50.930  1096  1096 I art     : Forcing collection of SoftReferences for 50MB allocation
10-20 16:02:50.930  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.954  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.954  1096  1096 I art     : Alloc concurrent mark sweep GC freed 5(160B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 500us total 23.262ms
10-20 16:02:50.954  1096  1096 W art     : Throwing OutOfMemoryError "Failed to allocate a 53360652 byte allocation with 7620352 free bytes and 7MB until OOM"
10-20 16:02:50.954  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.954  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.957  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:50.980  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:50.980  1096  1096 I art     : Alloc partial concurrent mark sweep GC freed 5(144B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 501us total 23.284ms
10-20 16:02:50.980  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:51.003  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:51.003  1096  1096 I art     : Alloc concurrent mark sweep GC freed 4(144B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 498us total 23.138ms
10-20 16:02:51.003  1096  1096 I art     : Forcing collection of SoftReferences for 50MB allocation
10-20 16:02:51.003  1096  1096 I art     : Starting a blocking GC Alloc
10-20 16:02:51.028  1096  1096 I art     : Clamp target GC heap from 104MB to 96MB
10-20 16:02:51.028  1096  1096 I art     : Alloc concurrent mark sweep GC freed 3(96B) AllocSpace objects, 0(0B) LOS objects, 7% free, 88MB/96MB, paused 503us total 24.240ms
10-20 16:02:51.028  1096  1096 W art     : Throwing OutOfMemoryError "Failed to allocate a 53360652 byte allocation with 7620352 free bytes and 7MB until OOM"
10-20 16:02:51.028  1096  1096 W JavaBrowserViewRendererHelper: Error allocating bitmap
10-20 16:02:51.028  1096  1096 E chromium: [ERROR:java_browser_view_renderer_helper.cc(133)] Error unlocking java bitmap pixels.
10-20 16:02:51.028  1096  1096 W art     : Attempt to remove non-JNI local reference, dumping thread