Nativescript: Error message in log when using new Tabs Component without Image (only Label) within TabStripItem

Created on 3 Oct 2019 · 6Comments · Source: NativeScript/NativeScript

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 6.1.2
Cross-platform modules: 6.1.1
Android Runtime: 6.1.0
iOS Runtime: -
Plugin(s): -

Describe the bug
When defining the Tabs this way:

<TabStrip>
                    <TabStripItem>
                        <Label text="Tabs 1"></Label>
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Tabs 2"></Label>
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Tabs 3"></Label>
                    </TabStripItem>
</TabStrip>
...

I see an error message in log:

JS: Error: Failed to apply property [color] with value [#00caab] to TabStripItem(55)@ns-ui-widgets-category/tabs/usage/usage-page.xml:13:13;. Error: undefined is not a valid file or resource.
JS: at Object.fromFileOrResource (file:///node_modules\tns-core-modules\image-source\image-source.js:259:0)
JS: at Tabs.push.../node_modules/tns-core-modules/ui/tabs/tabs.js.Tabs.getIcon (file:///node_modules\tns-core-modules\ui\tabs\tabs.js:488:0)
JS: at Tabs.push.../node_modules/tns-core-modules/ui/tabs/tabs.js.Tabs.setTabBarIconColor (file:///node_modules\tns-core-modules\ui\tabs\tabs.js:554:0)
JS: at Object.callback (file:///node_modules\tns-core-modules\ui\tab-navigation-base\tab-strip-item\tab-strip-item.js:92:0)
JS: at Style.push.../node_modules/tns-core-modules/data/observable/observable.js.Observable.notify (file:///node_modules\tns-core-modules\data\observable\observable.js:110:0)
JS: at Style. (file:///data/data/org.native...

To Reproduce

Just open the Playground sample provided below
maybe you have to switch the tab one time to see the error in the logs

Expected behavior
No error message.

Sample project
Playground
This is an official Playground sample from this NativeScript blog post:
https://www.nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components

backlog bug tabs

Source

felixkrautschuk

👍3

All 6 comments

Confirming the issue:

Steps to reproduce: use the Playground linked above.

The CSS styles taht are causing the issue are the following:

Tabs TabStripItem,
BottomNavigation TabStripItem {
    background-color: #6200EE;
    color: #B68AF7;
}

Tabs TabStripItem:active,
BottomNavigation TabStripItem:active {
    color: #FFFFFF;
}

NickIliev on 3 Oct 2019

Having the same problem after installing the @nativescript/theme

Error: Failed to apply property [color] with value [#00caab] to TabStripItem(724). Error: undefined is not a valid file or resource. JS: at new ZoneAwareError (file:///node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:1298:0)

I solved it by adding an Image tag to the TabStripItem. Now no more console errors