This is a migrated thread and some comments may be shown as answers.

RadListView and the plugin nativescript-imagepicker

13 Answers 268 Views

ListView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

13 Answers, 1 is accepted

answered on 07 Feb 2017, 01:12 PM

Hello,

I reviewed your case and confirm that this is a real issue while using `---pro` and `-` in a NativeScript project. The problem has been related to the fact that `` plugin uses `RadListView` and has `--` as a dependency. When we use the both plugins in the same app, the build will fail.
This problem has been reported here and you could keep track on it for further info. However, in case you need the both plugins, you could follow the below-described steps, which will the problem.

1. open node_modules and delete nativescript-telerik-ui folder.
2. open node_modules/nativescript-imagepicker/package.json file.
search for nativescript-telerik-ui and change the dependency name to nativescript-telerik-ui-pro
3.open node_modules/nativescript-imagepicker/images.ios.js file and replace

var listview_1 = require("nativescript-telerik-ui/listview");

with

var listview_1 = require("nativescript-telerik-ui-pro/listview");

4. the last step is to remove platform with tns platform remove <platform_name>
5. build with tns run <platform_name>

Keep in mind that if you remove folder you should make those changes again.
Regards,
nikolay.tsonev
Telerik by Progress

Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.

answered on 25 Feb 2017, 09:28 AM

Hello,

Thanks for you workground. I tried for android emulator and It works well .But for IOS simulator, I even changed nativescript-imagepicker/images.xml to "<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded"
xmlns:lv="nativescript-telerik-ui-pro/listview">" .It still has the error below, I don't know why .Can you help me?

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): Error: Could not find module 'nativescript-telerik-ui/listview'. Computed path '/Users/Emerson/Library/Developer/CoreSimulator/Devices/49D85C01-F288-4820-997D-9DCC3B5CB7A0/data/Containers/Bundle/Application/D58A9202-A2F7-463F-894B-529A05817004/gp2mobilenew.app/app/tns_modules/nativescript-telerik-ui/listview'.

answered on 27 Feb 2017, 08:31 AM

Hello,

Thank you for contacting us back.
I reviewed your case, however, was unable to reproduce this behavior on my side.

Perhaps this issue has been related to some old files that exist in platforms/ios folder and has not been removed properly while rebuilding the app.

When you make the needed changes for replacing nativescript-- with --ui-pro, delete platforms folder from your project and try again to rebuild the app with run ios.

If this does not resolve your problem, please send us a sample project with folder, where the problem could be debugged locally.

Regards,
nikolay.tsonev
Telerik by Progress

answered on 01 Mar 2017, 12:52 PM

error-scroll.png

Hi,

