Nativescript-ui-feedback: Calling js method onCreateViewHolder failed (Error: Expecting a valid View instance)

Created on 2 Oct 2018 · 21Comments · Source: ProgressNS/nativescript-ui-feedback

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

When resolving TokenModel results in loadSuggestionsAsync, the app crashes with:

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onCreateViewHolder failed

Error: Expecting a valid View instance.

Which platform(s) does your issue occur on?

Android (platform version 4.2.1)

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

Progress NativeScript UI version: (do not see it in package.json)
CLI: 4.2.1
Cross-platform modules: ^4.2.0
Runtime(s): 4.2.0

Please tell us how to recreate the issue in as much detail as possible.

Register RadAutoCompleteTextView element in file with Angular component
Define loadSuggestionsAsync to resolve two simple TokenModels.
Include the component in the template.
Run the application on Android. (I am running on a physical Device - LG V20 running Android 8.0.0).
Type something into the RadAutoCompleteTextView.
App crashes with aforementioned exception.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

https://github.com/IRCraziestTaxi/nativescript-ui-autocomplete-google-places (branch: crash-on-token-models)

autocomplete backlog bug high

Source

IRCraziestTaxi

Most helpful comment

Hi,

I've got the same issue than OP and I thought I could provide more information to whoever might help us :)

So, I've included the .ts and .html file from https://github.com/telerik/nativescript-ui-samples-angular/tree/master/autocomplete/app/examples/getting-started in my project. I'm able to build and run my app, but as soon as I enter text in my textbox that should match with an element in the "coutries" array, my app crash as OP described.

So it's seems to be a dependency/environnement issue, though I've pretty much used the same environnement as the sample app.

Here is my package.json file (I removed non-relevant information) :

{
  "nativescript": {
    "id": "org.nativescript.testtemplatetabnavigation",
    "tns-ios": {
      "version": "5.0.0"
    },
    "tns-android": {
      "version": "5.1.0"
    }
  },

  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "nativescript-angular": "^7.1.0",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-ui-autocomplete": "*",
    "nativescript-ui-core": "*",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^6.3.3",
    "tns-core-modules": "^5.1.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~6.1.0",
    "@nativescript/schematics": "~0.3.0",
    "@ngtools/webpack": "~6.2.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-sass": "~1.6.0",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "^0.17.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  },
  "readme": "NativeScript Application"
}

I've nuked several times my /platforms, /nodes_module, /hooks and package-lock.json files but that did not help. Unfortunately, creating a new project from scratch as @Lords08 suggested is not an option.

It seems this is a duplicate of #298 but I didn't got any luck taking that into consideration...
Any help would be greatly appreciated !

VincentRenotte on 15 Jan 2019

👍3

All 21 comments

