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         


        

Answer 1

WebView is being moved to react-native-webview .

None of the other answers worked except this method:

npm install --save react-native-webview

Then use it as follows:

<View style={{ flex: 1, alignItems: 'flex-end' }}>
      <WebView
        source={{
          uri: 'https://www.yahoo.com',
        }}
        startInLoadingState={true}
        scalesPageToFit={true}
        style={{
          width: 320,
          height: 300,
        }}
      />
</View>

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.

Answer 3

I had the same issue and spent a day attempting to fix it. I copied in the UIExplorer webview example, and that didn't work.

I ultimately ended up upgrading react and creating a new react-native project and copying the files in there, and that fixed it.

I wish I had a better answer as to why that fixed it, but hopefully that helps

Answer 4

I am doing React Native Webview, Could you please suggest me how to makeWebview loading the uri

render() {
        return (
            <Modal
                animationType="slide"
                ref={"webModal"}
                style={{
                    justifyContent: 'center',
                    borderRadius: Platform.OS === 'ios' ? 30 : 0,
                    width: screen.width,
                    height: screen.height,borderColor:'red',
                    borderWidth: 5
                }}
                position='center'
                backdrop={false}
                onClosed={() => {
                    // alert("Modal closed");
                }}>

                <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, top: 10 }} >
                    <Text style={{ fontSize: 24, fontWeight: '700' }}>
                        Interests
                                 </Text>
                    <Icon name="ios-close" size={40} color='purple' onPress={() => { this.refs.webModal.close() }} />
                </View>
                <WebView
                    source={{ uri: this.state.link }}
                    style={{ marginTop: 20,borderColor:'green',
                    borderWidth: 5 }}
                />

            </Modal>
        );
    }
}

Answer 5

Using the answers from other users, I was able to get my react native with webview working both inside a view and outside a view. My problem came down to two things. Being on the android emulator and behind a proxy, I just had to go to my browser (chrome) in the android emulator and sign in to the corporate proxy. Secondly, some sites work and others will not work. Whether the webview was nested or not inside of a View tag, some sites like cnn.com and slack.com etc will work fine, but no matter what settings I tried for google.com it wouldn't work (even though the proxy will definitely allow google.com) Lastly, when I rebuild my application and push to the emulator the new app, sometimes it took an inordinately long time to load any site. But once the site was loaded, the links are quick and responsive. So if you don't at first see something after a build, also be patient. Hope this helps someone else.

My final app.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';

import { WebView } from 'react-native';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

type Props = {};
export default class App extends Component<Props> {

  render() {
    return (
<View style={{flex:1}}>
  <WebView
   style={styles.webview}
   source={{uri: 'https://www.slack.com'}}
   javaScriptEnabled={true}
   domStorageEnabled={true}
   startInLoadingState={false}
   scalesPageToFit={true} />
</View>
    );
  }
}

const styles = StyleSheet.create({
  webview: {
    flex: 1,
    backgroundColor: 'yellow',
    width: deviceWidth,
    height: deviceHeight
  }
});

Answer 6

Let me give the simplest example which will work seamlessly:

import React from 'react';
import { WebView  } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <WebView
      source={{uri: 'https://github.com/facebook/react-native'}} 
    />

    );
  }
}

Do not add your WebView component within a view that created problem and webview url is not rendered rather styles of view will be shown.