Roy Tang

Programmer, engineer, scientist, critic, gamer, dreamer, and kid-at-heart.

Blog Notes Photos Links Archives About

I’ve been testing out the WebView component, but I can’t seem to get it to render things.

Sample here: https://snack.expo.io/r1oje4C3-

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <WebView source={{html: '<p>Here I am</p>'}} />        
        <WebView source={{ uri: 'http://www.google.com'}} />
      </View>
    );
  }
}

When running the above example in Expo, neither of the two WebView components seem to render. What am I doing wrong?

Posted by under notes at #react-native #questions #stackoverflow #software development
Also on: stackexchange / 2

Comments

Nepho
Nepho

It seems that you need to provide a width style parameter, like so :

<WebView
    source={{uri: 'https://github.com/facebook/react-native'}}
    style={{width: 300}}
/>

Note that you might have to provide a height style parameter as well. You can also add flex: 1 to the style.

Mohamed Khalil
Mohamed Khalil

add style prop with flex: 1 on WebView

export default class App extends Component {
  render() {
   return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone!
        Save to get a shareable url. You get a new url each time you save.
      </Text>
      <WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />        
      <WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} />
    </View>
  );
 }
}
On This Site
Things I Write About
Elsewhere
Subscribe