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

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