CODEWITHSUNDEEP
vue-native
sid heart
sid heart

Reputation: 1149

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

Upvotes: 3

Views: 3507

Answers (2)

jwhazel
jwhazel

Reputation: 984

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>

Upvotes: 6

AcitJazz
AcitJazz

Reputation: 36

you have to import WebView first

import { WebView } from "react-native";
export default {
    components: {
      'web-view': WebView
    },
};

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

Upvotes: 0

Related Questions