Merge pull request #406 from nativescript-community/fix/tabstrip-animations

fix(tabs): fix weird behavior when disabling animations on tabstrip

Author: farfromrefug

packages/core-tabs/platforms/android/java/com/nativescript/material/core/TabsBar.java

@@ -74,6 +74,8 @@ public interface TabColorizer {
 
     private int mTitleOffset;
 
+    private boolean mIgnoreScrollEventsUntilNextStateChange = false;
+
     private boolean mDistributeEvenly = true;
 
     private TabItemSpec[] mTabItems;
@@ -159,6 +161,15 @@ public float getTabTextFontSize(){
         return mTabStrip.getTabTextFontSize();
     }
 
+    public void forceTransitionToPosition(int position){
+        mIgnoreScrollEventsUntilNextStateChange = true;
+        final int tabStripChildCount = mTabStrip.getChildCount();
+        if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
+            return;
+        }
+        mTabStrip.onTabsViewPagerPageChanged(position, 0);
+    }
+
     /**
      * Sets the associated view pager. Note that the assumption here is that the
      * pager content (number of tabs and tab titles) does not change after this
@@ -418,7 +429,7 @@ private class InternalViewPagerListener extends OnPageChangeCallback {
         @Override
         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
             int tabStripChildCount = mTabStrip.getChildCount();
-            if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
+            if (mIgnoreScrollEventsUntilNextStateChange || (tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
                 return;
             }
             mTabStrip.onTabsViewPagerPageChanged(position, positionOffset);
@@ -429,6 +440,7 @@ public void onPageScrolled(int position, float positionOffset, int positionOffse
 
         @Override
         public void onPageScrollStateChanged (int state) {
+            mIgnoreScrollEventsUntilNextStateChange = false;
             mScrollState = state;
         }
     }

src/core-tabs/tab-navigation/index.android.ts

@@ -252,6 +252,9 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
     protected abstract getTabBarItemView(index: number);
     protected abstract getTabBarItemTextView(index: number);
     protected abstract selectTabBar(oldIndex: number, newIndex: number);
+    protected willSelectWithoutAnimation(index: number) {
+        // noop
+    }
 
     private handleTabStripChanged(nativeView: org.nativescript.widgets.GridLayout, isNewView: boolean, newTabStrip: TabStrip) {
         if (this.mTabsBar) {
@@ -670,7 +673,14 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
     }
 
     public onTabsBarSelectedPositionChange(position: number, prevPosition: number): void {
-        this.mViewPager.setCurrentItem(position, this.animationEnabled);
+        // prevent setting it to the same value
+        // this is important when we're dragging and this is called with animationEnabled = false which will cause a jump
+        if (position !== this.mViewPager.getCurrentItem()) {
+            if (!this.animationEnabled) {
+                this.willSelectWithoutAnimation(position);
+            }
+            this.mViewPager.setCurrentItem(position, this.animationEnabled);
+        }
         const tabStripItems = this.tabStrip?.items;
 
         if (position >= 0 && tabStripItems && tabStripItems[position]) {
@@ -703,6 +713,9 @@ export abstract class TabNavigation<T extends android.view.ViewGroup = any> exte
     [selectedIndexProperty.setNative](value: number) {
         const current = this.mViewPager.getCurrentItem();
         if (current !== value) {
+            if (!this.animationEnabled) {
+                this.willSelectWithoutAnimation(value);
+            }
             this.mViewPager.setCurrentItem(value, this.animationEnabled);
         }
     }

src/tabs/index.android.ts

@@ -118,6 +118,9 @@ export class Tabs extends TabNavigation<TabsBar> {
         }
         super.setTabStripItems(items);
     }
+    protected override willSelectWithoutAnimation(index: number) {
+        this.mTabsBar?.forceTransitionToPosition(index);
+    }
 
     public override onLoaded(): void {
         super.onLoaded();

src/typings/extensions.android.d.ts

@@ -29,6 +29,7 @@ declare namespace com {
                     constructor(context: globalAndroid.content.Context, attrs: globalAndroid.util.AttributeSet);
                     constructor(context: globalAndroid.content.Context, attrs: globalAndroid.util.AttributeSet, defStyle: number);
 
+                    forceTransitionToPosition(position: number): void;
                     setSelectedIndicatorColors(color: Array<number>): void;
                     getSelectedIndicatorColors(): Array<number>;
                     setTabTextColor(color: number): void;