CODEWITHSUNDEEP
react-nativewebviewexpo
Jérémy DEMANGE
Jérémy DEMANGE

Reputation: 85

WebView is empty in React Native

Problem. The WebView is empty in React Native. However, the link works. The code : 

import React from 'react';
import { StyleSheet, View, WebView } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

  render() {
    return (
    <View>
    <View style={styles.statusBar} />
     <WebView
        source={{uri: 'https://lapommeculturelle.com'}}
        renderError={() => alert('Merci de vérifier votre connexion Internet - Internet non disponible')}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBar: {
    backgroundColor: "#1D3B57",
    height: Constants.statusBarHeight,
  }
});

For this project, I used Expo XDE. Thanks.

Upvotes: 2

Views: 5936

Answers (3)

Gianfranco P
Gianfranco P

Reputation: 10794

My fix for iOS, for some reason, is this style:

<WebView
  // fixes warning when page has an iframe (about:srcdoc)
  originWhitelist={['http://*', 'https://*', 'about:srcdoc']}
  renderLoading={this._renderLoadingWebView}
  scrollEnabled
  source={{ uri }}
  style={{ borderWidth: 1, borderColor: 'transparent' }}
/>

react-native-webview 7.5.2

Upvotes: 0

Ezra
Ezra

Reputation: 1168

At the bare minimum, you need a style for the View that wraps the rest of them.

I'd recommend <View style={{flex: 1}}> just to get you started. In an ideal world, you'd make that a style associated with your container and be pulling it from your StyleSheet:

import React from 'react';
import { StyleSheet, Text, View, WebView, ActivityIndicator } from 'react-native';
import { Constants } from 'expo';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.statusBar} />
        <WebView
          source={{uri: 'https://lapommeculturelle.com'}}
          renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    backgroundColor: "#1D3B57",
    height: Constants.statusBarHeight,
  }
});

Upvotes: 1

Zain Budhwani
Zain Budhwani

Reputation: 59

I believe you need to be specifying the height and width of the webview, as well as specifying the flex for the wrapping view. Try this:

<View style={{flex:1}}>
<View style={styles.statusBar} />
 <WebView
    style={{height: 300, width: 300}}
    source={{uri: 'https://lapommeculturelle.com'}}
    renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
  />
</View>

Upvotes: 4

Related Questions