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

android/modules/ui/src/java/ti/modules/titanium/ui/TabGroupProxy.java

@@ -76,7 +76,8 @@ public class TabGroupProxy extends TiWindowProxy implements TiActivityWindow
 	private Object selectedTab; // NOTE: Can be TabProxy or Number
 	private String tabGroupTitle = null;
 	private boolean autoTabTitle = false;
-	private boolean tabEnabled = true;
+	private boolean isTabBarVisible = true;
+	private boolean isTabGroupEnabled = true;
 
 	public TabGroupProxy()
 	{
@@ -94,24 +95,52 @@ public int getTabIndex(TabProxy tabProxy)
 	@Kroll.method
 	public void disableTabNavigation(Object params)
 	{
+		String message
+			= "Ti.UI.TabGroup.disableTabNavigation() has been deprecated in 12.7.0 in favor of"
+			+ " Ti.UI.TabGroup.tabBarVisible and Ti.UI.TabGroup.enabled properties."
+			+ " Ti.UI.TabGroup.disableTabNavigation() will be removed since 13.0.0.";
+		Log.w(TAG, message);
+
 		if (params instanceof Boolean) {
-			TiUIAbstractTabGroup tabGroup = (TiUIAbstractTabGroup) view;
-			if (tabGroup != null) {
-				tabGroup.disableTabNavigation(TiConvert.toBoolean(params, false));
-			}
-		} else if (params instanceof HashMap<?, ?>) {
+			boolean isEnabled = !TiConvert.toBoolean(params, false);
+			setEnabled(isEnabled);
+			setTabBarVisible(isEnabled);
+			return;
+		}
+
+		if (params instanceof HashMap<?, ?>) {
 			KrollDict options = new KrollDict((HashMap<String, Object>) params);
-			TiUIAbstractTabGroup tabGroup = (TiUIAbstractTabGroup) view;
-			if (tabGroup != null) {
-				if (options.getBoolean(TiC.PROPERTY_ANIMATED)) {
-					setTabBarVisible(options.getBoolean(TiC.PROPERTY_ENABLED));
-				} else {
-					tabGroup.disableTabNavigation(options.getBoolean(TiC.PROPERTY_ENABLED));
-				}
+
+			boolean isEnabled = !options.optBoolean(TiC.PROPERTY_ENABLED, false);
+			boolean isAnimated = options.optBoolean(TiC.PROPERTY_ANIMATED, false);
+			setEnabled(isEnabled);
+
+			if (isAnimated) {
+				showHideTabBar(isEnabled);
+			} else {
+				setTabBarVisible(isEnabled);
 			}
 		}
 	}
 
+	@Kroll.setProperty
+	public void setEnabled(boolean enabled)
+	{
+		isTabGroupEnabled = enabled;
+
+		if (view instanceof TiUIBottomNavigationTabGroup bottomTabGroup) {
+			bottomTabGroup.disableTabNavigation(!isTabGroupEnabled);
+		} else if (view instanceof TiUITabLayoutTabGroup tabGroupDefault) {
+			tabGroupDefault.disableTabNavigation(!isTabGroupEnabled);
+		}
+	}
+
+	@Kroll.getProperty
+	public boolean getEnabled()
+	{
+		return isTabGroupEnabled;
+	}
+
 	@Kroll.method
 	public void addTab(TabProxy tab)
 	{
@@ -134,10 +163,33 @@ public void addTab(TabProxy tab)
 	@Kroll.setProperty
 	public void setTabBarVisible(boolean visible)
 	{
-		TiUIBottomNavigationTabGroup tabGroup = (TiUIBottomNavigationTabGroup) view;
+		isTabBarVisible = visible;
 
-		if (tabGroup != null) {
-			tabGroup.setTabBarVisible(visible);
+		if (view instanceof TiUIBottomNavigationTabGroup bottomTabGroup) {
+			bottomTabGroup.setTabGroupVisibility(visible);
+		} else if (view instanceof TiUITabLayoutTabGroup tabGroupDefault) {
+			tabGroupDefault.setTabGroupVisibility(visible);
+		}
+	}
+
+	@Kroll.method
+	public void showTabBar()
+	{
+		showHideTabBar(true);
+	}
+
+	@Kroll.method
+	public void hideTabBar()
+	{
+		showHideTabBar(false);
+	}
+
+	private void showHideTabBar(boolean visible)
+	{
+		if (view instanceof TiUIBottomNavigationTabGroup bottomTabGroup) {
+			bottomTabGroup.showHideTabBar(visible);
+		} else if (view instanceof TiUITabLayoutTabGroup tabGroupDefault) {
+			tabGroupDefault.showHideTabBar(visible);
 		}
 	}
 
@@ -197,22 +249,6 @@ public void setActiveTab(Object tabOrIndex)
 		}
 	}
 
-	@Kroll.setProperty
-	public void setEnabled(Boolean enabled)
-	{
-		tabEnabled = enabled;
-		TiUIAbstractTabGroup tabGroup = (TiUIAbstractTabGroup) view;
-		if (tabGroup != null) {
-			tabGroup.setEnabled(enabled);
-		}
-	}
-
-	@Kroll.getProperty
-	public Boolean getEnabled()
-	{
-		return tabEnabled;
-	}
-
 	private TabProxy getActiveTabProxy()
 	{
 		Object activeTab = getActiveTab();
@@ -244,8 +280,7 @@ public void setTabs(Object obj)
 		}
 		tabs.clear();
 
-		if (obj instanceof Object[]) {
-			Object[] objArray = (Object[]) obj;
+		if (obj instanceof Object[] objArray) {
 			for (Object tabProxy : objArray) {
 				if (tabProxy instanceof TabProxy) {
 					addTab((TabProxy) tabProxy);
@@ -303,8 +338,11 @@ public void handleCreationDict(KrollDict options)
 		if (options.containsKeyAndNotNull(TiC.PROPERTY_ACTIVE_TAB)) {
 			setActiveTab(options.get(TiC.PROPERTY_ACTIVE_TAB));
 		}
+		if (options.containsKeyAndNotNull(TiC.PROPERTY_TAB_BAR_VISIBLE)) {
+			isTabBarVisible = options.optBoolean(TiC.PROPERTY_TAB_BAR_VISIBLE, isTabBarVisible);
+		}
 		if (options.containsKeyAndNotNull(TiC.PROPERTY_ENABLED)) {
-			setEnabled(options.getBoolean(TiC.PROPERTY_ENABLED));
+			isTabGroupEnabled = options.optBoolean(TiC.PROPERTY_ENABLED, isTabGroupEnabled);
 		}
 	}
 
@@ -523,6 +561,10 @@ protected void handlePostOpen()
 		// Prevent any duplicate events from firing by marking
 		// this group has having focus.
 		isFocused = true;
+
+		// Update UI if these properties are set before the native view is created.
+		setEnabled(isTabGroupEnabled);
+		setTabBarVisible(isTabBarVisible);
 	}
 
 	@Override

android/modules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUIAbstractTabGroup.java

@@ -6,6 +6,8 @@
  */
 package ti.modules.titanium.ui.widget.tabgroup;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
 import android.app.Activity;
 import android.content.res.ColorStateList;
 import android.content.res.TypedArray;
@@ -52,6 +54,8 @@
 import ti.modules.titanium.ui.TabGroupProxy;
 import ti.modules.titanium.ui.TabProxy;
 import com.google.android.material.R;
+import com.google.android.material.bottomnavigation.BottomNavigationView;
+import com.google.android.material.tabs.TabLayout;
 
 /**
  *  Abstract class representing Tab Navigation in Titanium. Abstract methods in it
@@ -675,6 +679,67 @@ public static ColorStateList createRippleColorStateListFrom(@ColorInt int colorI
 		return new ColorStateList(rippleStates, rippleColors);
 	}
 
+	public void setTabGroupVisibilityWithAnimation(View view, boolean visible)
+	{
+		if (this.proxy == null || this.proxy.peekView() == null) {
+			return;
+		}
+
+		int translationY = view.getHeight();
+		if (view instanceof TabLayout) {
+			translationY = -translationY;
+		}
+
+		view.animate()
+			.translationY(visible ? 0 : translationY)
+			.setDuration(250)
+			.setListener(new AnimatorListenerAdapter() {
+				@Override
+				public void onAnimationStart(Animator animation)
+				{
+					if (visible) {
+						view.setVisibility(View.VISIBLE);
+					}
+				}
+
+				@Override
+				public void onAnimationEnd(Animator animation)
+				{
+					if (!visible) {
+						view.setVisibility(View.GONE);
+					}
+				}
+			});
+
+		updateInsets(view);
+	}
+
+	public void setTabGroupVisibility(View view, boolean visible)
+	{
+		if (this.proxy == null || this.proxy.peekView() == null) {
+			return;
+		}
+
+		int translationY = view.getHeight();
+		if (view instanceof TabLayout) {
+			translationY = -translationY;
+		}
+
+		view.setTranslationY(visible ? 0 : translationY);
+		view.setVisibility(visible ? View.VISIBLE : View.GONE);
+		view.requestLayout();
+		updateInsets(view);
+	}
+
+	private void updateInsets(View view)
+	{
+		if (view instanceof BottomNavigationView) {
+			this.insetsProvider.setBottomBasedOn(view);
+		} else {
+			this.insetsProvider.setTopBasedOn(view);
+		}
+	}
+
 	/**
 	 * Implementation of the FragmentPagerAdapter
 	 */

android/modules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUIBottomNavigationTabGroup.java

@@ -13,6 +13,7 @@
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.RippleDrawable;
 import android.os.Build;
+import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewParent;
@@ -180,14 +181,6 @@ public void onLayoutChange(
 
 		// Set the ViewPager as a native view.
 		setNativeView(this.tabGroupViewPager);
-		if (!TiConvert.toBoolean(this.proxy.getProperty(TiC.PROPERTY_TAB_BAR_VISIBLE), true)) {
-			TiCompositeLayout.LayoutParams params = new TiCompositeLayout.LayoutParams();
-			params.autoFillsWidth = true;
-			params.optionBottom = new TiDimension(0, TiDimension.TYPE_BOTTOM);
-			this.tabGroupViewPager.setLayoutParams(params);
-			// FIXME change "500" to a calculate value https://github.com/tidev/titanium-sdk/issues/13900
-			this.mBottomNavigationView.setTranslationY(500);
-		}
 	}
 
 	/**
@@ -198,23 +191,18 @@ public void onLayoutChange(
 	public void disableTabNavigation(boolean disable)
 	{
 		super.disableTabNavigation(disable);
+		updateTabsInteraction();
+	}
 
-		// Resize the view pager (the tab's content) to compensate for shown/hidden tab bar.
-		// Not applicable if Titanium "extendSafeArea" is true, because tab bar overlaps content in this case.
-		ViewParent viewParent = this.tabGroupViewPager.getParent();
-		if ((viewParent instanceof View) && ((View) viewParent).getFitsSystemWindows()) {
-			TiCompositeLayout.LayoutParams params = new TiCompositeLayout.LayoutParams();
-			params.autoFillsWidth = true;
-			params.optionBottom = new TiDimension(disable ? 0 : mBottomNavigationHeightValue, TiDimension.TYPE_BOTTOM);
-			this.tabGroupViewPager.setLayoutParams(params);
+	/**
+	 * Enable or disable tabs click event.
+	 */
+	private void updateTabsInteraction()
+	{
+		Menu menu = this.mBottomNavigationView.getMenu();
+		for (int i = 0; i < menu.size(); i++) {
+			menu.getItem(i).setEnabled(!tabsDisabled);
 		}
-
-		// Show/hide the tab bar.
-		this.mBottomNavigationView.setVisibility(disable ? View.GONE : View.VISIBLE);
-		this.mBottomNavigationView.requestLayout();
-
-		// Update top inset. (Will remove bottom inset if tab bar is "gone".)
-		this.insetsProvider.setBottomBasedOn(this.mBottomNavigationView);
 	}
 
 	@Override
@@ -384,7 +372,7 @@ public void updateTabTitle(int index)
 		this.mBottomNavigationView.getMenu().getItem(index).setTitle(title);
 	}
 
-	public void setTabBarVisible(boolean visible)
+	public void showHideTabBar(boolean visible)
 	{
 		ViewParent viewParent = this.tabGroupViewPager.getParent();
 
@@ -395,22 +383,30 @@ public void setTabBarVisible(boolean visible)
 			params.autoFillsWidth = true;
 			params.optionBottom = new TiDimension(!visible ? 0 : mBottomNavigationHeightValue, TiDimension.TYPE_BOTTOM);
 
-			// make it a bit slower when moving up again so it won't show the background
-			int duration = !visible ? 200 : 400;
 			LayoutTransition lt = new LayoutTransition();
 			lt.enableTransitionType(LayoutTransition.CHANGING);
-			lt.setDuration(duration);
+			lt.setDuration(250);
 			this.tabGroupViewPager.setLayoutTransition(lt);
 			this.tabGroupViewPager.setLayoutParams(params);
 		}
 
-		if (visible) {
-			this.mBottomNavigationView.animate().translationY(0f).setDuration(200);
-		} else {
-			this.mBottomNavigationView.animate().translationY(mBottomNavigationView.getHeight()).setDuration(200);
+		super.setTabGroupVisibilityWithAnimation(mBottomNavigationView, visible);
+	}
+
+	public void setTabGroupVisibility(boolean visible)
+	{
+		ViewParent viewParent = this.tabGroupViewPager.getParent();
+
+		// Resize the view pager (the tab's content) to compensate for shown/hidden tab bar.
+		// Not applicable if Titanium "extendSafeArea" is true, because tab bar overlaps content in this case.
+		if ((viewParent instanceof View) && ((View) viewParent).getFitsSystemWindows()) {
+			TiCompositeLayout.LayoutParams params = new TiCompositeLayout.LayoutParams();
+			params.autoFillsWidth = true;
+			params.optionBottom = new TiDimension(!visible ? 0 : mBottomNavigationHeightValue, TiDimension.TYPE_BOTTOM);
+			this.tabGroupViewPager.setLayoutParams(params);
 		}
 
-		this.insetsProvider.setBottomBasedOn(this.mBottomNavigationView);
+		super.setTabGroupVisibility(mBottomNavigationView, visible);
 	}
 
 	@SuppressLint("RestrictedApi")
@@ -537,6 +533,10 @@ public void setEnabled(Boolean enabled)
 	@Override
 	public boolean onMenuItemClick(MenuItem item)
 	{
+		if (tabsDisabled) {
+			return true;
+		}
+
 		// The controller has changed its selected item.
 		int index = this.mMenuItemsArray.indexOf(item);
 		// Guard for clicking on the currently selected tab.