Nativescript 8.1 does not recognize <Tabs>

Viewed 134

I could not understand how to use Tab component in Nativescript-vue after upadate Nativescript 8.1...

The below code was work collectly in Nativescript playground, however it got errors in my project.

Home.vue

     <StackLayout row="1">
            <Tabs>
                <TabStrip>
                    <TabStripItem>
                        <Label text="Newest" />
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Daily" />
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Weekly" />
                    </TabStripItem>
                    <TabStripItem>
                        <Label text="Monthly" />
                    </TabStripItem>
                </TabStrip>

                <TabContentItem>
                    <Label text="NEWEST test" />
                </TabContentItem>

                <TabContentItem>
                    <Label text="DAILY test" />
                </TabContentItem>

                <TabContentItem>
                    <Label text="WEEKLY test" />
                </TabContentItem>

                <TabContentItem>
                    <Label text="MONTHLY test" />
                </TabContentItem>
            </Tabs>
        </StackLayout>

My console

CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
(UserNotifications) [com.apple.UserNotifications:Connections] [org.nativescript.firebasetest] Creating a user notification center
CONSOLE LOG: firebase.init done
NativeScript debugger has opened inspector socket on port 18183 for org.nativescript.firebasetest.
CONSOLE LOG: NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.
CONSOLE LOG: TypeError: No known component for element Tabs.
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'setAttribute' of undefined
at
setStyleScope(file: app/webpack:/firebasetest/node_modules/nativescript-vue/dist/index.js:8550:0)
...

Reproducted minimum project package.json

  "dependencies": {
    "@nativescript/core": "~8.1.1",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/ios": "8.1.0",
    "@nativescript/webpack": "~5.0.0",
    "nativescript-dev-typescript": "^0.10.0",
    "nativescript-vue-template-compiler": "~2.9.0"
  }

I guess it's occour because of lack of any packages or plugins. Is anyone know the environment for using Tabs in Nativescript-vue after Nativescript 8.1 update?

1 Answers

From the 8.0 release notes:

Important note about BottomNavigation and Tabs

BottomNavigation and Tabs ui components in core brought along Cocoapods whether your project used them or not. With 8.0, they now are provided by the community where they can receive more focused attention not bound or held up by NativeScript core updates.

is now available via @nativescript-community/ui-material-bottom-navigation

The api is the same however the component names can swap to what is found in the Readme.

is now available via @nativescript-community/ui-material-tabs

This is a drop in replacement.

Related