Repository navigation
[iOS][BottomNavigation] Images are not vertically centered #7991
Description
Environment
- CLI: 6.1.2
- Android Runtime: 6.1.1
- iOS Runtime: 6.1.1
Describe the bug
On iOS the Images within the TabStrip are not vertically centered within a BottomNavigation. On Android they are perfectly centered.
Here is a screenshot from two running iphone Simulators, where you should be able to see the issue.
To Reproduce
<TabStrip #mainNavigationStrip isIconSizeFixed="false" iosIconRenderingMode="alwaysOriginal">
<TabStripItem class="nav-icon" [class.ios]="isIOS()" [class.selected]="selectedTab === 0">
<Image src="font://" class="fas"></Image>
</TabStripItem>
<TabStripItem class="nav-icon" [class.ios]="isIOS()" [class.selected]="selectedTab === 1">
<Image src="font://" class="fas"></Image>
</TabStripItem>
<TabStripItem class="nav-icon" [class.ios]="isIOS()" [class.selected]="selectedTab === 2">
<Image src="font://" class="fas"></Image>
</TabStripItem>
<TabStripItem class="nav-icon" [class.ios]="isIOS()" [class.selected]="selectedTab === 3">
<Image src="font://" class="fas"></Image>
</TabStripItem>
<TabStripItem class="nav-icon" [class.ios]="isIOS()" [class.selected]="selectedTab === 4">
<Image src="font://" class="fas"></Image>
</TabStripItem>
</TabStrip>
Expected behavior
The Images (using Ionicons) should be centered vertically. Styling on Image, TabStripItem or Tabstrip is not working (not applied at all).
Activity
tsonevn commentedon Oct 22, 2019
HI @Firetrip,
I was able to recreate the case on iPhone 8 simulator. As a reference, I am attaching the project, which I used for debugging. On that matter, I will mark this as a bug and we will investigate it further. Regarding the styling of BottomNavigation on iOS, keep in mind that you can’t style individual TabStripItem components on the iOS Tabs component. You can style them on the TabStrip component together. For more info, check out the blog post here.
Ayushpatel71106 commentedon Nov 7, 2019
Hii i am working on nativescript ,but i using the tabitem horizontal is working but vertical is not working.
rigor789 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