nativescript-image-swipe
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • Public • Published

    Contribution - help wanted

    This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues here.

    Creating a PR checklist:

    • Fork the repo
    • Add new functionality or fix an issue and push it to your fork
    • Start both demo and demo-ng apps and make sure they work correctly (make sure that no console errors are thrown on both iOS and Android)
    • From your fork create a PR targeting the 'master' branch of this repository

    Thank you for your contribution.

    NativeScript Image Swipe widget

    Build Status npm downloads npm downloads npm

    A NativeScript widget that will allow you to easily swipe and zoom through a list of images.

    Screenshot

    Screenshot

    Installation

    Run the following command from the root of your project:

    tns plugin add nativescript-image-swipe

    This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.

    Configuration

    There is no additional configuration needed!

    API

    Events

    • pageChanged
      Triggered when the user swipes to the next/previous image in the list.

    Static Properties

    • pageChangedEvent - String
      String value used when hooking to pageChanged event.

    Instance Properties

    • ios - UIScrollView
      Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.

    • android - android.support.v4.view.ViewPager
      Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.

    • items - Array | ObservableArray
      Gets or sets the items collection of the ImageSwipe. The items property can be set to an array or an object defining length and getItem(index) method.

    • pageNumber - Number
      Gets or sets the currently visible image.

    • imageUrlProperty - string
      Gets or sets the property inside the items' object that defines the Url from where to load the images

    • allowZoom - boolean (default: true)
      Gets or sets whether zoom is enabled

    Usage

    You need to add xmlns:is="nativescript-image-swipe" to your page tag, and then simply use <is:ImageSwipe/> in order to add the widget to your page.

    <!-- test-page.xml -->
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:is="nativescript-image-swipe" navigatingTo="navigatingTo">
        <GridLayout>
            <is:ImageSwipe items="{{ items }}" imageUrlProperty="imageUrl" 
                           pageNumber="{{ pageNumber }}" pageChanged="pageChanged" backgroundColor="#000000">
            </is:ImageSwipe>
        </GridLayout>
    </Page>
    // test-page.ts
    import { EventData, Observable } from "data/observable";
    import { ObservableArray } from "data/observable-array";
    import { Page } from "ui/page";
     
    import { PageChangeEventData } from "nativescript-image-swipe";
     
    let viewModel: Observable;
     
    export function navigatingTo(args: EventData) {
        const page = args.object as Page;
        const items = new ObservableArray();
     
        items.push({ imageUrl: "http://something.com/picture1.jpg" });
        items.push({ imageUrl: "http://something.com/picture2.jpg" });
        items.push({ imageUrl: "http://something.com/picture3.jpg" });
        items.push({ imageUrl: "http://something.com/picture4.jpg" });
        items.push({ imageUrl: "http://something.com/picture5.jpg" });
     
        viewModel = new Observable();
        viewModel.set("items", items);
        viewModel.set("pageNumber", 3);
     
        page.bindingContext = viewModel;
    }
     
    export function pageChanged(e: PageChangeEventData) {
        console.log(`Page changed to ${e.page}.`);
    }

    Usage in Angular

    In order to use the ImageSwipe you must register it in BOTH your main.ts and main.aot.ts!

    // main.ts
    import { platformNativeScriptDynamic } from "nativescript-angular/platform";
    import { registerElement } from "nativescript-angular/element-registry";
     
    import { AppModule } from "./app.module";
     
    registerElement("ImageSwipe", () => require("nativescript-image-swipe/image-swipe").ImageSwipe);
     
    platformNativeScriptDynamic().bootstrapModule(AppModule);
    <!-- test.component.html -->
    <GridLayout>
        <ImageSwipe [items]="items" imageUrlProperty="imageUrl" 
                    [pageNumber]="pageNumber" (pageChanged)="pageChanged($event)" backgroundColor="#000000">
        </ImageSwipe>
    </GridLayout>
    // test.component.ts
    import { Component, OnInit } from "@angular/core";
    import { PageChangeEventData } from "nativescript-image-swipe";
     
    @Component({
        selector: "demo",
        moduleId: module.id,
        templateUrl: "./test.component.html",
    })
    export class ImageSwipeComponent implements OnInit {
        public items: any[] = [];
        public pageNumber: number = 3;
     
        ngOnInit(): void {
            this.items.push({ imageUrl: "http://something.com/picture1.jpg" });
            this.items.push({ imageUrl: "http://something.com/picture2.jpg" });
            this.items.push({ imageUrl: "http://something.com/picture3.jpg" });
            this.items.push({ imageUrl: "http://something.com/picture4.jpg" });
            this.items.push({ imageUrl: "http://something.com/picture5.jpg" });
        }
     
        public pageChanged(e: PageChangeEventData) {
            console.log(`Page changed to ${e.page}.`);
        }
    }

    Demos

    This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:

    $ git clone https://github.com/peterstaev/nativescript-image-swipe
    cd nativescript-image-swipe
    $ npm install
    $ npm run demo-ios

    This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the -android instead of the -ios sufix.

    If you want to run the Angular demo simply use the demo-ng- prefix instead of demo-.

    Donate

    Donate

    bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC

    Donate

    Install

    npm i nativescript-image-swipe

    DownloadsWeekly Downloads

    1

    Version

    5.0.1

    License

    Apache-2.0

    Unpacked Size

    42.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • pstaev