NativeScript Image Zoom

Installation

NativeScript 7+:

tns plugin add @happones/nativescript-image-zoom

NativeScript > 7:

tns plugin add nativescript-image-zoom

Configuration

IMPORTANT: Make sure you include xmlns:ui="nativescript-image-zoom" on the Page element

<ui:ImageZoom src="~/images/148080.jpg" maxZoom="5" minZoom="2"/>

Angular

import { registerElement } from 'nativescript-angular/element-registry';
registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);

<ImageZoom src="~/images/148080.jpg" maxZoom="5" minZoom="2"></ImageZoom>

Vue

import ImageZoomPlugin from '@happones/nativescript-image-zoom/vue';

Vue.use(ImageZoomPlugin);

<ImageZoom src="~/images/148080.jpg" maxZoom="5" minZoom="2"></ImageZoom>

API

Properties

| Property | Default | Type | Required | Description | | --- | --- | --- | ---| ---| | maxZoom | 5 | number | - [ ] | | | minZoom | 1 | number | - [ ] | | | zoomScale | 1 | number | - [ ] | IOS only| | src | | string | - [x] | |

ScreenShots

| IOS | Android| | --- | ---| | | |