Add animated tab bar show/hide support for native tabs

[alex-vance]

Description

TabsHost currently supports tabBarHidden, but on iOS it hides/shows the native tab bar immediately by calling setTabBarHidden(... animated: NO) on iOS 18+ or toggling tabBar.hidden on older versions.

It would be useful to have first-class support for animated tab bar visibility changes, for example:

• tabBarHiddenAnimation?: "none" | "fade" | "native"
• or tabBarHiddenAnimated?: boolean
• or an iOS-specific prop for controlling hide/show transition behavior

Use case

Some apps use native tabs with a central action tab or overlay menu. When opening that overlay, the app may need to hide the native tab bar without causing an abrupt layout/visibility change. A fade transition keeps the native tabs experience but avoids needing to patch react-native-screens.

Current workaround

The workaround is to patch RNSTabsHostComponentView.mm so tab bar visibility changes animate tabBar.alpha instead of immediately hiding/showing the tab bar.

Conceptually:

[UIView animateWithDuration:0.2 animations:^{
  _controller.tabBar.alpha = _tabBarHidden ? 0 : 1;
}];

Prior related work

tabBarHidden itself already exists from the native tabs work, but the current implementation appears intentionally non-animated. This request is specifically for an official API to control the show/hide transition without patching the package.

Related PRs:

• iOS tabBarHidden: feat(iOS, Tabs): add prop to hide the tab bar #3343
• Android tabBarHidden: feat(Android, Tabs): add prop to hide the tab bar #3344

Happy to put in a PR if you're open to including. Thanks!

[kkafar]

Hey @alex-vance,

that makes sense. I think this could be supported.

We're currently close to stable release & it's our focus, but I'll add this to the backlog & we'll take care of it after first stable release.