In order to let you reproduce my problem, I attach my code in github.(https://github.com/ITonly/add-image) . This time a more strange problem . I changed the nativescript-imagepicker plugin locally just like you said above and npm pack it to nativescript-imagepicker-2.5.1.tgz, and put it on my project /package . Everything works well except on IOS device(not simulator ,simulator works well ,and android works well both for device and emulator ). In order to protect nativescript-ui-pro.tgz, I delete it . When you run the demo , please put it under package directory. The error is in the followed file. I even delete the scrollDirection code that the nativescript-imagepicker plugin has ,but the error on IOS device exists . It upset me so much . Can you help me?

answered on 01 Mar 2017, 02:53 PM

Hi,
Perhaps the problem has been related to need to refer the local nativescript-ui-pro.tgz file in package. file. You could review the below-attached steps, where I include some extra setup steps while using a local file.

1. delete node_modules, platforms, hooks folders
2. run install in the terminal
3.open node_modules and delete folder.
4. open node_modules/-/package. file.
search for --, change the dependency name to ---pro and setup the path to your nativescript-ui-pro.tgz. For example:

"nativescript-telerik-ui-pro": "file:package/nativescript-ui-pro.tgz",

5.open node_modules/nativescript-imagepicker/images.ios.js file and replace

var listview_1 = require("nativescript-telerik-ui/listview")

with

var listview_1 = require("nativescript-telerik-ui-pro/listview");

6.open node_modules/-/images.xml file and replace

xmlns:lv="nativescript-telerik-ui/listview"

with

xmlns:lv="nativescript-telerik-ui-pro/listview"

7. build with run ios

Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress

answered on 06 Mar 2017, 10:41 AM

Hello License,

I tested again your sample project on my side while using file from your project and a local nativescript-ui-pro.tgz file, however, I am still unable to reproduce the same behavior.

Regarding that, it would help if you could provide some more info about your environment(CLI, node versions ) and info about the device, you are using for testing.

In the you could verify, whether you will have the same behavior while using the -imagepicker from NPM, instead of using your local file and to apply the described setup steps from my previous message. For your convenience, I am attaching sample package. file.

package.json

{

"description": "NativeScript GuanPlus Application",

"license": "SEE LICENSE IN <your-license-filename>",

"readme": "NativeScript GuanPlus Application",

"repository": "<fill-your-repository-here>",

"nativescript": {

"id": "com.concordya.mobile.gp2",

"tns-ios": {

"version": "2.5.0"

},

"tns-android": {

"version": "2.5.0"

}

},

"dependencies": {

"@angular/common": "2.4.8",

"@angular/compiler": "2.4.8",

"@angular/core": "2.4.8",

"@angular/forms": "2.4.8",

"@angular/http": "2.4.8",

"@angular/platform-browser": "2.4.8",

"@angular/platform-browser-dynamic": "2.4.8",

"@angular/router": "3.4.8",

"crypto-js": "3.1.8",

"lodash": "4.17.4",

"moment": "2.17.1",

"nativescript-angular": "1.4.0",

"nativescript-appversion": "1.3.3",

"nativescript-background-http": "2.5.1",

"nativescript-camera": "0.0.8",

"nativescript-dom": "1.0.8",

"nativescript-drop-down": "*",

"nativescript-fingerprint-auth": "3.0.1",

"nativescript-imagepicker": "*",

"nativescript-iqkeyboardmanager": "1.0.1",

"nativescript-loading-indicator": "2.2.2",

"nativescript-master-technology": "*",

"nativescript-permissions": "^1.2.3",

"nativescript-social-share": "1.3.2",

"nativescript-telerik-ui-pro": "file:package/nativescript-ui-pro.tgz",

"nativescript-toast": "1.4.5",

"nativescript-web-image-cache": "*",

"nativescript-webview-interface": "1.4.1",

"reflect-metadata": "0.1.9",

"rxjs": "5.2.0",

"tns-core-modules": "2.5.1"

},

"devDependencies": {

"@angular/compiler-cli": "2.4.8",

"@ngtools/webpack": "1.2.10",

"@types/cryptojs": "3.1.29",

"@types/lodash": "4.14.52",

"babel-traverse": "6.23.1",

"babel-types": "6.23.0",

"babylon": "6.15.0",

"codelyzer": "2.0.1",

"copy-webpack-plugin": "4.0.1",

"css-loader": "0.26.1",

"extract-text-webpack-plugin": "2.0.0-beta.4",

"fs-extra": "2.0.0",

"glob": "7.1.1",

"htmlparser2": "3.9.2",

"lazy": "1.0.11",

"nativescript-css-loader": "0.26.1",

"nativescript-dev-sass": "0.4.2",

"nativescript-dev-typescript": "0.3.7",

"nativescript-dev-webpack": "0.3.3",

"node-sass": "4.5.0",

"raw-loader": "0.5.1",

"resolve-url-loader": "2.0.0",

"sass-loader": "6.0.1",

"tslint": "4.4.2",

"typescript": "2.1.6",

"webpack": "2.2.1",

"webpack-sources": "0.1.4",

"zone.js": "0.7.7"

},

"scripts": {

"clean-android": "tns clean-app android",

"clean-ios": "tns clean-app ios",

"compile-scss-ios": "OS='ios' node config/nativescript-sass-compile.js",

"compile-scss-android": "OS='android' node config/nativescript-sass-compile.js",

"prewebpack-android": "npm run clean-android",

"prewebpack-ios": "npm run clean-ios",

"webpack-android": "npm run compile-scss-android && webpack --config=webpack.android.js --progress",

"webpack-ios": "npm run compile-scss-ios && webpack --config=webpack.ios.js --progress",

"prestart-android-bundle": "npm run webpack-android",

"prestart-ios-bundle": "npm run webpack-ios",

"start-android-bundle-dev": "ENV_NODE='development' npm run start-android-bundle",

"start-android-bundle-stage": "ENV_NODE='stage' npm run start-android-bundle",

"start-android-bundle-prod": "ENV_NODE='production' npm_config_uglify=true npm run start-android-bundle -- --release  --key-store-path gp2-mobile.jks --key-store-password Qq123456 --key-store-alias guanplus --key-store-alias-password Qq123456",

"start-android-bundle": "tns run android --bundle --disable-npm-install",

"start-ios-bundle-dev": "ENV_NODE='development' npm run start-ios-bundle",

"start-ios-bundle-stage": "ENV_NODE='stage' npm run start-ios-bundle",

"start-ios-bundle-prod": "ENV_NODE='production' npm_config_uglify=true npm run start-ios-bundle",

"start-ios-bundle": "tns run ios --bundle --disable-npm-install",

"build-android-bundle-dev": "ENV_NODE='development' npm run build-android-bundle",

"build-android-bundle-stage": "ENV_NODE='stage' npm run build-android-bundle",

"build-android-bundle-prod": "ENV_NODE='production' npm_config_uglify=true npm run build-android-bundle -- --release  --key-store-path gp2-mobile.jks --key-store-password Qq123456 --key-store-alias guanplus --key-store-alias-password Qq123456",

"prebuild-android-bundle": "npm run webpack-android",

"prebuild-ios-bundle": "npm run webpack-ios",

"build-android-bundle": "tns build android --bundle --disable-npm-install",

"build-ios-bundle-dev": "ENV_NODE='development' npm run build-ios-bundle",

"build-ios-bundle-stage": "ENV_NODE='stage' npm run build-ios-bundle",

"build-ios-bundle-prod": "ENV_NODE='production' npm run build-ios-bundle -- --release --for-device",

"build-ios-bundle": "tns build ios --bundle --disable-npm-install"

}

Thank you in advance for your cooperation.

Regards,
nikolay.tsonev
Telerik by Progress

answered on 08 Mar 2017, 04:21 PM

Hello License,

I'm sorry for any inconvenience, which this issue is causing you.

We are still trying to reproduce this behavior. Regarding that, could you provide the error you are receiving in the console while building the app?
At this point, it would help if you could provide the exact steps, you are using while building the app. It would also help if you could give us info, whether this problem appears while using run ios or only while building with run start-ios-bundle-dev.

For your convenience, I am attaching a link to the project with included `node_modules` folder with all needed changes. You could clone the repo and verify, whether you will have the same problem while building with run ios.

Regards,
nikolay.tsonev
Telerik by Progress

answered on 13 Mar 2017, 02:49 AM

Hello,

Thanks very much. I clone your project ,I didn't change anything,and 'tns run ios' ,when I tap 'choose image',the same error occurs just like before. This problem appears while using tns run ios ,but npm run start-ios-bundle-dev is ok.

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3064:32: EXCEPTION: Uncaught (in promise): Error: Property scrollDirection already registered for type ListViewLayoutBase.
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3069:36: ORIGINAL STACKTRACE:
CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3070:36: resolvePromise@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:416:40
file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:452:31
invokeTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:223:42
onInvokeTask@file:///app/tns_modules/@angular/core/bundles/core.umd.js:3971:51
invokeTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:222:54
runTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:123:57
drainMicroTaskQueue@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:355:42
promiseReactionJob@[native code]
UIApplicationMain@[native code]
start@file:///app/tns_modules/tns-core-modules/application/application.js:251:26
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:68:28
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:56:26
anonymous@file:///app/main.js:13:72
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:342:26: Unhandled Promise rejection: Property scrollDirection already registered for type ListViewLayoutBase. ; Zone: angular ; Task: Promise.then ; Value: Error: Property scrollDirection already registered for type ListViewLayoutBase. Property@file:///app/tns_modules/tns-core-modules/ui/core/dependency-observable.js:73:28
file:///app/tns_modules/nativescript-telerik-ui-pro/listview/listview-common.js:337:83
anonymous@file:///app/tns_modules/nativescript-telerik-ui-pro/listview/listview-common.js:343:2
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
require@[native code]
anonymous@file:///app/tns_modules/nativescript-telerik-ui-pro/listview/listview.js:4:27
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
require@[native code]
anonymous@file:///app/tns_modules/nativescript-imagepicker/images.js:7:25
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
require@[native code]
anonymous@file:///app/tns_modules/nativescript-imagepicker/albums.js:11:31
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
require@[native code]
anonymous@file:///app/tns_modules/nativescript-imagepicker/viewmodel.js:12:31
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
require@[native code]
onSelectMultipleTap@file:///app/component/transaction/transaction-image.component.js:167:34
file:///app/component/transaction/transaction-image.component.js:240:42
invoke@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:190:33
onInvoke@file:///app/tns_modules/@angular/core/bundles/core.umd.js:3980:47
invoke@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:189:42
run@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:83:49
file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:449:60
invokeTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:223:42
onInvokeTask@file:///app/tns_modules/@angular/core/bundles/core.umd.js:3971:51
invokeTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:222:54
runTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:123:57
drainMicroTaskQueue@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:355:42
promiseReactionJob@[native code]
UIApplicationMain@[native code]
start@file:///app/tns_modules/tns-core-modules/application/application.js:251:26
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:68:28
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:56:26
anonymous@file:///app/main.js:13:72
evaluate@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJob@[native code]
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): Error: Property scrollDirection already registered for type ListViewLayoutBase.

answered on 13 Mar 2017, 02:54 AM

Hello,
My project (https://github.com/ITonly/add-image )can run locally using 'tns run ios ‘ or 'npm run start-ios-bundle-dev ‘ (when use bundle, comment one code in app.module.ts ) and I have updated nativescript-imagepicker-2.5.1.tgz. When I run using bundle by 'npm run start-ios-bundle-dev ', the error ui_frame and platform can't be found ,so I changed in images.ios.ts "import application = require("application"); import ui_frame = require("ui/frame"); import platform = require("platform");" to "import * as platform from 'platform';
// import data_observable = require("data/observable");
// import data_observablearray = require("data/observable-array");
import * as data_observable from "data/observable";
import * as data_observablearray from "data/observable-array";
//import ui_frame = require("ui/frame");
import * as frame from "ui/frame";
import { Page } from "ui/page”;
This way, this problem appears while using tns run ios ,but npm run start-ios-bundle-dev is ok.

answered on 13 Mar 2017, 03:59 PM

Hi,
Thank you for the further info.

I was able to reproduce this behavior on my side while using the project from the attached GitHub repository.
This issue happens, when `nativescript--` and `---pro` are referenced in the same app by different plugins.
This issue will be fixed with the new NativeScript release 3.0. At this point, I cannot commit to an exact time frame when this will be ready.

For further info, you could also keep track on this issue.
In the meantime, you could use ` run start-ios-bundle-dev` while building for real device.
Regards,
nikolay.tsonev
Telerik by Progress