TypeError: Cannot read property 'newDrawable' of null

[nstudio]

TypeError: Cannot read property 'newDrawable' of null

[bradmartin]

Hardly the case :) I'm a code thief drifting thru this life

[bradmartin]

NativeScript/NativeScript#4728 (comment)

[SP1966]

@bradmartin What does it feel like being a rockstar? Us plebes would like to know!

[ivanwitzke]

Slightly different from the example, but yes...

import { registerElement } from 'nativescript-angular/element-registry';
registerElement("CardView", () => require("nativescript-cardview").CardView);

[bradmartin]

The master core modules has the fix. It should ship with 3.2

…

On Wed, Aug 30, 2017, 8:14 AM Vishwa Deepak Choudhary < ***@***.***> wrote: Still removing background-Color from css is working in Android — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#64 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhPP41AwlPzs1FkniQ3ZepnvcbNTLks5sdWAkgaJpZM4OzkVn> .

[davorpeic]

Hey @bradmartin I will post here as the topic is more active, but I have issues with fab. But in my case it is funny as I experience this issue only when I run the app from one machine of my colleague, if I run it on mine then I see the button both in simulator (android 7) and on test device (android 6), if he runs the app on the same device then we get this error related with background-color.

The app is the same and node_modules have same versions, so my assumption is that it could be related with maybe some difference in android sdk packages used to build, I will do further comparison later to try to find out what is different and if issue get fixed

[bradmartin]

Did you remove and add the platform after changing the core modules?

[bradmartin]

Did you registerElement as outlined here https://github.com/bradmartin/nativescript-cardview/blob/master/README.md#angular-nativescript ? That might be your issue

[noordw]

Yes I am getting the same on Android only

[jibon57]

Yes, I am facing same problem with webpack. But without webpack it just fine. @bradmartin Will you please check it with webpack?

JS: ERROR TypeError: Cannot read property 'newDrawable' of null
Running webpack for android...

[noordw]

I'm Thinking it might be related to

NativeScript/NativeScript#4633
which is also similar to the issue with background-colour on IOS
#58 using css class parameter breaks iOS when navigating

[SP1966]

I believe that the same issue is affecting nativescript-floatingactionbutton:
nstudio/nativescript-floatingactionbutton#57

In both cases, cardview and floatingactionbutton if the background-color is set in CSS the app crashes. Remove the CSS and all is well, except the background-color is wrong! :)

[jibon57]

@SP1966 @noordw but if you try with webpack, you will see it won't work.

[noordw]

Just tested you are right, get rid of backgroundColour and it works. At least that lets me keep working until someone figures it out.

Thanks

[smarza]

Removing the backgroundColour worked for me too.

In my tests:

• IOS worked with backgroundColour.
• Android only worked without backgroundColour.

So, I created separated html files for both platforms. For now everything is fine.

Thanks guys.

[bradmartin]

Anyone care to share their package.json? Also this seems like a recent issue since cardview hasn't been updated in awhile.

[noordw]

It is new, Mine broke updating to 3.x

{
"description": "Xxxxxx",
"license": "SEE LICENSE IN ",
"readme": "Trinoor Application",
"repository": "",
"nativescript": {
"id": "com.trinoor.TASeA",
"tns-android": {
"version": "3.1.1"
},
"tns-ios": {
"version": "3.2.0-2017-7-28-1"
}
},
"dependencies": {
"@angular/animations": "~4.2.5",
"@angular/common": "~4.2.5",
"@angular/compiler": "~4.2.5",
"@angular/core": "~4.2.5",
"@angular/forms": "~4.2.5",
"@angular/http": "~4.2.5",
"@angular/platform-browser": "~4.2.5",
"@angular/platform-browser-dynamic": "~4.2.5",
"@angular/router": "~4.2.5",
"@angular/upgrade": "~4.2.5",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^4.0.2",
"@ngrx/store": "^4.0.2",
"lodash": "^4.17.4",
"nativescript-angular": "^4.3.0-2017-8-10-8",
"nativescript-barcodescanner": "^2.6.1",
"nativescript-cardview": "^2.0.2",
"nativescript-checkbox": "^2.1.11",
"nativescript-exit": "^1.0.1",
"nativescript-feedback": "^1.0.6",
"nativescript-i18n": "^0.2.2",
"nativescript-intl": "^3.0.0",
"nativescript-localstorage": "^1.1.5",
"nativescript-ngx-fonticon": "^2.2.3-master-12",
"nativescript-sqlite": "^1.1.7",
"nativescript-theme-core": "~1.0.2",
"nativescript-themes": "^1.1.0",
"reflect-metadata": "~0.1.8",
"rxjs": "^5.4.2",
"tns-core-modules": "^3.1.1",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.25.0",
"babel-types": "6.25.0",
"babylon": "6.17.4",
"lazy": "1.0.11",
"nativescript-dev-typescript": "^0.5.0",
"typescript": "^2.4.2"
},
"nativescript-i18n": {
"customLangPath": "app/resources/i18n"
}
}

