React Native Webview not loading any url (React native web view not working)

Question

I am trying to implement react native webview component in my application, but the web view is not loading any url its just showing the white page.

var React = require('react-native'); var{  View,  Text,  StyleSheet,  WebView } = React;   module.exports = React.createClass({  render: function(){    return(      <View style={styles.container}>       <WebView source={{uri: 'https://m.facebook.com'}} style= {styles.webView}/>      </View>    );  } });  var styles = StyleSheet.create({    container: {      flex:1,      backgroundColor:  '#ff00ff'    },webView :{      height: 320,      width : 200    } }); 

Below is the screenshot of the output .

Answer 1

I had this issue. WebView would render when it was the only component returned, but not when nested in another View component.

For reasons I'm not entirely sure of the issue was resolved by setting a width property on the WebView component.

class App extends React.Component {   render() {      return (       <View style={styles.container}>         <WebView           source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}           style={styles.video}         />         <WebView           source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}           style={styles.video}         />       </View>     );   } }  const styles = StyleSheet.create({   container: {     flex: 1,     alignItems: 'center',     justifyContent: 'space-between',    },   video: {     marginTop: 20,     maxHeight: 200,     width: 320,     flex: 1   } }); 

Answer 2

I'm facing same issue. What I observed is that WebView doesn't work if it's nested. If component returns just WebView, then everything is fine.