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 .

just a note that webView includes 2 styles. one for container and one standard one. style={{ // add your style, eg. backgroundColor: 'transparent' }} containerStyle={[{ //add your style, eg. flex: 0, width: 300, height: 300 }]} — verunar, Commented Jan 13, 2021 at 16:55

Gregoire Ducharme · Accepted Answer · 2022-09-04 22:01:56Z

75

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

edited Sep 4, 2022 at 22:01

Gregoire Ducharme

1,10613 silver badges26 bronze badges

answered Sep 29, 2016 at 23:55

Matthew Vincent

7495 silver badges10 bronze badges

8

setting flex: 1 didn't work for me, on Android at least. Explicitly setting height and width did, however. (nested inside a <View />)
– agm1984
Commented Oct 16, 2017 at 0:22
3

Seems like it's quite fickle - for me, flex: 1 worked once I removed justify/align props. Guess I'll work my way from there now.
– AndyO
Commented Jun 1, 2019 at 18:23
hi @AndyO, how did you manage to make the video 100% width in this case to make it responsive?
– verunar
Commented Dec 7, 2020 at 12:54
@verunar I haven't used react native in many months. But what I can see in the code is that a) I'm not using the built-in web view but react-native-webview b) I have only flex: 1 on the parent and no styling on the web view itself.
– AndyO
Commented Dec 8, 2020 at 18:20
for me, it was very weird solution, I just removing the URL and pasting it again a couple of times to make the app reload, and then it showing. I'm doing this after any change to the website because I noticed this reloads the web view cache
– Anas
Commented Feb 18, 2024 at 17:51

Add a comment |

Rafal Wiliński · Accepted Answer · 2016-09-03 17:29:41Z

40

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.

answered Sep 3, 2016 at 17:29

Rafal Wiliński

2,4002 gold badges23 silver badges27 bronze badges

4

This should be the correct answer. Specifying width for the webview is an obnoxious idea, especially when you need to cater to a wide range of devices with varying width.
– Deepak G M
Commented Dec 7, 2018 at 8:53
Isn't WebView a component that just returns a WebView?
– Sandy
Commented Sep 19, 2019 at 12:30

Add a comment |

Brandon Culley · Accepted Answer · 2018-04-09 16:22:28Z

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

No need to set flex: 1, you already cover the deviceWidth and deviceHeight. — Stack Overflow, Commented Feb 5, 2019 at 9:26

ravibagul91 · Accepted Answer · 2019-09-15 12:21:50Z

10

WebView works well on Android. However you need to enable javascript and dom storage for some web pages.

<WebView style={styles.webView}
    source={{uri: 'https://google.com/'}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    >
</WebView>

edited Sep 15, 2019 at 12:21

ravibagul91

20.8k6 gold badges38 silver badges61 bronze badges

answered Jan 12, 2017 at 8:27

Vince Yuan

10.6k3 gold badges34 silver badges27 bronze badges

Add a comment |

LilyJ · Accepted Answer · 2016-10-19 04:08:57Z

9

If you want the component to render the entire page, you need to wrap it with View that has flex: 1. The code below works for me:

<View style={{flex:1, alignItems: 'flex-end'}}>
  <WebView
   source={{uri: this.state.webContentLink}}
   startInLoadingState={true}
   scalesPageToFit={true} />
</View>

answered Oct 19, 2016 at 4:08

LilyJ

911 silver badge2 bronze badges

Add a comment |

Gezim · Accepted Answer · 2019-12-06 00:43:21Z

9

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>

edited Dec 6, 2019 at 0:43

Gezim

7,32811 gold badges68 silver badges107 bronze badges

answered Aug 20, 2019 at 15:23

Jakir Hossen

4614 silver badges13 bronze badges

Add a comment |

Ajean · Accepted Answer · 2017-05-11 17:18:06Z

<View>
    <WebView
        source={{uri: this.props.link}}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
    />
</View>

and style as follows:

const React = require('react-native');

const { Dimensions } = React;

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

export default {
  webview: {
      width: deviceWidth,
      height: deviceHeight
  }
};

All this to deal with bad webview dimension, so just set a specific height and specific width too (deviceHeight and deviceWidth as the example above).

M H Chu · Accepted Answer · 2020-06-02 00:05:24Z

As of June 2020 (noting the date because React Native answers seem to become out-of-date quickly), the simplest solution to this appears to be:

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'

export const ComponentWithWebView = () => {
  return (
    <View style={styles.view}>
      <WebView source = {{uri: 'https://www.google.com/'}} />
    </View>
  )
}

const styles = StyleSheet.create({
  view: {
    alignSelf: 'stretch',
    flex: 1,
  }
}

This results in a WebView filling the available space and being nested within a View. I believe the typical problems faced when placing a WebView within a View is that View expects children to force the View to expand (that is, a Text component would take up some amount of width and height which the View then accommodates). WebView, on the other hand, expands to the size of the parent component unless a style is passed specifying the width. Therefore, a simple <View><WebView /></View> results in a 0 width and nothing shown on the screen. The earlier solutions of setting the WebView width work well but require either the device dimensions to be fetched (which might not be the desired width) or for the View to have an onLayout function AND have some way to expand the View to the desired space. I found it easiest to just apply the flex: 1 and alignSelf: 'stretch' for the View to fill the space as desired and then WebView to automatically follow suit.

Hope this helps someone before it becomes obsolete!

Devashree · Accepted Answer · 2018-10-04 17:37:27Z

2

I ran into the same issue recently. And I found that

alignment: 'center'

was causing the issue for me. I commented it and the webView got loaded immediately. I found the solution here : https://github.com/facebook/react-native/issues/5974 'brunocvcunha's' response worked for me.

answered Oct 4, 2018 at 17:37

Devashree

2212 silver badges4 bronze badges

Add a comment |

Pikachu-go · Accepted Answer · 2018-11-29 14:56:48Z

1

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.

answered Nov 29, 2018 at 14:56

Pikachu-go

3,0984 gold badges22 silver badges27 bronze badges

Add a comment |

Aria Buckles · Accepted Answer · 2016-02-19 22:26:25Z

0

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

answered Feb 19, 2016 at 22:26

Aria Buckles

9435 silver badges10 bronze badges

Add a comment |

Andrew Regan · Accepted Answer · 2019-09-23 15:23:28Z

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

This does not provide an answer to the question. You can search for similar questions, or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, ask a new question, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions — xiawi, Commented Sep 23, 2019 at 15:08

Rishabh Verma · Accepted Answer · 2021-08-24 17:15:45Z

0

Try

<WebView
  source={{ uri: "https://inhall.in/" }}
  style={Styles.webView}
  javaScriptEnabled={true}
  scalesPageToFit />

javaScriptEnabled={true} might help

answered Aug 24, 2021 at 17:15

Rishabh Verma

132 bronze badges

Add a comment |

Sumit Dhakad · Accepted Answer · 2023-04-19 06:00:16Z

The only problem here is the width. Width in percentage will not work and flex will also not work. So set the width in numbers or you can get the device width and set that. that's it.

import { Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('window').width;

and then in WevView

<View style={{ width: '100%', height: '100%' }}>
    <WebView
        mixedContentMode="compatibility"
        source={{ uri: 'https://www.google.com' }}
        startInLoadingState={true}
        scalesPageToFit={true}
        style={{
            width: deviceWidth,
              height: "100%",
            }}
    />
</View>

Sir hennihau · Accepted Answer · 2023-10-05 19:59:33Z

0

None of the other answers worked for me. I figured it was a compatibility issue with react-native navigation for me. i just didnt get it to work with other markup inside a tab navigation. moving it into a stack navigation fixed it for me, no idea how to make it work with tabs.

answered Oct 5, 2023 at 19:59

Sir hennihau

1,8146 gold badges23 silver badges38 bronze badges

Add a comment |

michael_vons · Accepted Answer · 2023-11-22 09:09:38Z

0

if by all means you need to add other components alongside the webView, then use a view fragment <>

<>
 <Text>Hello Webview</>
 <Webview source={{uri:"www.google.com"}} style={{flex:1}} />
</>

answered Nov 22, 2023 at 9:09

michael_vons

1,0661 gold badge11 silver badges19 bronze badges

Add a comment |

Anas · Accepted Answer · 2024-02-19 16:30:36Z

for me, after adding flex: 1 for the <WebView> or its parent, it was show in some cases, but in case is not showing, I discovered that the WebView has a chache which causing the latest html not showing. so I ended up to add cacheEnabled={false} property and it work perfectly like example below.

         <WebView
            style={{ flex: 1 }}
            originWhitelist={["*"]}
            cacheEnabled={false}
            source={{
              uri: "https://google.com",
            }}
          />

Anurag Vijayvergia · Accepted Answer · 2016-02-25 18:26:40Z

-1

Below is piece of the code which worked for me.

render: function(){
   return(
     <View style={styles.container}>
      <WebView url={'https://m.facebook.com'} style= {styles.webView}/>
     </View>
   );
 }

answered Feb 25, 2016 at 18:26

Anurag Vijayvergia

6411 gold badge5 silver badges9 bronze badges

18

You forgot to mention which styles have used
– piotr_cz
Commented Jun 27, 2017 at 11:42

Add a comment |

bhaRATh · Accepted Answer · 2020-05-21 07:23:34Z

-1

import { WebView } from 'react-native'; is deprecated

use below line instead

npm install [email protected] --save

then

import HTML from 'react-native-render-html';

react-native-render-html starting with version 4.2.0, react-native-webview is now a peer dependency. As a result, you need to install it yourself.

edited May 21, 2020 at 7:23

answered May 20, 2020 at 6:07

bhaRATh

7975 silver badges25 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

19 Answers 19

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

Linked

Related