ui-material-tab not showing in Svelte Native

[nasiriyima]

Which platform(s) does your issue occur on?

-Android -Android versions

• emulator

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

• CLI: 8.1.5
• Cross-platform modules: 8.1.5
• Runtime(s): 8.1.1
• Plugin(s):

"devDependencies": {
    "@nativescript/android": "8.1.1",
    "@nativescript/types": "~8.1.1",
    "@nativescript/webpack": "~5.0.0",
    "svelte": "~3.44.0",
    "svelte-loader": "^3.1.2",
    "svelte-native-preprocessor": "^1.0.0",
    "svelte-preprocess": "^4.7.0",
    "typescript": "~4.3.5"
  }

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

1. npm install --save @nativescript-community/ui-material-tabs
2. Then add the following code in app.ts:

import { svelteNativeNoFrame } from 'svelte-native'
import { DomTraceCategory, registerNativeViewElement } from 'svelte-native/dom';
import { Tabs, TabStrip, TabStripItem, TabContentItem } from '@nativescript-community/ui-material-tabs';
import App from './App.svelte'
import { Trace } from '@nativescript/core';

Trace.addCategories(DomTraceCategory);
    Trace.enable();

registerNativeViewElement("tabs", () => Tabs);
registerNativeViewElement("tabStrip", () => TabStrip);
registerNativeViewElement("tabContentItem", () => TabStripItem);
registerNativeViewElement("tabStripItem", () => TabContentItem);

3. Try to use the component like so:

<gridlayout  backgroundColor="#FFFAF3">
        <tabs selectedIndex="1">
            <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
            <tabStrip>
                <tabStripItem>
                    <label text="Home"></label>
                    <image src="font://&#xf015;" class="fas"></image>
                </tabStripItem>
                <tabStripItem class="special">
                    <label text="Account"></label>
                    <image src="font://&#xf007;" class="fas"></image>
                </tabStripItem>
                <tabStripItem class="special">
                    <label text="Search"></label>
                    <image src="font://&#xf00e;" class="fas"></image>
                </tabStripItem>
            </tabStrip>

            <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
            <tabContentItem>
                <gridLayout>
                    <label text="Home Page" class="h2 text-center"></label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem>
                <gridLayout>
                    <label text="Account Page" class="h2 text-center"></label>
                </gridLayout>
            </tabContentItem>
            <tabContentItem>
                <gridLayout>
                    <label text="Search Page" class="h2 text-center"></label>
                </gridLayout>
            </tabContentItem>
        </tabs>
    </gridlayout>

After doing all the above, the page appears blank in the emulator. By the way I am new to svelte native, so I am definitely sure I am missing something.

[farfromrefug]

@nasiriyima the tab component might be needing a special svelte implementation. I think it was in svelte native when tabs were actually part of N. Can you go on discord in the svelte native channel (in svelte server) to discuss this?

[nasiriyima]

@farfromrefug Thanks for the input. Can you kindly share the link to the svelte native discord server to me. I will really appreciate it thanks!

[farfromrefug]

@nasiriyima https://discord.gg/VYzj972s

[dolphin-dogs]

For anybody who needs this component in svelte native : this code is working.

Just there is an inversion here :

registerNativeViewElement("tabContentItem", () => TabStripItem);
registerNativeViewElement("tabStripItem", () => TabContentItem);

registerNativeViewElement("tabStripItem", () => TabStripItem);
registerNativeViewElement("tabContentItem", () => TabContentItem);