bottomNavigation not working in SvelteNative

Question

I have a simple App.svelte that shows my problem

<script lang='ts'>
</script>

<frame>
  <page>
    <actionBar title="Hello" />

    <bottomNavigation>
    </bottomNavigation>
  </page>
</frame>

when I run this I get a white screen with nothing, but If I remove the bottomNavigation everyhing works fine. I don't figure out how to get bottomNavigation to work

Answer 1

How to debug this

1. Remove the contents of bottomNavigation, and replace it with just some text, e.g. "hello". Does that fix it? If so, the problem is something inside your current definition of bottomNavigation

2. If it doesn't fix it, what if you put some divs above or below the actionBar, with text inside ? If that does it, is the problem the inability of bottomNavigation to cope with the absence of other text?

3. Once you place text into the page, you should be able to search for it, even if it is appearing very small or white etc.

4. Finally, there is a venerable trick of setting a style like this:

    <bottomNavigation style="border: 1px solid red;">
      <tabStrip>
        <tabStripItem>
          <label text='My tickets' />
        </tabStripItem>
        <tabStripItem>
          <label text='Buy tickets' />
        </tabStripItem>
        <tabStripItem>
          <label text='Menu' />
        </tabStripItem>
      </tabStrip>
      <tabContentItem>
        <label text='My tickets' />
      </tabContentItem>
      <tabContentItem>
        <label text='Buy tickets' />
      </tabContentItem>
      <tabContentItem>
        <label text='Menu' />
      </tabContentItem>
    </bottomNavigation>
   

That will give a red border to that item. You can use different colours to give different items distinguishable borders, and work out what has happened.

Report back with any problems, ideally with an executable example, that works with the "<>" icon. That will maximise the chance of a solution.