React Native Web View not showing

Question

I am trying to show a simple webview in my react native application.

This is the code I'm trying:

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

export default function App() {
  return (
    <View style={{flex: 1}}>
      <WebView
        source={{uri: 'https://logrocket.com/'}}
        style={{marginTop: 20}}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

When I run this code I get a single red pixel on the screen. I don't know why I get this and I don't know how to debug it, because I don't see any errors.

I am using the latest version of React Native.

This is what the output of the code looks like on my end:

Answer 1

Try this... will work

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

export default function App() {
  return (
      <WebView
        source={{ uri: 'https://logrocket.com/' }}
        style={{ marginTop: 20}}
      />
  );
}

Answer 2

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


const Test= () => {
  return (
    <View style={{flex: 1}}>
        <WebView
          originWhitelist={['*']}
          source={{html: a}}
          style={{width:"100%", height: 300}}
        />
        <View></View>
    </View>
  );
};
export default Test;

const a = `
<body>
</body>
`

This is my working code

React Native Web View not showing

Question

2 answers

solution1
0 2020-09-05 15:14:20

solution2
0 2020-09-05 18:43:36

React Native Web View not showing

Question

2 answers

solution1 0 2020-09-05 15:14:20

solution2 0 2020-09-05 18:43:36

solution1
0 2020-09-05 15:14:20

solution2
0 2020-09-05 18:43:36