feat: TabGroup show/hide support, iOS 18+ elevated tab bar

[prashantsaini1]

Goal: Show/hide tab-bar programmatically, especially on iOS 18+ elevated tab bar which obstructs custom nav bar on iPad apps with a TabGroup.

Properties

1. tabBarVisible: show/hide the tab-bar, now on iOS 18+ also.

   • Default animation is disabled. Animations usually should not run on property updates, like view.visible on Android.
   • To enable animation, we can now use new showTabBar() / hideTabBar() methods.

2. enabled: Android only: enable/disable the swipe and click events on Tabs.

   • Default is true. This has been decoupled from the previous disableTabNavigation to allow disabling TabGroup interactions without hiding it actually. To hide the TabGroup, new properties/methods can be used.
   • Also fixed a bug where Tabs click are active despite the tab-navigation is disabled.

Methods

1. Ti.UI.TabGroup.showTabBar(): shows the tab bar with animation.
2. Ti.UI.TabGroup.hideTabBar(): shows the tab bar with animation.

Removed methods: (These methods do not work programmatically)

1. Ti.UI.Window.showTabBar()
2. Ti.UI.Window.hideTabBar()

[hansemannn]

@prashantsaini1 Please finish this PR

[prashantsaini1]

@m1ga disableTabNavigation now takes care of the conflicted new property enabled. The enabled property is not implemented for the default style TabGroup, and it won't work at creation time since the view will be null by then.

I checked further and we don't even need disableTabNavigation as it's equal to swipeable + enabled which sounds more relatable to what both these properties will do. I will implement the remaining part for the enabled and this should be fine to go then.

So we will finally have all different controls:

• enabled : to handle Tab clicks.
• swipeable: to handle swipe gestures.
• tabBarVisible: to show/hide without animation or at creation time.
• showTabBar/hideTabBar: to show/hide with animation.

[prashantsaini1]

@m1ga @hansemannn This PR is ready now.

[m1ga]

think the last push broke the build process @prashantsaini1

[prashantsaini1]

@m1ga resolved!

[hansemannn]

Some iOS feedbacks - maybe @m1ga can check Android?

[m1ga]

Android:

I've created some test code to test the new functions:

const window = Ti.UI.createWindow();
const btn = Ti.UI.createButton({
	title: 'Show / hide tab group',
	top: 0
});
const btn2 = Ti.UI.createButton({
	title: 'enable / disable',
	top: 50
});
let isVisible = false;

btn.addEventListener('click', () => {
	// tabGroup.tabBarVisible = !tabGroup.tabBarVisible;
	if (isVisible) {
		tabGroup.hideTabBar()
	} else {
		tabGroup.showTabBar()
	}
	isVisible = !isVisible;
});
btn2.addEventListener('click', () => {
	tabGroup.enabled = !tabGroup.enabled;
});

window.add([btn, btn2]);

let tabGroup = Ti.UI.createTabGroup({
	style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION,
	tabBarVisible: false,
	tabs: [
		Ti.UI.createTab({
			window,
			title: "tab1"
		}),
		Ti.UI.createTab({
			window: Ti.UI.createWindow(),
			title: "tab2"
		})
	]
});

tabGroup.open();

There is one minor Android issue: when it is hidden by default and then you click "show" it won't run the animation. If you hide and show it again it will.

Rest is looking good: showTabBar(), hideTabBar() and enabled work.

[prashantsaini1]

@m1ga Thanks for the test cases.

• This is a known issue to me already as the native view height is not available until the window is opened and cannot set translationY onto it which is why the show() call does not run animation for first time.
• It's doable though by storing the height for the native view when it's created and then apply translationY again.

I'll give it a try again and see if it works!

[m1ga]

#14190 has the changes for the experimental BottomNavigation. I've kept it separate so you can finish this one without any changes by me.

[prashantsaini1]

This PR is finally complete from my end. Latest updates:

• The known bug in Android is fixed where showTabBar() animation does not work if tab-bar is initially hidden at creation time using tabBarVisible.
• Did some code optimisations and refactoring.
• @m1ga I also added all these features in the new experimental TiUIBottomNavigation API as well, so no updates are required in this other PR now.
  • Storing mBottomNavigationHeightValue is not required in this experimental API as the height is captured dynamically now.
  • I tested all use cases in new API similar to the existing TabGroup's style and all works fine. Please feel free to verify.

[hansemannn]

Last iOS changes, thank you!

[m1ga]

Android looking good 👍 Features work fine in the normal BottomNavigation and the new one and with the normal TabGroup.