Repository navigation
[iOS][BottomNavigation][Tabs] Nested Tabs in BottomNavigation wrong layout #7562
Description
Environment
- CLI: 6.0.1
- Cross-platform modules: 6.0.1
- Android Runtime: 6.0.0
- iOS Runtime: 6.0.1
Describe the bug
On iOS when nesting Tabs inside BottomNavigation the layout is wrong. The content of the Tabs tab doesn't get to the bottom of the screen. See the light blue background in the following image:
To Reproduce
Have the following markup:
<BottomNavigation>
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<Tabs>
<TabStrip backgroundColor="palevioletred">
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</Tabs>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
</BottomNavigation>
Expected behavior
The light blue layout should go to bottom and the contents (label) should layout in the safe area between the tabs.
Sample project
Visible in e2e/ui-tests-app -> tabs -> nested-bottom-navigation example
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Activity
MartoYankov commentedon Aug 27, 2019
New undesired behavior with tns-core-modules
6.1.0-rc-2019-08-23-161023-01rigor789 commentedon Sep 7, 2023
Closing because BottomNavigation and Tabs are no longer part of core since NativeScript 8.0:
https://blog.nativescript.org/nativescript-8-announcement/#important-note-about-bottomnavigation-and-tabs