The navigation bar for tab navigation is visually broken

[aloifolia]

I just tried to use tab navigation inside of a stack navigation-driven app. While the navigation itself works, the tab bar looks a bit funny.

1. The active bottom border is too wide and has a certain horizontal offset (maybe just because of the false width).

2. The buttons do not look like I would expect them to look. I customized the styles in the screenshot by adding background colors to the tab bar items. Now I would expect the background color to fill the entire background of a tab. But it seems as if my custom style just colorizes the Text element.

EDIT: I just noticed that the tab bar sits on top of the content of the tabnavigator screen. Is there a reason for having it this way? Generally, I would expect the top of the content area to be aligned with the bottom of the tab bar.

EDIT2: So the indicator border seems to be a separate View which is positioned and sized separately from the Buttons. Why do you not just wrap each button inside another view with a bottom border?

[knowbody]

I am not able to help if you don't provide me with the reproduction. Please create a small app that I could run and see this.

I don't understand what you mean in EDIT1, could you rephrase it, please?

The answer for EDIT2 is that if you set is as border bottom of each tabItem then you won't be able to animate it from one tab to another.

[aloifolia]

With EDIT1 I was referring to the problem that scrollview insets in iOS (or padding in the HTML world) are intended to solve. The current solution sets the navigation bar on top of the screen. Thus, the visible area of the screen is partially occluded by the "floating" bar. My current solution is to have every screen equipped with additional padding at the top. Ideally, there would be a more convenient solution directly built in rebolt-navigation.