[smarza]

@bradmartin

...
    "tns-ios": {
      "version": "3.2.0-2017-7-5-5"
    },
    "tns-android": {
      "version": "3.2.0-2017-8-10-1"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.3.2",
    "@angular/common": "~4.3.2",
    "@angular/compiler": "~4.3.2",
    "@angular/core": "~4.3.2",
    "@angular/forms": "~4.3.2",
    "@angular/http": "~4.3.2",
    "@angular/platform-browser": "~4.3.2",
    "@angular/router": "~4.3.2",
    "angular2-uuid": "^1.1.1",
    "nativescript-angular": "next",
    "nativescript-appversion": "^1.4.1",
    "nativescript-audio": "^3.5.0",
    "nativescript-cardview": "^2.0.2",
    "nativescript-geolocation": "^3.0.0",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-local-notifications": "^1.2.1",
    "nativescript-localstorage": "^1.1.5",
    "nativescript-plugin-firebase": "4.0.3",
    "nativescript-pulltorefresh": "^2.0.2",
    "nativescript-ripple": "^2.0.0",
    "nativescript-social-share": "^1.3.2",
    "nativescript-telerik-ui": "^3.0.4",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-zip": "^1.3.2",
    "ngx-pipes": "^1.6.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "^3.0.1",
    "zone.js": "~0.8.16"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.3.2",
    "@ngtools/webpack": "^1.4.1",
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.4.5",
    "copy-webpack-plugin": "^4.0.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "lazy": "1.0.11",
    "nativescript-css-loader": "^0.26.1",
    "nativescript-dev-typescript": "~0.4.0",
    "nativescript-dev-webpack": "^0.6.3",
    "raw-loader": "^0.5.1",
    "resolve-url-loader": "^2.0.3",
    "typescript": "~2.3.4",
    "webpack": "^3.0.0",
    "webpack-sources": "^1.0.1"
  },
...

[noordw]

Fixed by
import { NativeScriptI18nModule } from "nativescript-i18n/angular"
to
require("nativescript-i18n");
and removing from imports

[SP1966]

Here is my package.json:

"nativescript": {
"id": "org.nativescript.PPM",
"tns-android": {
"version": "3.1.1"
},
"tns-ios": {
"version": "3.1.0"
}
},
"dependencies": {
"@angular/animations": "~4.2.3",
"@angular/common": "~4.2.3",
"@angular/compiler": "~4.2.3",
"@angular/core": "~4.2.3",
"@angular/forms": "~4.2.3",
"@angular/http": "~4.2.3",
"@angular/platform-browser": "~4.2.3",
"@angular/router": "~4.2.3",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^4.0.2",
"@ngrx/store": "^4.0.2",
"nativescript-angular": "^4.2.0",
"nativescript-camera": "^3.0.1",
"nativescript-cardview": "^2.0.2",
"nativescript-drop-down": "^3.1.1",
"nativescript-floatingactionbutton": "^3.0.1",
"nativescript-gradient": "^2.0.0",
"nativescript-material-icons": "^1.0.3",
"nativescript-ngx-fonticon": "^2.2.3",
"nativescript-telerik-ui": "3.0.4",
"reflect-metadata": "~0.1.10",
"rxjs": "^5.4.0",
"tns-core-modules": "^3.1.1",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.24.1",
"babel-types": "6.24.1",
"babylon": "6.17.0",
"husky": "^0.14.3",
"lazy": "1.0.11",
"lint-staged": "^4.0.1",
"nativescript-dev-sass": "^1.1.1",
"nativescript-dev-typescript": "~0.4.5",
"prettier": "^1.5.2",
"typescript": "~2.2.1"
},
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.ts": ["prettier --write", "git add"]
},

[bradmartin]

