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:

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);