react-native webview doesn't appear

Question

For some reason, my react-native webview doesn't show up at all. Nothing shows up after my text field. Here's my code

import React, { Component } from 'react';


import {
View,
Text,
WebView,

} from 'react-native';


export default class Home extends Component {

    render() {
        return (
        <View style={{flexDirection:'column'}}>
          <Text>Show webview</Text>
          <WebView source={{html:"<html><body style='color:red'>Hello<br/>This is a test</body></html>"}} style={{width:200,height:200,backgroundColor:'blue',marginTop:20}} />
        </View>
        );
  }
}

What am I doing wrong?

Dan · Accepted Answer · 2017-10-29 22:58:27Z

23

Add flex: 1 to your <View /> component.

<View style={{flex: 1, flexDirection:'column'}}>
  <Text>Show webview</Text>
  <WebView source={{html:"<html><body style='color:red'>Hello<br/>This is a test</body></html>"}} style={{width:200,height:200,backgroundColor:'blue',marginTop:20}} />
</View>

Here's a demo

answered Oct 29, 2017 at 22:58

Dan

8,9129 gold badges46 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

learningtech Over a year ago

I'm still new to flex, can you tell me why it has to be applied to View? I thought if anything, it should be applied to the Text and WebView.

Casey Gibson Over a year ago

You've probably figured this out, but to answer the question, flex: 1 means to fill the remaining space that is left from the parent. Without it, or without a "height" it had no instruction to display itself other than a height of 0.

Amir5000 · Accepted Answer · 2019-11-30 03:36:16Z

According to the ReactNative docs as of (Nov 2019) they say this:

Warning Please use thereact-native-community/react-native-webviewfork of this component instead. To reduce the surface area of React Native, <WebView/> is going to be removed from the React Native core. For more information, please read The Slimmening proposal.

I wasn't able to get the ReactNative <WebView/> to work at all in my Expo app. So switching to the react-native-community/react-native-webview <WebView/> component worked for me. I hope that helps!

Harshal · Accepted Answer · 2020-12-04 10:30:10Z

Try out this:

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

export default AppWebview = () => (
      <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
  }
});

Collectives™ on Stack Overflow

react-native webview doesn't appear

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related