Anyone not using angular have this issue? I don't think this plugin has been updated in a while so we might want to ping this on the nativescript repo and have the team look at it. I haven't used webpack with NS so it's not an area I can provide much insight about. I know the styler stuff went through a bumpy ride during the 3x breaking changes in the core but we smoothed those out with most plugins so this seems to be something new that started recently, is that correct? If so will someone create an issue on the core repo and CC me on it linking here. Curious what is causing the issue for you all but I haven't seen this personally so that's positive I guess :)

…

On Sun, Aug 13, 2017, 2:06 PM SP1966 ***@***.***> wrote: Here is my package.json: "nativescript": { "id": "org.nativescript.PPM", "tns-android": { "version": "3.1.1" }, "tns-ios": { "version": "3.1.0" } }, "dependencies": { ***@***.***/animations": "~4.2.3", ***@***.***/common": "~4.2.3", ***@***.***/compiler": "~4.2.3", ***@***.***/core": "~4.2.3", ***@***.***/forms": "~4.2.3", ***@***.***/http": "~4.2.3", ***@***.***/platform-browser": "~4.2.3", ***@***.***/router": "~4.2.3", ***@***.***/core": "^1.2.0", ***@***.***/effects": "^4.0.2", ***@***.***/store": "^4.0.2", "nativescript-angular": "^4.2.0", "nativescript-camera": "^3.0.1", "nativescript-cardview": "^2.0.2", "nativescript-drop-down": "^3.1.1", "nativescript-floatingactionbutton": "^3.0.1", "nativescript-gradient": "^2.0.0", "nativescript-material-icons": "^1.0.3", "nativescript-ngx-fonticon": "^2.2.3", "nativescript-telerik-ui": "3.0.4", "reflect-metadata": "~0.1.10", "rxjs": "^5.4.0", "tns-core-modules": "^3.1.1", "zone.js": "~0.8.2" }, "devDependencies": { "babel-traverse": "6.24.1", "babel-types": "6.24.1", "babylon": "6.17.0", "husky": "^0.14.3", "lazy": "1.0.11", "lint-staged": "^4.0.1", "nativescript-dev-sass": "^1.1.1", "nativescript-dev-typescript": "~0.4.5", "prettier": "^1.5.2", "typescript": "~2.2.1" }, "scripts": { "precommit": "lint-staged" }, "lint-staged": { "*.ts": ["prettier --write", "git add"] }, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#64 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhOEpslUaQH7IZHbRrNomC9YoJcOcks5sX0kpgaJpZM4OzkVn> .

[jibon57]

@bradmartin by removing background-color CSS property also solved webpack issue :)

[bradmartin]

Sounds good, thanks @davorpeic I have both UI components inside apps using the latest versions of NS and the plugins. So it does seem build related. Keep us posted 👍

[manijak]

I am running vanilla TNS 3.1.3 with JS, and also get this issue. I don't get a stacktrace like others, just a white screen with the text: cannot read property newDrawable of null, undefined

Highest android sdk version I have is 25 (7.1.1).

[davorpeic]

Ok, so I think I found the source of getting my error for FAB. The only difference my app had compared to other pc was in tns-core-modules, after doing npm update I got the same error as Manijak.

Reverting to "tns-core-modules": "3.1.0", fixed the issue with backgroundColor="red" on my FAB button. I see that they did some update in relation to background color,not sure if this could be issue.

[SP1966]

@davorpeic

I switched tns-core-modules to 3.1.0 from 3.1.1 and I'm still getting the error. This stuff is way over my head!

[SP1966]

Yes. In fact I also dropped back from nativescript-angular 4.2.0 to 3.1.3 alternately and that wasn't it either.

[shiv19]

Facing the same problem on vanilla nativescript

[deepak4u2006]

Still removing background-Color from css is working in Android

[mrkorsar]

What I must do to get 3.2 ? I tried the command "tns update" and this didn't help

[bradmartin]

3.2 isn't released yet if update cmd didn't install it. You can use @next release I think if you want to try it before official release.

…

On Tue, Sep 5, 2017, 9:57 AM mrkorsar ***@***.***> wrote: What I must do to get 3.2 ? I tried the command "tns update" and this didn't help — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#64 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhD6mzFeDvIb1Q6eWu4M-O9QNiSV4ks5sfWE7gaJpZM4OzkVn> .

[bradmartin]

I've updated the demo to 3.2.0 and all works fine in the demo. Is there a use case that still throws an error for anyone?