Same with me sir :(
Especially with the new version of nativescript-cli and nativescript-angular.
What should I do? :(

Lords08 on 5 Oct 2018

Is this being investigated? If not, when will somebody be able to get around to looking at it? This issue is outright blocking progress on the app I am developing.

IRCraziestTaxi on 12 Oct 2018

Hi,

Thank you for bringing this to our attention. We will investigate the issue and update you once we have more information to share. Just to br sure could you provide the versions of the ui plugins you are using.

VladimirAmiorkov on 13 Oct 2018

Thanks for the reply. The only nativescript-ui modules I have installed are listed in my package.json as:

"nativescript-ui-autocomplete": "^3.9.0",
"nativescript-ui-sidedrawer": "^4.0.0",

I know I should have specific versions pinned down, but I have been lazy about it...

npm ls nativescript-ui-autocomplete gives me 3.9.0.

Although I don't think sidedrawer affects it, npm ls nativescript-ui-sidedrawer gives 4.3.0.

IRCraziestTaxi on 17 Oct 2018

As a heads up, I did go ahead and modify my registerElement strategy to do it the proper way of importing in the app module as per this comment on another issue I have open for this component and, although I had my fingers crossed that that would fix it, it did not.

IRCraziestTaxi on 17 Oct 2018

Hey guys,

Any updates on this? Don't want this to get closed due to inactivity.

Thanks!

IRCraziestTaxi on 19 Nov 2018

Update: I have upgraded platforms and dependencies to:

CLI: 5.0.3
Cross-platform modules: 5.0.5
Runtime(s): 5.0.0
nativescript-ui-autocomplete: 3.10.3

Problem still persists.

IRCraziestTaxi on 4 Dec 2018

Just curious: is this still on the radar at all?

IRCraziestTaxi on 14 Jan 2019

In my case, I just create new project and migrate my old project to this new project because of all frustation I have got :')

Lords08 on 15 Jan 2019

Hi,

I've got the same issue than OP and I thought I could provide more information to whoever might help us :)

So it's seems to be a dependency/environnement issue, though I've pretty much used the same environnement as the sample app.

Here is my package.json file (I removed non-relevant information) :

{
  "nativescript": {
    "id": "org.nativescript.testtemplatetabnavigation",
    "tns-ios": {
      "version": "5.0.0"
    },
    "tns-android": {
      "version": "5.1.0"
    }
  },

  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "nativescript-angular": "^7.1.0",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-ui-autocomplete": "*",
    "nativescript-ui-core": "*",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^6.3.3",
    "tns-core-modules": "^5.1.0",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~6.1.0",
    "@nativescript/schematics": "~0.3.0",
    "@ngtools/webpack": "~6.2.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-sass": "~1.6.0",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "^0.17.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  },
  "readme": "NativeScript Application"
}

It seems this is a duplicate of #298 but I didn't got any luck taking that into consideration...
Any help would be greatly appreciated !

VincentRenotte on 15 Jan 2019

👍3

I am facing the same issue, as soon as I type in the textbox, it gives the same error. I am using "nativescript-ui-autocomplete": "^3.11.0"
Any suggestions?

rg777 on 18 Jan 2019

Any news on this?

Im using "nativescript-ui-autocomplete": "^4.0.0",

skined90 on 1 Apr 2019

👀1

Any news on this?

Im using "nativescript-ui-autocomplete": "^4.0.0",

Do you have a child module? I had to import NativeScriptUIAutoCompleteTextViewModule in there.

ekkiiiii on 11 Apr 2019

Yes, I do but still the same. Bellow already mentioned error I have next error

TypeError: this.items.getItem is not a function

skined90 on 11 Apr 2019

Hi @skined90 ,

By any change that you have bound the items of the RadAutoCompleteTextView to a collection that is not an ObservableArray<TokenModel>?

VladimirAmiorkov on 11 Apr 2019

@IRCraziestTaxi
I managed to reproduce the issue with the provided sample. Here's how to resolve it with the current version of RadAutoCompleteTextView:
1) Currently RadAutoCompleteTextView requires a template for the SuggestionView to be defined in your html as demonstrated in each of its samples
2) In order to use RadAutoCompleteTextView's directives (like tkAutoCompleteSuggestionView), you need to import its module in your app's app.module.ts or other module that uses the component like its done here.
3) Once you import the module, it will register the tag, so you should remove the line with the registration.

We are going to add a default template in the next version of nativescript-ui-autocomplete so that step 1 would not be required.

tgpetrov on 30 May 2019

Fixed with https://github.com/NativeScript/nativescript-ui-autocomplete/releases/tag/v4.1.0

DimitarTodorov on 5 Jun 2019

I am still having the same issue even with v4.1.0

deepjyotipaulhere on 15 Jun 2019

Hi @deepjyotipaulhere ,
Please send us a sample project or steps to reproduce of the issue you are facing. The issue mentioned here is fixed in our latest release and is not reproducible in our demo apps.

DimitarTodorov on 17 Jun 2019

Is this issue resolved??? I am getting the same error

