CODEWITHSUNDEEP
react-nativewebviewreact-native-webview
Anthony Cavuoti
Anthony Cavuoti

Reputation: 11

react-native-webview dose not render URL

I have seen this issue posted on stack overflow many times with no clear answer. I'm hoping this question can help me and others out.

I wish to render a URL in react native using react-native-webview

I started a blank react native project using expo init my-app. I ran npm i react-native-webview and react-native link react-native-webview. I then created a file defined as the following

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
 
class WebViewTest extends Component {
    render() {
        return (
          <WebView
            source={{ uri: 'https://www.google.com/' }}
            style={{ marginTop: 20, width: 400, height: 400 }}
          />
        );
      }
}

export default WebViewTest;

My app.js imports and renders that file like the following

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import WebViewTest from './Components/WebViewTest';

export default function App() {
  return (
    <WebViewTest />
  );
}

I test this code by running expo start and I open up my project in a web browser. I then see the following in the browser Only a tiny red dot gets rendered

I don't get any errors or warnings so where am I going wrong?

Upvotes: 0

Views: 1063

Answers (1)

Belgin Android
Belgin Android

Reputation: 307

As Per The Expo Docs For WebView -

https://docs.expo.io/versions/latest/sdk/webview/

https://www.npmjs.com/package/react-native-webview

It Doesn't Work On Web Using EXPO

Upvotes: 0

Related Questions