IOS problem: color undefind

[mrkorsar]

I want to tell about problem with color. It's not trivial problem because we can see this problem when you will try to navigate on home page with ClearHistory.

In my opinion It happened because you haven't a condition of checking on "undefined"/"null" value in cardview-common.js (line: 43) and cardview.ios.js (lines: 34, 37, 49) files. I wrote this and it has worked:

• if (value !== undefined && "ios" in value && value.ios){ this.nativeView.backgroundColor = value.ios; }
• if (!value.color || value.color === undefined){ value.color = "black"; } this.nativeView.backgroundColor = new color_1.Color(value.color + "").ios;
• if (value !== undefined && "ios" in value && value.ios){ this.nativeView.layer.shadowColor = value.ios.CGColor; }

It's a text of error when i try to run this.routerExtensions.navigate(["/"], {clearHistory: true}); CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1091:24: ERROR Error: Uncaught (in promise): Error: Invalid color: undefined Color@file:///app/tns_modules/tns-core-modules/color/color-common.js:24:36 [angular] Color@file:///app/tns_modules/tns-core-modules/color/color.js:6:47 [angular] file:///app/tns_modules/nativescript-cardview/cardview.js:41:54 [angular]

If i understand the situation correctly it happened because new version of NS does't prefer "undefined" or "null" or empty value of color. But I don't understand why it happened when i refresh application by the command with param ClearHistory. Maybe I forgot something or did something wrong? Sorry for my English if I have a mistakes.

My package.json "dependencies": { "@angular/animations": "~4.0.0", "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0", "nativescript-angular": "~3.0.0", "nativescript-cardview": "^2.0.2", "nativescript-carousel": "^3.1.0", "nativescript-gradient": "^2.0.0", "nativescript-iqkeyboardmanager": "^1.1.0", "nativescript-ngx-fonticon": "^2.2.1", "nativescript-telerik-ui": "^3.0.4", "nativescript-theme-core": "~1.0.4", "nativescript-videoplayer": "^3.0.9", "nativescript-youtube-parser": "^1.1.0", "reflect-metadata": "~0.1.8", "rxjs": "~5.2.0", "tns-core-modules": "^3.1.0", "tns-platform-declarations": "^3.1.0", "zone.js": "~0.8.2" }, "devDependencies": { "babel-traverse": "6.4.5", "babel-types": "6.4.5", "babylon": "6.4.5", "lazy": "1.0.11", "nativescript-dev-android-snapshot": "^0..", "nativescript-dev-typescript": "^0.4.0", "tns-platform-declarations": "^3.1.0", "typescript": "~2.2.1" }

[phattranky]

I got the same problem. Then I follow what @mrkorsar say, everything working well. Thanks @mrkorsar

[mrkorsar]

I think we have the similar problem on Android Console: JS: bad background-color value: Error: Invalid color: undefined

[sridharmane]

I confirm that this issue occurs in both iOS and Android. A temporary work around is to add the backgroundColor property to the CardView element in the template:

<CardView ... backgroundColor="#ffffff" ... ></CardView>

My Stack trace:

Error: Invalid color: undefined
    at Color (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/color/color-common.js:24:27) [angular]
    at new Color (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/color/color.js:6:42) [angular]
    at CardView.(anonymous function) (file:///data/data/com.test.testapp/files/app/tns_modules/nativescript-cardview/cardview.js:42:56) [angular]
    at applyPendingNativeSetters (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js:900:28) [angular]
    at Object.initNativeView (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/properties/properties.js:862:9) [angular]
    at CardView.ViewBase.onResumeNativeUpdates (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:670:22) [angular]
    at CardView.ViewBase._resumeNativeUpdates (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:228:18) [angular]
    at CardView.ViewBase._batchUpdate (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:237:18) [angular]
    at CardView.ViewBase.applyCssState (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:318:14) [angular]
    at CardView.ViewBase._setCssState (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:311:14) [angular]
    at CardView.ViewBase._applyStyleFromScope (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:254:18) [angular]
    at CardView.ViewBase._setStyleScope (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:445:14) [angular]
    at StackLayout.ViewBase._removeViewCore (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:481:18) [angular]
    at StackLayout.ViewBase._removeView (file:///data/data/com.test.testapp/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:475:14) [angular]

[YvesCandel]

I've created a pull request to fix this issue. Our application is also unable to use nativescript-cardview after upgrading to ^3.1.0