RadListView and the plugin nativescript-imagepicker

Thread is closed for posting
14 posts, 0 answers
  1. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 04 Feb 2017 Link to this post

    Hello, 

            When I use the plugin "let imagepickerModule = require('nativescript-imagepicker');" (https://github.com/NativeScript/nativescript-imagepicker) and "import { ListViewEventData, RadListView } from 'nativescript-telerik-ui-pro/listview'; "  in angular2 of typescript in a component , the error shows as the file below.

         can you help me?

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 07 Feb 2017 Link to this post

    Hello,

    I reviewed your case and confirm that this is a real issue while using  `nativescript-telerik-ui-pro` and `nativescript-imagepicker` in a NativeScript project. The problem has been related to the fact that `imagepicker` plugin uses `RadListView` and has `nativescript-telerik-ui` 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 workaround 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 node_modules 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.
  3. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 25 Feb 2017 in reply to Nikolay Tsonev Link to this post

    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'.

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 27 Feb 2017 Link to this post

    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-telerik-ui with nativescript-telerik-ui-pro, delete platforms folder from your project and try again to rebuild the app with tns run ios.

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

    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.
  5. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 01 Mar 2017 in reply to Nikolay Tsonev Link to this post

    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?

  6. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 01 Mar 2017 Link to this post

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

    1. delete node_modules, platforms, hooks folders
    2. run npm install in the terminal
    3.open node_modules and delete nativescript-telerik-ui folder.
    4. open node_modules/nativescript-imagepicker/package.json file.
    search for nativescript-telerik-ui change the dependency name to nativescript-telerik-ui-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/nativescript-imagepicker/images.xml file and replace 
    xmlns:lv="nativescript-telerik-ui/listview"
    with
    xmlns:lv="nativescript-telerik-ui-pro/listview"
    7. build with tns run ios

    Hope this helps.

    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.
  7. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 03 Mar 2017 in reply to Nikolay Tsonev Link to this post

    Hello,

    Although it doesn't solve my problem ,thanks all the same!

  8. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 06 Mar 2017 Link to this post

    Hello License,

    I tested again your sample project on my side while using nativescript-imagepicker-2.5.1.tgz 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 meantime you could verify, whether you will have the same behavior while using the nativescript-imagepicker from NPM, instead of using your local tgz file and to apply the described setup steps from my previous message. For your convenience, I am attaching sample package.json 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
    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.
  9. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 07 Mar 2017 in reply to Nikolay Tsonev Link to this post

    Hello,

    My node version is V6.9.1
    device info is IOS 6 PLUS  Version 10.2(14C92)  and the Model is MGAH2LL/A

    And if I use the nativescript-imagepicker from NPM, instead of using my  local tgz file and change as you said before, even the iOS  emulator has the same error ,not just device .And that’s why I changed to local .tgz file . It upsets  me so much .And I try to use “npm run start-ios-bundle-dev “ as my package.json write. It still has problem. I don’t know how to do.

  10. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Mar 2017 Link to this post

    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 tns run ios or only while building with npm 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 tns run ios.

    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.
  11. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 12 Mar 2017 in reply to Nikolay Tsonev Link to this post

    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.

  12. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 12 Mar 2017 in reply to License Link to this post


    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.
  13. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 13 Mar 2017 Link to this post

    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-telerik-ui` and `nativescript-telerik-ui-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 `npm run start-ios-bundle-dev` while building for real device.
    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.
  14. Raditya
    Raditya avatar
    1 posts
    Member since:
    Jan 2017

    Posted 22 May 2017 Link to this post

    Hi My Name is Radit,

     

    Here is my solution

    Look at the tns info

    and look your tns-android/tns-runtime version

    also tns-core-modules version

     

    The stable version is tns-android : 2.5.0
    tns-core-modules : 2.5.0

    How to : remove your current android runtime first

    tns platform remove android

    then install tns platform add android@2.5.0

    and also install your tns-core-modules

    tns plugin remove tns-core-modules

    tns plugin add tns-core-modules@2.5.0

     

    hope this helps

Back to Top