nativescript-community / ui-pager

Pager / Carousel component that allows the user to swipe left and right through pages of data.

This monorepo contains multiple packages:

ui-pager

@nativescript-community/ui-pager

A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.

iOS Demo	Android Demo

Table of Contents

• Installation
• API
  • Properties
• Usage in Angular
  • Examples
• Usage in React
  • Examples
• Usage in Svelte
  • Examples
• Usage in Vue
  • Examples
• Custom Transformer

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-pager

API

Properties

Property	Type
items	array or ItemsSource
selectedIndex	number
canGoRight	boolean
canGoLeft	boolean
spacing	PercentLengthType
peaking	PercentLengthType
perPage	number
indicator	string ('disable', 'none', 'worm', 'fill', 'swap', 'thin_worm', 'flat')
circularMode	boolean
autoPlayDelay	number
autoPlay	boolean
orientation	string ('horizontal' or 'vertical')
autoPlay	boolean
disableSwipe	boolean
showIndicator	boolean
transformers	string

Pager for NativeScript supports the core ObservableArray module part of the core NativeScript modules collection. Using an ObservableArray instance as a source for Pager will ensure that changes in the source collection will be automatically taken care of by the control.

Usage in Angular

Import the module into your project.

import { PagerModule } from "@nativescript-community/ui-pager/angular";

@NgModule({
    imports: [
        PagerModule,
    ],
})

Examples

• Static Pager
  • A simple pager example using static content.
• Basic Pager
  • A simple pager example using dynamic content.

Usage in React

Import the module into your project.

import { Pager } from '@nativescript-community/ui-pager/react';

Examples

• Basic Pager
  • A simple pager example using dynamic content.

Usage in Svelte

Import the module into your project.

import { registerNativeViewElement } from 'svelte-native/dom';

import PagerElement from '@nativescript-community/ui-pager/svelte';
import { PagerItem } from '@nativescript-community/ui-pager';

PagerElement.register();
registerNativeViewElement('pageritem', () => PagerItem);

Examples

• Static Pager
  • A simple pager example using static content.
• Basic Pager
  • A simple pager example using dynamic content.

Usage in Vue

Import the module into your project.

import Vue from 'nativescript-vue';
import Pager from '@nativescript-community/ui-pager/vue';

Vue.use(Pager);

Examples

• Static Pager
  • A simple pager example using static content.
• Basic Pager
  • A simple pager example using dynamic content.

Custom Transformer

You can define custom transformer for iOS/Android

You can follow the Scale example for iOS and Android to create your custom transformer.

Then you can register your transformer on app start with (this example registered the included but not registered Scale transformer):

import { Pager } from '@nativescript-community/ui-pager';
import transformer from '@nativescript-community/ui-pager/transformers/Scale';

Pager.registerTransformer('scale', transformer)

Then you can use that transformer with the transformers property of Pager

ui-pager-indicator

@nativescript-community/ui-pager-indicator

A NativeScript Indicator for Pager / Carousel /CollectionView

iOS Demo	Android Demo

Table of Contents

• Installation
• API
  • Properties
• Usage in Vue
  • Examples

Installation

Run the following command from the root of your project:

ns plugin add @nativescript-community/ui-pager-indicator

API

Properties

Property	Type
color	Color or string
selectedColor	Color or string

PagerIndicator add page control for Pager or other Paging Views.

Usage in Vue

Import the module into your project.

import Vue from 'nativescript-vue';
Vue.registerElement('PagerIndicator', () => require('@nativescript-community/ui-pager-indicator').PagerIndicator);

then in your template:

<Pager id="pager" :items="items"
    ...
</Pager>
<PagerIndicator pagerViewId="pager"/>

Examples

• Indicator Pager
  • A simple pager example using dynamic content and indicator.

Demos and Development

Repo Setup

The repo uses submodules. If you did not clone with --recursive then you need to call

git submodule update --init

The package manager used to install and link dependencies must be pnpm or yarn. npm wont work.

To develop and test: if you use yarn then run yarn if you use pnpm then run pnpm i

Interactive Menu:

To start the interactive menu, run npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.

Build

npm run build.all

WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run

Demos

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in demo-[ng|react|svelte|vue] Instead you work in demo-snippets/[ng|react|svelte|vue] You can start from the install.ts of each flavor to see how to register new demos

Contributing

Update repo

You can update the repo files quite easily

First update the submodules

npm run update

Then commit the changes Then update common files

npm run sync

Then you can run yarn|pnpm, commit changed files if any

Update readme

npm run readme

Update doc

npm run doc

Publish

The publishing is completely handled by lerna (you can add -- --bump major to force a major release) Simply run

npm run publish

modifying submodules

The repo uses https:// for submodules which means you won't be able to push directly into the submodules. One easy solution is t modify ~/.gitconfig and add

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

Questions

If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.

ui-pager's Issues

Android TypeError: Cannot read properties of undefined (reading 'setSelection')

After upgrading our app from NS 8.4 to 8.5 and therefore the pager plugin from 13.0.43 to 14.1.3, we see a lot of crash reports in Firebase Crashlytics (3.200 in one week). It seems to be a "silent" crash, as I was never able to reproduce it and we got no user complaints.

According to the logs, the exception always occurs on the exact same page, where we use the pager plugin.

As I said, I could not reproduce it myself and therefore I am not able to create a sample app. Maybe you still have an idea what the problem could be.

Custom itemTemplateSelector on working with Vue since 14.1.9

Since version 14.1.9 setting a custom itemTemplateSelector no longer works.

The following works in 14.1.8, but not in 14.1.9 or later:

<template>
    <Pager for="item in items" :itemTemplateSelector="templateSelector">
        <v-template name="template-1">
            <GridLayout>
                <Label text="template 1" />
            </GridLayout>
        </v-template>
        <v-template name="template-2">
            <GridLayout>
                <Label text="template 2" />
            </GridLayout>
        </v-template>
    </Pager>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
    data() {
        return {
            items: ['template-1', 'template-2']
        }
    },
    methods: {
        templateSelector(item) {
            return item
        }
    }
})
</script>

The error logged in the console is the following:

  System.err: Calling js method onCreateViewHolder failed
  System.err: Error: Expecting a valid View instance.
  System.err:
  System.err: StackTrace:
  System.err: _addView(file: app/webpack:/app/node_modules/@nativescript/core/ui/core/view-base/index.js:531:0)
  System.err:   at PagerRecyclerAdapterImpl.onCreateViewHolder(file: app/webpack:/app/node_modules/@nativescript-community/ui-pager/index.android.js:674:0)

There is a workaround to get a custom itemTemplateSelector working, by changing type to always be 0. The correct template is still selected.

ui-pager/src/ui-pager/index.android.ts

Line 752 in 0561995

const template = owner._itemTemplatesInternal[type];

[iOS] Pager component not showing up on iOS

Dependencies

@nativescript-community/ui-pager: 13.0.44
@nativescript/core: 8.4.1
@nativescript/ios: 8.4.0
@nativescript/types: 8.4.0

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:pager="@nativescript-community/ui-pager"
      actionBarHidden="true"
>
<RootLayout>
    <GridLayout>
        <pager:Pager>
            <StackLayout className="card">
                <Label text="Lorem ipsum" className="t-16 font-weight-bold"/>
            </StackLayout>
            <StackLayout className="card">
                <Label text="Lorem ipsum" className="t-16 font-weight-bold"/>
            </StackLayout>
            <StackLayout className="card">
                <Label text="Lorem ipsum" className="t-16 font-weight-bold"/>
            </StackLayout>
        </pager:Pager>
    </GridLayout>
</RootLayout>
</Page>

Devices: iPhone XS, iPhone 13 Max Pro. Both iOS 16.

Everything was working fine before updating NS to 8.4 and ui-pager to the latest version.

[bug] Angular broken since 4.0.9

Appears angular compilation since 4.0.9 of ui-pager has been in this state:

  Global Error Handler:  TypeError: Cannot set properties of undefined (setting 'items')
  Global Error Stack Trace:  set items [as items] (file: src/webpack:/app/node_modules/@nativescript-community/ui-pager/angular/fesm2022/nativescript-community-ui-pager-angular.mjs:50:0)
  applyValueToInputField (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:4035:29)
  writeToDirectiveInput (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:11096:12)
  setInputsForProperty (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:12391:8)
  elementPropertyInternal (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:11692:8)
  Module.ɵɵproperty (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:21258:8)
  SignupComponent_Template (file: src/webpack:/app/src/app/components/signup/signup.component.html:21:8)
  executeTemplate (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:11268:8)
  refreshView (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:12791:12)
  detectChangesInView$1 (file: src/webpack:/app/node_modules/@angular/core/fesm2022/core.mjs:13015:8)

You will have to pin to 4.0.19 until this is resolved.

angular version unusable, publishing failed?

When attempting to build our app after installing the latest version of the pager plugin, I get errors like:

ERROR in ../node_modules/@nativescript-community/ui-pager/angular/fesm2015/nativescript-community-ui-pager-angular.mjs 215:12-29
Can't import the named export 'ɵɵqueryRefresh' from non EcmaScript module (only default export is available)

and

ERROR in ../node_modules/@nativescript-community/ui-pager/angular/fesm2015/nativescript-community-ui-pager-angular.mjs 351:37-60
Can't import the named export 'ChangeDetectionStrategy' from non EcmaScript module (only default export is available)

There are various errors like this (probably around 50) printed to the console that all affect the plugin.

We are using Angular 11.2.13 and Nativescript 8.0.11.

Is this something somebody else experiences with Nativescript Angular? Is it maybe related to a publishing mistake of the plugin?

[ios][14.1.2] Indicator not showing

The indicator is not showing up on iOS devices. After, going through the repository I found that the indicator is being referenced in the android context but missing in the iOS context.

References:

https://github.com/nativescript-community/ui-pager/blob/master/src/ui-pager/index.ios.ts

ui-pager/src/ui-pager/index.android.ts

Line 127 in e667508

this.indicator.setCount(this.items ? this.items.length : 0);

@nativescript-community/ui-pager version 13.0.21 not working in android

Which platform(s) does your issue occur on?

• Android
• Android 9,10,11
• emulator

Angular Version: 10.1.5
Nativescript/Angular version: 10.1.5
@nativescript/android verison: 8.0.0

Please, provide the following version numbers that your issue occurs with:

When I install latest version of @nativescript-community/ui-pager: 13.0.21 its gives the below error.

ERROR Error: Uncaught (in promise): TypeError: record.factory is not a function
JS: TypeError: record.factory is not a function
JS:     at R3Injector.hydrate (file: node_modules/@angular/core/fesm2015/core.js:11289:0)
JS:     at R3Injector.get (file: node_modules/@angular/core/fesm2015/core.js:11111:0)
JS:     at file: node_modules/@angular/core/fesm2015/core.js:11148:0
JS:     at Set.forEach (<anonymous>)
JS:     at R3Injector._resolveInjectorDefTypes (file: node_modules/@angular/core/fesm2015/core.js:11148:0)
JS:     at new NgModuleRef$1 (file: node_modules/@angular/core/fesm2015/core.js:24236:0)
JS:     at NgModuleFactory$1.create (file: node_modules/@angular/core/fesm2015/core.js:24290:0)
JS:     at MapSubscriber.project (file: node_modules/@angular/router/fesm2015/router.js:3484:0)
JS:     at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (file: node_modules/rxjs/_esm5/internal/operators/map.js:35:0). ```

circularMode is not working on iOS

Adding circularMode="true" onto c:Pager on iOS not working it adds last frame before first and first after the last slide.

Android pager content has different loading behaviour than iOS

In android, when you navigate to a page with a nested pager, its items will all render at the same time even though the rest of pager items aren't visible.
Pager has different behaviour in iOS however and loads pager items when user actually navigates to them for first time. It seems UICollectionView items are actually lazy-loaded.

I think iOS approach is the best as it doesn't stress UI on pager rendering.
@farfromrefug Do you think android fragments could solve this?

Indicator is invisible

The carousel works perfectly, but i dosen't see the indicator. I tried to add some different values but it just won't appear
My code looks like this:
<Pager [items]="Images" height="100%" indicator="worm"> <ng-template let-i="index" let-item="item"> <GridLayout style="z-index: 10;"> <label [text]="item.title"><label/> </GridLayout> </ng-template> </Pager>

I'm getting error when i open pager component in my nativescript angular project

I am getting below error
ERROR TypeError: Cannot set properties of undefined (setting 'selectedIndex')
I also created a new test project - just added plugin ns plugin add @nativescript-community/ui-pager and version is 14.1.14.
I am getting same error in new project also.

https://github.com/nativescript-community/ui-pager/blob/master/demo-snippets/ng/basic-pager/basic-pager.component.html I am using basic-pager to test .... Actually I have created a new nativescript angular project

Is this plugin available for Nativescript Core?

I was looking through the documentation but did not see any examples for Core. I tried using it in my app, but it does not render anything.

Box shadow on StackLayout, GridLayout and other is broken on iOS

Hi guys,

Please try to use this code:

<GridLayout rows="auto,*,auto" columns="*">
        <Label text="Pager With List"/>
        <c:Pager circularMode="false" spacing="0" peaking="25" selectedIndex="1" height="400" showIndicator="true" indicatorColor="purple" indicatorSelectedColor="blue" row="1" id="pager" backgroundColor="lightsteelblue">
            <c:PagerItem class="slide" margin="10">
                <StackLayout padding="10"  class="slide">
                    <StackLayout rows="auto" columns="auto">
                        <Label text="First" height="100%" />
                    </StackLayout>
                </StackLayout>
            </c:PagerItem>
            <c:PagerItem>
                <StackLayout rows="auto" margin="10"  class="slide">
                    <Label text="Second" height="100%" />
                </StackLayout>
            </c:PagerItem>
            <c:PagerItem>
        </c:Pager>
        <Button text="Nav" row="2" tap="navigate"/>
    </GridLayout>

.slide {
box-shadow: 0 0 2 2 rgba(0,0,0,0.3);
}
And you an see that shadows are not working properly.

An error occurs when transitioning to the 4th page on iOS

With ui-pager with 4 or more pages set, an error will occur if you move to the 4th page.
This only happens on iOS, not Android.

  page1 mounted
  page2 mounted
  page3 mounted
  page1 destroyed
  page4 mounted
***** Fatal JavaScript exception - application has been terminated. *****
  NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'removeFromSuperview' of null
  at
  _prepareCell(file: app/webpack:/@nativescript/template-blank-vue-ts/node_modules/@nativescript-community/ui-pager/index.ios.js:635:0)
  at UICollectionViewDataSourceImpl.collectionViewCellForItemAtIndexPath(file: app/webpack:/@nativescript/template-blank-vue-ts/node_modules/@nativescript-community/ui-pager/index.ios.js:1048:0)

It seems that the 1st page is unloaded when moving to the 4th page, but it seems that an error has occurred due to this processing.
@nativescript-community/ui-pager/index.ios.js Commenting out line 635 eliminates the error.
However, if you just comment out line 635, a memory leak may occur.
Could you please provide a fix release for this issue?

  "dependencies": {
    "@nativescript-community/https": "^4.0.10",
    "@nativescript-community/ui-lottie": "^4.4.5",
    "@nativescript-community/ui-pager": "^13.0.43",
    "@nativescript-community/universal-links": "^3.0.0",
    "@nativescript/auto-fit-text": "^1.0.3",
    "@nativescript/core": "^8.3.6",
    "@nativescript/firebase-analytics": "^2.4.4",
    "@nativescript/firebase-core": "^2.4.4",
    "@nativescript/firebase-crashlytics": "^2.4.4",
    "@nativescript/iqkeyboardmanager": "^2.1.0",
    "@nativescript/secure-storage": "^3.0.0",
    "@nativescript/theme": "~3.0.2",
    "@nstudio/nativescript-loading-indicator": "^4.1.2",
    "@nstudio/nativescript-tracking-transparency": "^1.0.0",
    "@plmservices/nativescript-outline-label": "^2.0.2",
    "axios": "0.21.1",
    "compare-versions": "^4.1.3",
    "lodash": "^4.17.21",
    "maskdata": "^1.1.4",
    "nativescript-clipboard": "^2.1.1",
    "nativescript-dna-deviceinfo": "^3.7.3",
    "nativescript-vue": "~2.9.3",
    "nativescript-vue-router-ns": "^1.0.4",
    "url-parse": "^1.5.10",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vuelidate-property-decorators": "^1.0.28",
    "vuex": "^3.6.2",
    "vuex-class": "^0.3.2",
    "vuex-module-decorators": "^1.0.1"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.14.2",
    "@nativescript/android": "~8.3.1",
    "@nativescript/eslint-plugin": "0.0.4",
    "@nativescript/ios": "~8.3.3",
    "@nativescript/types": "~8.3.1",
    "@nativescript/webpack": "5.0.11",
    "@types/jest": "^26.0.23",
    "@types/lodash": "^4.14.170",
    "@types/node": "~14.6.2",
    "@types/vuelidate": "^0.7.14",
    "@typescript-eslint/eslint-plugin": "^4.27.0",
    "@typescript-eslint/parser": "^4.27.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^1.2.2",
    "axios-mock-adapter": "^1.19.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "cpx": "^1.5.0",
    "eslint": "^7.28.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.11.1",
    "flush-promises": "^1.0.2",
    "jest": "^26.6.3",
    "jest-html-reporter": "^3.4.0",
    "jest-sonar-reporter": "^2.0.0",
    "license-checker": "^25.0.1",
    "nativescript": "^8.3.3",
    "nativescript-vue-jest": "^3.0.4",
    "nativescript-vue-template-compiler": "~2.9.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.0",
    "sonarqube-scanner": "^2.8.1",
    "ts-jest": "^26.5.6",
    "typescript": "~4.0.0",
    "vue": "^2.6.12",
    "vue-eslint-parser": "^7.6.0",
    "vue-jest": "^3.0.7",
    "vue-template-compiler": "^2.7.14"
  },

thank you for your answer.

export 'ɵsetClassDebugInfo' (imported as 'i0') was not found in '@angular/core'

When i run the demo project, or my own project with angular 15 i get the following error:

ERROR in ../packages/ui-pager/angular/fesm2022/nativescript-community-ui-pager-angular.mjs 371:60-81
export 'ɵsetClassDebugInfo' (imported as 'i0') was not found in '@angular/core'

package.json:
{
"name": "@nativescript/template-hello-world-ng",
"private": true,
"main": "src/main",
"version": "8.0.6",
"author": "NativeScript Team [email protected]",
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"files": [
"App_Resources",
"hooks",
"src",
"tools",
"!tools/assets",
".editorconfig",
"references.d.ts",
"tsconfig.json"
],
"keywords": [
"nativescript",
"mobile",
"angular",
"{N}",
"template"
],
"repository": "",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"dependencies": {
"@angular/animations": "~16.2.9",
"@angular/common": "~16.2.9",
"@angular/compiler": "~16.2.9",
"@angular/core": "~16.2.9",
"@angular/forms": "~16.2.9",
"@angular/platform-browser": "~16.2.9",
"@angular/platform-browser-dynamic": "~16.2.9",
"@angular/router": "~16.2.9",
"@nativescript-community/template-snippet": "*",
"@nativescript/angular": "15.2.0",
"@nativescript/core": "~8.5.1",
"@nativescript/theme": "~3.0.2",
"rxjs": "~7.8.1",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@akylas/nativescript": "~8.4.1",
"@angular-devkit/build-angular": "^15.2.6",
"@angular/compiler-cli": "^15.2.8",
"@nativescript/android": "~8.4.0",
"@nativescript/ios": "8.4.0",
"@nativescript/types": "~8.4.0",
"@nativescript/webpack": "~5.0.14",
"@ngtools/webpack": "~15.2.6",
"typescript": "~4.8.4"
},
"readme": "NativeScript Application"
}

(this is the package.json from the ng-demo project)

The commit for the tools submodule doesn't exist.

When cloning this repo, the install will fail because the tools submodule commit doesn't exist in the plugin-seed-tools repo.

ERROR: `isListLikeIterable()` is not a function in @nativescript/angular

With these versions installed:

@nativescript-community/[email protected]
@nativescript/[email protected]
@angular/[email protected] 

I get the following error when I run my app:

ERROR Error: Uncaught (in promise): TypeError: (0 , _nativescript_angular__WEBPACK_IMPORTED_MODULE_0__.isListLikeIterable) is not a function
  TypeError: (0 , _nativescript_angular__WEBPACK_IMPORTED_MODULE_0__.isListLikeIterable) is not a function
      at set items [as items] (file: src/webpack:/mandy/node_modules/@nativescript-community/ui-pager/angular/fesm2022/nativescript-community-ui-pager-angular.mjs:47:61)
      at setInputsForProperty (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:13333:0)
      at elementPropertyInternal (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:12496:0)
      at Module.ɵɵproperty (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:15175:0)
      at ImageCarouselComponent_Template (file: src/webpack:/mandy/src/app/features/thread/image-carousel.component.ts:32:21)
      at executeTemplate (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:12113:0)
      at refreshView (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:11998:0)
      at refreshComponent (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:13072:0)
      at refreshChildComponents (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:11788:0)
      at refreshView (file: src/webpack:/mandy/node_modules/@angular/core/fesm2015/core.mjs:12048:0)
  ERROR TypeError: Cannot set properties of undefined (setting 'selectedIndex')

I already found #34 and #35 which seems to solve a similar issue, but it seems to have no effect on the deprecated function that is causing issues now.

Is this a known issue? Will there be a fix for current Angular versions?

[Android] Dependency collision with @nstudio/nativescript-carousel

Hi everyone,

I ran into problem today with this plugin in combination with another NativeScript plugin (@nstudio/nativescript-carousel).
Both plugins in their latest versions make use of the PageIndicatorView. When both plugins are used in the same project, the build process for Android fails with the following message:

Execution failed for task ':app:checkReleaseDuplicateClasses'.
Duplicate class com.rd.IndicatorManager found in modules jetified-PageIndicatorView-1.0.6-runtime (com.github.adrielcafe:PageIndicatorView:1.0.6) and jetified-PageIndicatorView-b1bad589b5-runtime (com.github.romandanylyk:PageIndicatorView:b1bad589b5)
Duplicate class com.rd.IndicatorManager$Listener found in modules jetified-PageIndicatorView-1.0.6-runtime (com.github.adrielcafe:PageIndicatorView:1.0.6) and jetified-PageIndicatorView-b1bad589b5-runtime (com.github.romandanylyk:PageIndicatorView:b1bad589b5)
Duplicate class com.rd.PageIndicatorView found in modules jetified-PageIndicatorView-1.0.6-runtime (com.github.adrielcafe:PageIndicatorView:1.0.6) and jetified-PageIndicatorView-b1bad589b5-runtime (com.github.romandanylyk:PageIndicatorView:b1bad589b5)

Digging deeper into this i found out that there is a collision between the two plugins:

@nativescript-community/ui-pager

	implementation 'com.github.adrielcafe:PageIndicatorView:1.0.6'

See here

@nstudio/nativescript-carousel

	implementation 'com.github.romandanylyk:PageIndicatorView:b1bad589b5'

See here

It there any solution for this issue? What is the difference between the two implementations? I think both plugins should be able to work in the same project.

iOS Layout issues using Label with maxLines

When using a Label with maxLines inside a pager's item, we see some layout issues on iOS. Sometimes, the Label's content is trimed to one line, even though it should be shown within two lines. And sometimes the Label is shown with a margin on the top.

Bildschirmaufnahme.2022-09-13.um.11.32.33.mov

<StackLayout className="pager-container">
        <Label text="My items" className="pager-header-title"/>

        <pager:Pager items="{{ items }}" className="pager">
            <pager:Pager.itemTemplate>
                <GridLayout rows="*" className="pager-item-outer">
                    <StackLayout row="0" padding="15">
                        <Label text="{{ title }}" maxLines="2" className="pager-item-title"/>
                        <!--<Label text="{{ subtitle }}" maxLines="2" className="pager-item-subtitle" marginTop="5"/>-->
                    </StackLayout>
                </GridLayout>
            </pager:Pager.itemTemplate>
        </pager:Pager>
</StackLayout>

Demo app to reproduce:
ns-ios-pager-issue.zip

We are thankful for any feedback!

circularMode not working

Hi, The circular mode does not work when it reaches the end of the list. It also doesn't work from the beginning backwards. Also, the first item that appears is the last one.

I am testing it on ios.

Vue Basic Example Doesn't Work On NativeScript Playground

I was trying to reproduce a bug I'm dealing with in the playground in order to submit an issue, but I can't even get Pager to work in the playground. I tried to use the example given as a starting point , but it doesn't work either.

Is this an issue with plugin or with the playground?

Swipe events not triggering on Android

Hello guys!

I'm trying to track the user's swipes to perform certain actions, but to me, none of the swipe listeners triggers. I'm using the pager like this:

 <Pager [items]="videos" circularMode="true" showIndicator="true" indicator="thin_worm" indicatorColor="#4e4631"
        indicatorSelectedColor="#77567a" autoplay="false" (swipeStart)="onSwipeStart($event)"
        (swipeOver)="onSwipe($event)" (swipeEnd)="onSwipeEnd($event)">

where all of the functions that are supposed to trigger just print the event on the console.

I'm using Android, Angular 13, NS 8.2 and the latest plugin version 13.0.42

"ɵisListLikeIterable" was not found in @angular/core

running ns build android with latest angular version throws error

ns -v => 8.5.1
angular =>
"@angular/animations": "~15.2.0",
"@angular/common": "~15.2.0",
"@angular/compiler": "~15.2.0",
"@angular/core": "~15.2.0",
"@angular/fire": "~6.0.2",
"@angular/forms": "~15.2.0",
"@angular/localize": "10.1.2",
"@angular/platform-browser": "~15.2.0",
"@angular/platform-browser-dynamic": "~15.2.0",
"@angular/router": "~15.2.0",

modules by path ./src/ 748 KiB
  modules by path ./src/app/ 706 KiB 177 modules
  modules by path ./src/*.ts 8.15 KiB 3 modules
  ./src/app.scss 33.8 KiB [built] [code generated]
  ./src/environments/environment.prod.ts 168 bytes [built] [code generated]
external "~/package.json" 42 bytes [optional] [built] [code generated]

ERROR in ./node_modules/@nativescript-community/ui-pager/angular/fesm2015/nativescript-community-ui-pager-angular.mjs 39:43-62
export 'ɵisListLikeIterable' (imported as 'ɵisListLikeIterable') was not found in '@angular/core' (possible exports: ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, APP_INITIALIZER, ApplicationInitStatus, ApplicationModule, ApplicationRef, Attribute, COMPILER_OPTIONS, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Compiler, CompilerFactory, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ContentChild, ContentChildren, DEFAULT_CURRENCY_CODE, DebugElement, DebugEventListener, DebugNode, DefaultIterableDiffer, Directive, ENVIRONMENT_INITIALIZER, ElementRef, EmbeddedViewRef, EnvironmentInjector, ErrorHandler, EventEmitter, Host, HostBinding, HostListener, INJECTOR, Inject, InjectFlags, Injectable, InjectionToken, Injector, Input, IterableDiffers, KeyValueDiffers, LOCALE_ID, MissingTranslationStrategy, ModuleWithComponentFactories, NO_ERRORS_SCHEMA, NgModule, NgModuleFactory, NgModuleRef, NgProbeToken, NgZone, Optional, Output, PACKAGE_ROOT_URL, PLATFORM_ID, PLATFORM_INITIALIZER, Pipe, PlatformRef, Query, QueryList, ReflectiveInjector, ReflectiveKey, Renderer2, RendererFactory2, RendererStyleFlags2, ResolvedReflectiveFactory, Sanitizer, SecurityContext, Self, SimpleChange, SkipSelf, TRANSLATIONS, TRANSLATIONS_FORMAT, TemplateRef, Testability, TestabilityRegistry, Type, VERSION, Version, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation, ViewRef, asNativeElements, assertPlatform, createComponent, createEnvironmentInjector, createNgModule, createNgModuleRef, createPlatform, createPlatformFactory, defineInjectable, destroyPlatform, enableProdMode, forwardRef, getDebugNode, getModuleFactory, getNgModuleById, getPlatform, importProvidersFrom, inject, isDevMode, isStandalone, makeEnvironmentProviders, platformCore, reflectComponentType, resolveForwardRef, setTestabilityGetter, ɵALLOW_MULTIPLE_PLATFORMS, ɵAPP_ID_RANDOM_PROVIDER, ɵComponentFactory, ɵConsole, ɵDEFAULT_LOCALE_ID, ɵINJECTOR_SCOPE, ɵLContext, ɵLifecycleHooksFeature, ɵLocaleDataIndex, ɵNG_COMP_DEF, ɵNG_DIR_DEF, ɵNG_ELEMENT_ID, ɵNG_INJ_DEF, ɵNG_MOD_DEF, ɵNG_PIPE_DEF, ɵNG_PROV_DEF, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR, ɵNO_CHANGE, ɵNgModuleFactory, ɵNoopNgZone, ɵReflectionCapabilities, ɵRender3ComponentFactory, ɵRender3ComponentRef, ɵRender3NgModuleRef, ɵRuntimeError, ɵTESTABILITY, ɵTESTABILITY_GETTER, ɵViewRef, ɵXSS_SECURITY_URL, ɵ_sanitizeHtml, ɵ_sanitizeUrl, ɵallowSanitizationBypassAndThrow, ɵbypassSanitizationTrustHtml, ɵbypassSanitizationTrustResourceUrl, ɵbypassSanitizationTrustScript, ɵbypassSanitizationTrustStyle, ɵbypassSanitizationTrustUrl, ɵclearResolutionOfComponentResourcesQueue, ɵcoerceToBoolean, ɵcompileComponent, ɵcompileDirective, ɵcompileNgModule, ɵcompileNgModuleDefs, ɵcompileNgModuleFactory, ɵcompilePipe, ɵconvertToBitFlags, ɵcreateInjector, ɵdefaultIterableDiffers, ɵdefaultKeyValueDiffers, ɵdetectChanges, ɵdevModeEqual, ɵfindLocaleData, ɵflushModuleScopingQueueAsMuchAsPossible, ɵformatRuntimeError, ɵgetDebugNode, ɵgetDebugNodeR2, ɵgetDirectives, ɵgetHostElement, ɵgetInjectableDef, ɵgetLContext, ɵgetLocaleCurrencyCode, ɵgetLocalePluralCase, ɵgetSanitizationBypassType, ɵgetUnknownElementStrictMode, ɵgetUnknownPropertyStrictMode, ɵglobal, ɵinjectChangeDetectorRef, ɵinternalCreateApplication, ɵisBoundToModule, ɵisEnvironmentProviders, ɵisInjectable, ɵisNgModule, ɵisObservable, ɵisPromise, ɵisSubscribable, ɵmakeDecorator, ɵnoSideEffects, ɵpatchComponentDefWithScope, ɵpublishDefaultGlobalUtils, ɵpublishGlobalUtil, ɵregisterLocaleData, ɵresetCompiledComponents, ɵresetJitOptions, ɵresolveComponentResources, ɵsetAllowDuplicateNgModuleIdsForTest, ɵsetClassMetadata, ɵsetCurrentInjector, ɵsetDocument, ɵsetLocaleId, ɵsetUnknownElementStrictMode, ɵsetUnknownPropertyStrictMode, ɵstore, ɵstringify, ɵtransitiveScopesFor, ɵunregisterLocaleData, ɵunwrapSafeValue, ɵɵCopyDefinitionFeature, ɵɵFactoryTarget, ɵɵHostDirectivesFeature, ɵɵInheritDefinitionFeature, ɵɵNgOnChangesFeature, ɵɵProvidersFeature, ɵɵStandaloneFeature, ɵɵadvance, ɵɵattribute, ɵɵattributeInterpolate1, ɵɵattributeInterpolate2, ɵɵattributeInterpolate3, ɵɵattributeInterpolate4, ɵɵattributeInterpolate5, ɵɵattributeInterpolate6, ɵɵattributeInterpolate7, ɵɵattributeInterpolate8, ɵɵattributeInterpolateV, ɵɵclassMap, ɵɵclassMapInterpolate1, ɵɵclassMapInterpolate2, ɵɵclassMapInterpolate3, ɵɵclassMapInterpolate4, ɵɵclassMapInterpolate5, ɵɵclassMapInterpolate6, ɵɵclassMapInterpolate7, ɵɵclassMapInterpolate8, ɵɵclassMapInterpolateV, ɵɵclassProp, ɵɵcontentQuery, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdefineInjectable, ɵɵdefineInjector, ɵɵdefineNgModule, ɵɵdefinePipe, ɵɵdirectiveInject, ɵɵdisableBindings, ɵɵelement, ɵɵelementContainer, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵenableBindings, ɵɵgetCurrentView, ɵɵgetInheritedFactory, ɵɵhostProperty, ɵɵi18n, ɵɵi18nApply, ɵɵi18nAttributes, ɵɵi18nEnd, ɵɵi18nExp, ɵɵi18nPostprocess, ɵɵi18nStart, ɵɵinject, ɵɵinjectAttribute, ɵɵinvalidFactory, ɵɵinvalidFactoryDep, ɵɵlistener, ɵɵloadQuery, ɵɵnamespaceHTML, ɵɵnamespaceMathML, ɵɵnamespaceSVG, ɵɵnextContext, ɵɵngDeclareClassMetadata, ɵɵngDeclareComponent, ɵɵngDeclareDirective, ɵɵngDeclareFactory, ɵɵngDeclareInjectable, ɵɵngDeclareInjector, ɵɵngDeclareNgModule, ɵɵngDeclarePipe, ɵɵpipe, ɵɵpipeBind1, ɵɵpipeBind2, ɵɵpipeBind3, ɵɵpipeBind4, ɵɵpipeBindV, ɵɵprojection, ɵɵprojectionDef, ɵɵproperty, ɵɵpropertyInterpolate, ɵɵpropertyInterpolate1, ɵɵpropertyInterpolate2, ɵɵpropertyInterpolate3, ɵɵpropertyInterpolate4, ɵɵpropertyInterpolate5, ɵɵpropertyInterpolate6, ɵɵpropertyInterpolate7, ɵɵpropertyInterpolate8, ɵɵpropertyInterpolateV, ɵɵpureFunction0, ɵɵpureFunction1, ɵɵpureFunction2, ɵɵpureFunction3, ɵɵpureFunction4, ɵɵpureFunction5, ɵɵpureFunction6, ɵɵpureFunction7, ɵɵpureFunction8, ɵɵpureFunctionV, ɵɵqueryRefresh, ɵɵreference, ɵɵregisterNgModuleType, ɵɵresetView, ɵɵresolveBody, ɵɵresolveDocument, ɵɵresolveWindow, ɵɵrestoreView, ɵɵsanitizeHtml, ɵɵsanitizeResourceUrl, ɵɵsanitizeScript, ɵɵsanitizeStyle, ɵɵsanitizeUrl, ɵɵsanitizeUrlOrResourceUrl, ɵɵsetComponentScope, ɵɵsetNgModuleScope, ɵɵstyleMap, ɵɵstyleMapInterpolate1, ɵɵstyleMapInterpolate2, ɵɵstyleMapInterpolate3, ɵɵstyleMapInterpolate4, ɵɵstyleMapInterpolate5, ɵɵstyleMapInterpolate6, ɵɵstyleMapInterpolate7, ɵɵstyleMapInterpolate8, ɵɵstyleMapInterpolateV, ɵɵstyleProp, ɵɵstylePropInterpolate1, ɵɵstylePropInterpolate2, ɵɵstylePropInterpolate3, ɵɵstylePropInterpolate4, ɵɵstylePropInterpolate5, ɵɵstylePropInterpolate6, ɵɵstylePropInterpolate7, ɵɵstylePropInterpolate8, ɵɵstylePropInterpolateV, ɵɵsyntheticHostListener, ɵɵsyntheticHostProperty, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextInterpolate, ɵɵtextInterpolate1, ɵɵtextInterpolate2, ɵɵtextInterpolate3, ɵɵtextInterpolate4, ɵɵtextInterpolate5, ɵɵtextInterpolate6, ɵɵtextInterpolate7, ɵɵtextInterpolate8, ɵɵtextInterpolateV, ɵɵtrustConstantHtml, ɵɵtrustConstantResourceUrl, ɵɵvalidateIframeAttribute, ɵɵviewQuery)
 @ ./src/app/app.module.ts 21:0-71 49:8-19
 @ ./src/main.ts 6:0-45 117:69-78

webpack 5.74.0 compiled with 1 error in 21118 ms
Webpack compilation complete.
Executing webpack failed with exit code 1.

Error when importing transformer from @nativescript-community/ui-pager/transformers/Scale

Hi guys i'm getting an error when trying to register the transformer

TS2307: Cannot find module '@nativescript-community/ui-pager/transformers/Scale' or its corresponding type declarations.
    14 |
    15 | import { Pager } from '@nativescript-community/ui-pager';
  > 16 | import transformer from '@nativescript-community/ui-pager/transformers/Scale';
       |                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    17 |
    18 | Pager.registerTransformer('scale', transformer)
    19 |

[ios] custom transition error when change selectedIndex manually

I have noticed in ios a bug when using custom transformers, if you select from outside an item number when you scroll it doesn't work well, you get stuck in the middle of the item. I think it's this line: https://github.com/nativescript-community/ui-pager/blob/master/src/ui-pager/index.ios.ts#L383-L386 I don't know if we should take into account the transformation of the view
this is a repo for example: https://github.com/vallemar/nativescript-burger-inspiration if tap on the thumbnails of the hamburgers the scroll gets stuck.

Grabacion_de_pantalla_2023-01-29_a_las_21.59.16.1.mov

NativeScript Vue Pager issues with spacing, peaking and disable swipe

Hi I'm using the Pager in a NativeScript Vue application but I'm facing some problems with some of the component's properties. So far I've been testing on Android - using version 13.0.37.

1. Setting spacing and/or peaking does not render items properly on load

   <Pager
     for="item in list"
     height="100%"
     spacing="5%"
     peaking="10%"
     :showIndicator="true"
     :canGoRight="false"
     indicatorColor="white"
     indicatorSelectedColor="gray"
     :selectedIndex="selectedIndex"
   >
     <v-template>
       <StackLayout height="90%" :class="$index % 2 === 0 ? 'bg-yellow-300' : 'bg-forest-green-400'" />
     </v-template>
   </Pager>

   The above code sets spacing to 5% and peaking to 10%. Here's a video to show case the result - here the selected item is at index 2:

   Screen.Recording.2022-07-05.at.10.52.51.mov

   You will notice that there is no space between the pager items - once you start swiping the space is then taken into consideration.

2. Setting canGoLeft / canGoRight to false doesn't seem to work

   The Pager in code and video show above has the canGoRight property set to false, however I am allowed to swipe to the right. Are there some other properties that should be set please?

Using Observable Array in Pager

NativeScript Vue

I have an Observable Array containing objects as each item.

I pass the Observable Array as a Prop into the component.

When I try to iterate through the Observable Array in the Pager, it does not work. I created an empty array in the data, and then push each observable array and it works. However ideally would like the Observable array being passed in from the prop to work.

<template>
 <Pager
      height="75%"
      width="100%"
      backgroundColor="yellow"
      :showIndicator="true"
      for="item in items"
    >
      <v-template>
        <Label :text="item" />
      </v-template>
      </template>
<script>
import { ObservableArray } from '@nativescript/core';
export default {
  props: {
    items: {
      type: ObservableArray,
      default: null,
      required: true,
    },
}
}

Peaking issue (android only)

We use peaking with percentage value (12% for portrait and 36% for landscape)
With version 13.x all is fine on both platforms.
With version 14.x the peaking seems to be ignored on android (width 100%)
Still working fine on iOS.

Indicator is not shown when it has PagerItems defined, the property showIndicator is true

When defining PagerItems as Pager content, the indicator is not shown (showIndicator is set true)
I'm using nativescript-vue

Dependencies:
"@nativescript-community/ui-pager": "^13.0.37",
"@nativescript/core": "^8.2.1",
"@nativescript/android": "^8.2.2",
"@nativescript/ios": "^8.2.2",
"@nativescript/types": "^8.0.0",
"nativescript-vue": "~2.9.0"

Code:

  <Page>
    <ActionBar>
      <Label text="Home"/>
    </ActionBar>
    <GridLayout height="300" width="100%" backgroundColor="white">
      <Pager
        height="250"
        width="100%"
        orientation="horizontal"
        :selectedIndex="selectedIndex"
        @selectedIndexChange="onSelectedIndexChanged"
        verticalAlignment="top"
        indicator="fill"
        indicatorColor="blue"
        indicatorSelectedColor="red"
        showIndicator="true"
      >
        <PagerItem v-for="(item, i) in items" :key="i">
         <GridLayout height="100%" :backgroundColor="item.color" opacity="0.5">
            <Label verticalAlignment="top" :text="item.title" />
            <Button  verticalAlignment="middle" @tap="onTap" :text="'Click ' + item.title" />
          </GridLayout> 
        </PagerItem>
      </Pager>
    </GridLayout>
  </Page>
</template>
<script lang="ts">
  import Vue from "nativescript-vue"

  export default Vue.extend({
     data() {
      return {
        items: [
          { title: 'First', color: '#e67e22' },
          { title: 'Second', color: '#3498db' },
          { title: 'Third', color: '#e74c3c' },
          { title: 'Fourth', color: '#9b59b6' },
        ],
        selectedIndex: 0,
      }
    },
    methods: {
      onTap() {
        console.log('***********************On tapped')
      },
      onSelectedIndexChanged(args: { value:number }){
        this.selectedIndex = args.value;
      },
    }
  });
</script>```

