esolution-nativescript-photoviewer
by febriarief | v3.0.1-alpha-3
A simple Photo-viewer component for NativeScript based on NYTPhotoViewer pod for iOS and ImageGalleryViewer for Android.
npm i --save esolution-nativescript-photoviewer

npm npm

NativeScript PhotoViewer

A simple photo-viewer/gallery component for NativeScript.

Limitations

Since the plugin is based on two different libraries for two different platforms their features are also somewhat diferent:

Platform State Remote images (url) Local images (resource) Titles/Credits Album View Color Palette
iOS :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :x: :x:
Android :x: (Broken) :white_check_mark: :x: :x: :white_check_mark: :white_check_mark:

If anyone has tips on a better android library that has same or similar features to the iOS, let us know.

Latest version

3.0.0

  • NS7/8 support for iOS. Android part of this plugin does not work, PRs are welcome.
  • Might be better to combine Nativescript-Carousel and Nativescript-ImageZoom in a modal, to create a more powerful photo viewer and give you more control.

Installation

Run tns plugin add nativescript-photoviewer in your root directory of your project.

Usage

It's best to take a look at the included demo app(s) for advanced usages. Below is just a simple example on how to get the plugin running with minimal effort using vanilla nativescript (ts). For Angular, see demo-ng.

// Include the module
import { PhotoViewer, PhotoViewerOptions, PaletteType, NYTPhotoItem } from "nativescript-photoviewer";
var photoViewer: PhotoViewer;

// Create a new instace of PhotoViewer in the onLoaded event. Very important to do the init here!
export function pageLoaded(args: EventData) {
photoViewer = new PhotoViewer();
}

// Show gallery
export function openGallery(args: EventData){

let image1 = "https://blabla/image1.jpg";
let image2 = "https://blabla/image2.jpg";
let image3 = "https://blabla/image3.jpg";
let image4 = "https://blabla/image4.jpg";
let myImages = [image1, image2, image3, image4];

// Example on how to use the options class (optional)
let photoviewerOptions: PhotoViewerOptions = {
startIndex: 0,
ios: {
completionCallback: galleryLoaded
},
android: {
paletteType: PaletteType.DarkVibrant,
showAlbum: false
}
};

photoViewer.showGallery(myImages, photoviewerOptions);
}

Changelog

3.0.0

  • NS7/8 support for iOS. Android part of this plugin does not work, PRs are welcome.
  • Might be better to combine Nativescript-Carousel and Nativescript-ImageZoom in a modal, to create a more powerful photo viewer and give you more control.

2.1.5

  • Fix for iOS datasource issue (premature garbage collect) - caused images to dissapear when using gallery.

2.1.1

  • Forgot to inlcude the photoviewer.d.ts file in the npm package. Add a reference to it in your references.d.ts.
  • Added a vanilla js demo app demo-js.

2.1.0

  • Fixed Android & iOS promise handling, will resolve properly now when gallery is closed (both in vanilla tns and Angular).
  • Added Angular demo app demo-ng.
  • Known issue 1: Gallery does not work when opened from another modal.
  • Known issue 2: When using Android Pie (9), for some reason, images don't appear untill you zoom (on simulator, not tested on real device).

2.0.2

  • Code refactor to TypeScript, added typings.
  • Renamed showViewer() to showGallery() that now has 1 mandatory param and 1 optional param.
  • Fixed the issue where the image datasource would be GC'ed on iOS (important to init the plugin in the onLoaded event)
  • Updated demo app to reflect the changes, added album demo for Android.
  • Known issue: Gallery does not work when opened from another modal.

1.5.0

  • Photo Viewer now works inside Modal Views, typo fix for 'completionCallback'. Big thanks to @Eonfuzz
  • Fixed the iOS datasource to be more strong referenced & the _android ref. Big thanks to @miex0r
  • Known issue: [iOS]If loading high-res images via urls, the images are being loaded before the gallery is shown. So the UI might freeze. A workaround for this could be to use the completionCallback and show a spinner when opening the gallery.

1.4.0

  • Moved param for index to a property: startIndex
  • (iOS) Added property to set completionCallback
  • (Android) Added option to show album first or go directly to fullscreen slides. More similar to iOS.
  • (Android) Added property to set background color palette for fullscreen slides.
  • Fixed demo app
  • Changed license to MIT

1.3.0

  • Updated iOS pod to newer version (fixed minor breaking changes)
  • Added a second paramter to the showViewer(ARRAY, INDEX?) function. Makes the gallery init on that image: photoViewer.showViewer(myImages,1);

Screenshots

Demo PNG Demo PNG Demo PNG Demo PNG

Contribution

I'll review & accept pull requests that improve the plugin and assign credit.

Credits

The plugin is based on the following libraries:

iOS Android
NYTPhotoViewer ImageGallery