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
A NativeScript widget that will allow you to easily swipe and zoom through a list of images.
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 -->
// test-page.ts;;; ; ;
Usage in Angular
In order to use the ImageSwipe
you must register it in BOTH your main.ts
and main.aot.ts
!
// main.ts;; ; registerElement"ImageSwipe",require"nativescript-image-swipe/image-swipe".ImageSwipe; platformNativeScriptDynamic.bootstrapModuleAppModule;
<!-- test.component.html -->
// test.component.ts;;
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
bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC