Nativescript-angular: Use nativescript-pulltorefresh in a Nativescript/angular project

[ngydat]

Hello everyone

Has anyone used this Nativescript plugin in a Nativescript/Angular project and if so, can he/she tell me how to integrate the plugin properly ?

Thank you

[matt4446]

I've looked (as I plan to add it), but have not got around to adding it. Nathan may have ... however a few of the controls are not that hard to add (some can be challenging however).

Firstly Ignore the xml namespaces.

1. Add in the package.json
2. The element needs to be registered to be a valid element. (add to a component somewhere:)

import { registerElement, ViewClass } from "nativescript-angular/element-registry";
//use <pullToRefresh></pullToRefresh> to use in xml
registerElement("pullToRefresh", require("nativescript-pulltorefresh").PullToRefresh)

That's the start at least. I'll have to look at it in the evening to work out the rest or if there is any challenges with it. .

[ngydat]

Ok before adding the pull-to-refresh feature here's what my page looks like

<TabView> <StackLayout *tabItem="{title: 'Accueil'}"> </StackLayout> <StackLayout *tabItem="{title: 'Notifications'}"> <ListView [items]="notificationsList"> <template #item="item"> <Label text="{{item.text}}" textWrap="true" id="notif" [class.boldFont]="!item.status"></Label> </template> </ListView> </StackLayout> </TabView>
And when I add the 2 lines in the typescript file (+the pullToRefresh element in the xml), I get this error in the execution :
EXCEPTION: TypeError: viewClass is not a function in [{title: 'Notifications'}

[matt4446]

You need to add:
"nativescript-pulltorefresh" : "~1.1.0", to your root package.json and run npm install on the directory to get the package. The error suggests it cant find what it needs.

The register element is definately correct :)

registerElement("PullToRefresh", () => {
    var viewClass = require("nativescript-pulltorefresh").PullToRefresh;
    console.log("PullToRefresh viewclass:");
    console.log(viewClass);

    return viewClass;
});

page component (The example above)

pull to refresh component (probably not needed, but fits into my application better)

Any more problems then let us know.

[ngydat]

So I checked the links you gave me and I already have an error when I compile with tsc :(
At first I was told that they couldn't find the module nativescript-pulltorefresh when I typed this line
import { PullToRefresh } from "nativescript-pulltorefresh";

Then I realized it was because I forgot to add this line
/// <reference path="../../../node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts" />

But now that I did it, I have this error on the console :

node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(13,18): error TS2415: Class 'PullToRefresh' incorrectly extends base class 'ContentView'.

Types of property 'on' are incompatible. Type '(event: "refresh", callback: (args: EventData) => void, thisArg?: any) => any' is not assignable to type '{ (eventNames: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any): any; (...'. node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(34,25): error TS2304: Cannot find name 'UIRefreshControl'. node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(44,9): error TS2382: Specialized overload signature is not assignable to any non-specialized signature.

Well maybe it's because my code doesn't look exactly like yours (I mean I don't have all these subfolders in the app folders)

[matt4446]

I forgot about that reference as well. I hid the cardview reference in tsconfig.json file and forgot about it.

And that is during the build (typescript) stage?
How does your tsconfig.json file look?
Here is mine

I might have errors in the typesript files but it should still run.

Sub folders dont matter much (good for separation) ... just ends up with more or less ../ in <reference path="../../../node_modules

Looking at the errors however...

error TS2382: Specialized overload signature is not assignable to any non-specialized signature

I think its referring to this

on(event: "refresh", callback: (args: observable.EventData) => void, thisArg?: any);
//Typescript wants a simple version like ... probably 
on(event: string, callback : (args: observable.EventData) => void, thisArg? : any);

import contentView = require("ui/content-view"); returns any so it doesnt know about the base methods (I could be wrong - i so rarely use require).
So how does it know about this:

Types of property 'on' are incompatible. Type '(event: "refresh", callback: (args: EventData) => void, thisArg?: any) => any' is not assignable to type '{ (eventNames: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any): any

Lastly

Cannot find name 'UIRefreshControl'. node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(44,9): error TS2382

that should be in tns core I believe (another reference)... this line in tsconfig.json might help
"node_modules/tns-core-modules/tns-core-modules.base.d.ts",

[matt4446]

And make sure you have TypeScript set to not include node_modules

[ngydat]

Here is my tsconfig.json file :

{
"compilerOptions": {
"outDir": "app",
"rootDir": "app",
"module": "commonjs",
"target": "es5",
"inlineSourceMap": true,
"experimentalDecorators": true,
"removeComments": false,
"emitDecoratorMetadata": true,
"noEmitOnError": true
},
"exclude": [
"node_modules",
"platforms"
],
"atom": {
"rewriteTsconfig": true,
"formatOnSave": true
}
}

When I write the tsconfig.json this way I only get the error I mentioned above but once I add the files section like you did with just this line :
"node_modules/tns-core-modules/tns-core-modules.base.d.ts"
I don't have the error anymore but I have other ones, always of the same type (TS2304 cannot find name ...).
And if I add the other .ts files in the files section, I have all the mentioned errors

Edit : and as for the errors, I get those when I type the command tsc in the terminal

Edit2: Indeed , in the method on of the class PullToRefresh, when I replace the type of the event parameter with string, the error goes away

[matt4446]

If you just try and run it: tns run android for example how far does it get?

... boring errors ... like
node_modules/angular2/src/router/router.d.ts(138,19): error TS2314: Generic type 'Promise<R, T>' requires 2 type argument(s).
node_modules/angular2/src/router/router.d.ts(146,70): error TS2314: Generic type 'Promise<R, T>' requires 2 type argument(s).
node_modules/nativescript-angular/application.d.ts(9,95): error TS2314: Generic type 'Promise<R, T>' requires 2 type argument(s).

and then

node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(13,18): error TS2415: Class 'PullToRefresh' incorrectly extends base class 'ContentView'.
  Types of property 'on' are incompatible.
    Type '(event: "refresh", callback: (args: EventData) => void, thisArg?: any) => any' is not assignable to type '{ (eventNames: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any): any; (...'.
      Type '(event: "refresh", callback: (args: EventData) => void, thisArg?: any) => any' provides no match for the signature '(eventNames: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any): any'
node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(34,25): error TS2304: Cannot find name 'UIRefreshControl'.
node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(44,9): error TS2382: Specialized overload signature is not assignable to any non-specialized signature.

... well i get the same thing but it deploys and runs.

Successfully prepared plugin nativescript-cardview for android.
Successfully prepared plugin nativescript-intl for android.
Successfully prepared plugin nativescript-pulltorefresh for android.
Successfully prepared plugin tns-core-modules for android.
Project successfully prepared

:config phase:  createDefaultIncludeFiles
        +found plugins: nativescript-cardview

:config phase:  createPluginsConfigFile
        +creating product flavors include.gradle file in configurations folder...

:config phase:  pluginExtend
        +applying configuration from: H:\WhatsMyScore2\WhatsMyScoreNativeScript\platforms\android\configurations\include.gradle
        +applying configuration from: H:\WhatsMyScore2\WhatsMyScoreNativeScript\platforms\android\configurations\nativescript-cardview\include.gradle

:config phase:  copyAarDependencies

:config phase:  addAarDependencies
        +adding dependency: H:\WhatsMyScore2\WhatsMyScoreNativeScript\platforms\android\libs\aar\widgets-release.aar
:preBuild UP-TO-DATE
:preNativescriptcardviewDebugBuild UP-TO-DATE
:checkNativescriptcardviewDebugManifest
:preNativescriptcardviewReleaseBuild UP-TO-DATE
:prepareComAndroidSupportAppcompatV72311Library
:prepareComAndroidSupportCardviewV72311Library
:prepareComAndroidSupportSupportV42311Library
:prepareWidgetsReleaseLibrary
:prepareNativescriptcardviewDebugDependencies
:compileNativescriptcardviewDebugAidl
:compileNativescriptcardviewDebugRenderscript
:generateNativescriptcardviewDebugBuildConfig
:generateNativescriptcardviewDebugAssets UP-TO-DATE
etc 

BUILD SUCCESSFUL

Total time: 1 mins 16.725 secs
Project successfully built
Successfully deployed on device with identifier '192.168.247.101:5555'.
JS: Setup App annotations
JS: DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
JS: Page loaded
JS: BOOTSTRAPPING...
JS: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE.

[ngydat]

I can get only this far :

node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(13,18): error TS2415: Class 'PullToRefresh' incorrectly extends base class 'ContentView'.

Types of property 'on' are incompatible. Type '(event: "refresh", callback: (args: EventData) => void, thisArg?: any) => any' is not assignable to type '{ (eventNames: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any): any; (...'. Type '(event: "refresh", callback: (args: EventData) => void, thisArg?: any) => any' provides no match for the signature '(eventNames: string | GestureTypes, callback: (data: EventData) => void, thisArg?: any): any'

node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(34,25): error TS2304: Cannot find name 'UIRefreshControl'.

node_modules/nativescript-pulltorefresh/pulltorefresh.d.ts(44,9): error TS2382: Specialized overload signature is not assignable to any non-specialized signature.

TypeScript compiler failed with exit code 1

Edit : what I meant earlier when I told you I don't have all these subfolders like you do is that I don't have the same project structure : all I have is the typescript file for the logic of the page and the html file for the view. I can see in your repo that you have all these files like the decorators, the controls,...

[matt4446]

The project structure is for my own benefit really - easier to find things (I keep disagreeing with myself on naming and folders). Some parts are just to learn angular2 and nativescript.

The decorators are extending @component and set most of my directives / providers (saving effort on pages and components. I might split them all off into a new project that can be included in new projects as I'll probably reuse most of it again in a new project.

Back to the problem:

This should fix TS2415, TS2382:
https://github.com/bradmartin/nativescript-pulltorefresh/pull/6
You can always edit the file in node_modules in the meantime.

TS2304
simple fix - ios.dummy.d.ts
which I have referenced in tsd.d.ts
and tsd.d.ts is included in tsconfig.json
which is then globally available for typescript, which makes the compiler happier when it runs for pull to refresh.

Any more typescript errors if you make those two changes?

[ngydat]

So I tried what you said with the same view you put in your second post (the one with the gif) and it worked (even though I don't really have the refresh animation). But when I try with another view (like this one), I have this error.
Here's what my compoment looks like : home.component.ts

Edit : nevermind, in the view I just had to put the listview between StackLayout tag element (like this). Thank you for your time

[ngydat]

Now that I updated angular2 to RC1, the code doesn't seem to work : "Failed to find module "nativescript-pulltorefresh", relative to /app/tns_modules/"

Did you change anything @matt4446 when you updated angular2 ?

Edit : the issue comes actually from the most recent version of nativescript-pulltorefresh (1.1.1)

Edit2 : it's solved