BREAKING CHANGE - Can't resolve some modules in 13.0.34

After rebuilding node_modules our app couldn't be build anymore. While building you get the following log output errors:

Module not found: Error: Can't resolve '@nativescript/core/data/observable-array' in '/Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/ui-pager/angular/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@nativescript/core/data/observable-array' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve '@nativescript/core/data/observable-array' in '/Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/ui-pager/angular/fesm2015'
  Parsed request is a module
  using description file: /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/ui-pager/angular/package.json (relative path: ./fesm2015)
    resolve as module
      looking for modules in /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules
        existing directory /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core
          using description file: /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core/package.json (relative path: .)
            using description file: /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core/package.json (relative path: ./data/observable-array)
              /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core/data/observable-array is not a file
      /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/ui-pager/angular/fesm2015/node_modules doesn't exist or is not a directory
      /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/ui-pager/angular/node_modules doesn't exist or is not a directory
      /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/ui-pager/node_modules doesn't exist or is not a directory
      /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript-community/node_modules doesn't exist or is not a directory
      /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules
        existing directory /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core
          using description file: /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core/package.json (relative path: .)
            using description file: /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core/package.json (relative path: ./data/observable-array)
              /Users/Shared/Entwicklung/xxx/nativescript-xxx-app/node_modules/@nativescript/core/data/observable-array is not a file
      /Users/Shared/Entwicklung/xxx/node_modules doesn't exist or is not a directory
      /Users/Shared/Entwicklung/node_modules doesn't exist or is not a directory
      /Users/Shared/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/dashboard/dashboard.module.ts 4:0-71 10:134-145
 @ ./src/app/app-routing.module.ts 41:28-70
 @ ./src/app/app.module.ts 26:0-56 189:12-28
 @ ./src/main.ts 6:0-45 10:69-78

The same error appears also for the packages:

• @nativescript/core/profiling

Because we had
"@nativescript-community/ui-pager": "^13.0.33"
the breaking changes were updated automatically.

We fixed the issue with specifing the previous version with:
"@nativescript-community/ui-pager": "13.0.33"

Let me know, if you need any more information.