Reports

I managed to do it using these examples:

But there should be examples in Svelte native :/ The Svelte Native implementation was way better since you didn't even need to import anything: https://svelte-native.technology/docs#bottom-navigation. They should keep it! :( Also, docs were centralized and now that they deprecated their implementation you need to try to find examples that most times do not exist :/

<script>
    import { registerNativeViewElement } from "svelte-native/dom";
    import {
        BottomNavigation,
        TabStrip,
        TabStripItem,
        TabContentItem,
      } from "@nativescript-community/ui-material-bottom-navigation";

    registerNativeViewElement("bottomNavigation", () => BottomNavigation);
    registerNativeViewElement("tabStrip", () => TabStrip);
    registerNativeViewElement("tabStripItem", () => TabStripItem);
    registerNativeViewElement("tabContentItem", () => TabContentItem);
</script>

<page>


  <bottomNavigation selectedIndex="1">
    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
    <tabStrip backgroundColor="#C8F7C5">
      <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>
  </bottomNavigation>
</page>

79240502