Search code examples
vue-native

how to make webview in vue-native


i am trying to make webview application with vue-native-cli

i am trying to use web-view component with help of documents

this is my page

<template>
    <web-view
        :source="'https://google.com'"
        :style="{marginTop: 20}"
    />
</template>

<script>
export default {
  methods: {

  }
}
</script>
<style>

</style>

when i use

<view class="text-container">
        <text>Hello World</text>
    </view>

its working fine but in webview getting

invarian voilation: Element type is invalid


Solution

  • It appears that some pieces of React Native have changed under the hood and the Vue Native docs haven't yet been updated to address it. Answer as of March 2020:

    1. Install the webview component via expo install react-native-webview
    2. Import into your component
    3. Make sure your :source prop passes the uri as an object:
    <template>
        <web-view :source="{uri:'https://google.com'}" />
    </template>
    
    <script>
    import { WebView } from "react-native-webview";
    
    export default {
      name: "myComponent",
      components: {
        "web-view": WebView
      }
    };
    </script>