medhak16 on 5 Jun 2020

I still get this error..
System.err: An uncaught Exception occurred on "main" thread. System.err: Calling js method run failed System.err: Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1) System.err: System.err: StackTrace: System.err: ZoneAwareError(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:1298:0) System.err: at push.../node_modules/@nativescript/core/ui/core/view-base/view-base.js.ViewBase._removeView(file: node_modules\@nativescript\core\ui\core\view-base\view-base.js:472:0) System.err: at push.../node_modules/@nativescript/angular/view-util.js.ViewUtil.removeFromVisualTree(file: node_modules\@nativescript\angular\view-util.js:191:0) System.err: at push.../node_modules/@nativescript/angular/view-util.js.ViewUtil.removeChild(file: node_modules\@nativescript\angular\view-util.js:119:0) System.err: at push.../node_modules/@nativescript/angular/renderer.js.NativeScriptRendererFactory.ngOnDestroy(file: node_modules\@nativescript\angular\renderer.js:60:0) System.err: at (file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js:11518:55) System.err: at push.../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.destroy(file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js:11518:0) System.err: at push.../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgModuleRef$1.destroy(file: node_modules\@angular\core\__ivy_ngcc__\fesm5\core.js:24832:0) System.err: at push.../node_modules/@nativescript/angular/platform-common.js.NativeScriptPlatformRef._livesync(file: node_modules\@nativescript\angular\platform-common.js:221:0) System.err: at (file: node_modules\@nativescript\angular\platform-common.js:103:74) System.err: at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invokeTask(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:421:0) System.err: at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.Zone.runTask(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:188:0) System.err: at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.ZoneTask.invokeTask(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:496:0) System.err: at ZoneTask.invoke(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:485:0) System.err: at timer(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:1561:0) System.err: at invoke(file: node_modules\@nativescript\core\timer\timer.android.js:20:30) System.err: at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.ZoneDelegate.invoke(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:388:0) System.err: at push.../node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js.Zone.runGuarded(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:151:0) System.err: at (file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:129:0) System.err: at run(file: node_modules\@nativescript\core\timer\timer.android.js:24:0) System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1160) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1138) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1134) System.err: at com.tns.gen.java.lang.Runnable.run(Runnable.java:17) System.err: at android.os.Handler.handleCallback(Handler.java:873) System.err: at android.os.Handler.dispatchMessage(Handler.java:99) System.err: at android.os.Looper.loop(Looper.java:214) System.err: at android.app.ActivityThread.main(ActivityThread.java:7094) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:494) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:975)

My package.json
{ "nativescript": { "id": "org.nativescript.mycourse", "tns-android": { "version": "6.5.0" }, "tns-ios": { "version": "6.5.0" } }, "description": "NativeScript Application", "license": "SEE LICENSE IN <your-license-filename>", "repository": "<fill-your-repository-here>", "scripts": { "ngcc": "ngcc --properties es2015 module main --first-only", "postinstall": "npm run ngcc" }, "dependencies": { "@angular/animations": "~9.1.0", "@angular/common": "~9.1.0", "@angular/compiler": "~9.1.0", "@angular/core": "~9.1.0", "@angular/forms": "~9.1.0", "@angular/platform-browser": "~9.1.0", "@angular/platform-browser-dynamic": "~9.1.0", "@angular/router": "~9.1.0", "@nativescript/angular": "~9.0.0", "@nativescript/theme": "~2.3.0", "reflect-metadata": "~0.1.12", "rxjs": "^6.5.0", "tns-core-modules": "~6.5.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular/compiler-cli": "~9.1.0", "@ngtools/webpack": "~9.1.0", "nativescript-dev-webpack": "~1.5.0", "tns-platform-declarations": "~6.5.0", "typescript": "~3.8.3" }, "gitHead": "3153594d609d66fab71745c881d617ac1328ea1b", "readme": "NativeScript Application" }