React Native WebView is not loading the source

Question

I was following the example in react-native docs and don't know why my webview won't load the website.

Here is my code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  TouchableHighlight,
  TouchableOpacity,
  StatusBarIOS,
  WebView
} from 'react-native';

StatusBarIOS.setStyle(1);

import Dimensions from 'Dimensions';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

var CStyles = require('./CStyle');

class TestComp extends Component {
  constructor(){
    super();

    this.state = {
      url: 'https://www.google.at/'
    }
  }
  render() {
    return (
      <View style={{flex: 1}}>
          <WebView
            ref="webview"
            style={{width: width}}
            automaticallyAdjustContentInsets={false}
            source={{uri: this.state.url}}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            decelerationRate="normal"
            startInLoadingState={true}
          />
      </View>
    );
  }
}
module.exports = TestComp;

For now all I get visually is a spinner that indicates that something is loading. But nothing ever changes.

Am I doing something fundamentally wrong?

According to a commenter this seems to be a fundamental issue, I have opened a GH Issue to that, feel free to contribute https://github.com/facebook/react-native/issues/5974

Answer 1

I was having the same issue as you, and though I'm not sure of the how or why, simply changing startInLoadingState to false fixed it on my test device.