NativeScript-Vue zoom image

First, install nativescript-image-zoom plugin:

tns plugin add nativescript-image-zoom

Then globally register the ImageZoom element in your main.js:

Vue.registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);

Now you can use it as a global component anywhere in your app you want.

<ImageZoom v-if="ifStatement"           :src="imageSrc"           class="main-image" />

Keep in mind that while global registration of the component doesn't hurt the performance, it prevents you from lazy loading the element.

Install the plugin by running the following command

tns plugin add nativescript-image-zoom

Replace your Image tag with this custom component

<StackLayout class="home-panel">                <ui:ImageZoom :src="img_src" strech="AspectFill"/>                <ListView for="images in img_data" @itemTap="onButtonTap" style="height:200vh">                    <v-template>                        <Label :text="images.name" />                    </v-template>                </ListView>                <!-- <Button text="Button" @tap="onButtonTap" /> -->            </StackLayout>

Don't forget to add xmlns to your Page element.

xmlns:ui="nativescript-image-zoom" 

In case you have any another question, please don't hesitate to ask.