[iOS] [V8] Native bottom tabs: no way to adjust icon/label spacing on iOS (react-native-screens supports it, bottom-tabs never forwards it)
Current behavior
I'm on implementation="native" and I can't move the label away from the icon. On iOS 26 with SF Symbols the default gap came out tighter than our design wanted, and there is no option that touches it.
tabBarIconStyle is documented as custom implementation only, and tabBarLabelStyle is typed down to fontFamily | fontSize | fontWeight | fontStyle | color, so margins are not even an option there. With the JS tab bar this is a one-line marginBottom on the icon; with native tabs I couldn't find anything.
Reading BottomTabViewNativeImpl.tsx, the native path forwards font, colors and the badge appearance to TabsScreen and that's it. The annoying part is that react-native-screens already has what's needed: TabsScreen takes tabBarItemTitlePositionAdjustment?: { horizontal?: number; vertical?: number } (src/components/tabs/screen/TabsScreen.ios.types.ts), which is UITabBarItemAppearance.titlePositionAdjustment underneath. bottom-tabs just never sets it.
So right now, with native tabs on iOS, the icon/label gap is whatever UIKit gives you, and the only fix I found was patching the package.
Expected behavior
Some way to set the icon/label distance with native tabs. The smallest change I can think of is a new option in BottomTabNativeOptions:
tabBarLabelPositionAdjustment?: {
horizontal?: number;
vertical?: number;
};forwarded as tabBarItemTitlePositionAdjustment in the appearance objects in BottomTabViewNativeImpl.tsx, right next to tabBarItemBadgeBackgroundColor. Positive vertical pushes the label down and widens the gap, negative pulls it up. iOS only, native implementation only, same shape as tabBarMinimizeBehavior.
<Tab.Navigator
implementation="native"
screenOptions={{
tabBarLabelPositionAdjustment: { vertical: 2 },
}}
/>I have exactly this running as a local patch (the type plus destructuring the option and one line in the appearance object). With { vertical: 2 } the label moves down by 2pt and the icon stays where it was.
If the option name works for you I'm happy to open the PR and the docs PR. Other names I considered: tabBarLabelOffset, tabBarLabelPosition.
Reproduction
https://github.com/hydromoll/native-tabs-label-spacing-repro
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-drawer-layout
- react-native-tab-view
Environment
| package | version |
|---|---|
| @react-navigation/native | 8.0.0-alpha.46 |
| @react-navigation/bottom-tabs | 8.0.0-alpha.52 |
| react-native-screens | 4.26.0 |
| react-native | 0.86.3 |
| expo | 57.0.23 |
| node | 24 |
| npm / yarn | npm |
| iOS | 26, iPhone 17 Pro simulator |
Source: react-navigation/react-navigation