Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to make webview in vue-native

Tags:

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

like image 285
sid heart Avatar asked Jan 28 '26 19:01

sid heart


1 Answers

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>
like image 106
jwhazel Avatar answered Jan 31 '26 16:01

jwhazel



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!