CODEWITHSUNDEEP
react-nativewebview
learningtech
learningtech

Reputation: 33715

react-native webview doesn't appear

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?

Upvotes: 14

Views: 19831

Answers (3)

Harshal
Harshal

Reputation: 8308

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

Upvotes: 0

Amir5000
Amir5000

Reputation: 1728

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!

Upvotes: 0

Dan
Dan

Reputation: 8834

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

Upvotes: 23

Related Questions