feat(tabs): add animationEnabled property (#8704)

nativescript-core/ui/tabs/tabs-common.ts

@@ -43,4 +43,7 @@ tabsPositionProperty.register(TabsBase);
 
 export type IOSTabBarItemsAlignment = "leading" | "justified" | "center" | "centerSelected";
 export const iOSTabBarItemsAlignmentProperty = new Property<TabsBase, IOSTabBarItemsAlignment>({ name: "iOSTabBarItemsAlignment", defaultValue: "justified" });
-iOSTabBarItemsAlignmentProperty.register(TabsBase);
+iOSTabBarItemsAlignmentProperty.register(TabsBase);
+
+export const animationEnabledProperty = new Property<TabsBase, boolean>({ name: "animationEnabled", defaultValue: true, valueConverter: booleanConverter });
+animationEnabledProperty.register(TabsBase);

nativescript-core/ui/tabs/tabs.android.ts

@@ -15,7 +15,7 @@ import {
     getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
 } from "../tab-navigation-base/tab-navigation-base";
 import { getTransformedText } from "../text-base";
-import { offscreenTabLimitProperty, swipeEnabledProperty, TabsBase } from "./tabs-common";
+import { offscreenTabLimitProperty, swipeEnabledProperty, animationEnabledProperty, TabsBase } from "./tabs-common";
 
 export * from "./tabs-common";
 
@@ -378,6 +378,7 @@ export class Tabs extends TabsBase {
     private _textTransform: TextTransform = "uppercase";
     private _selectedItemColor: Color;
     private _unSelectedItemColor: Color;
+    public animationEnabled: boolean;
 
     constructor() {
         super();
@@ -946,14 +947,11 @@ export class Tabs extends TabsBase {
     }
 
     [selectedIndexProperty.setNative](value: number) {
-        const smoothScroll = true;
-
         // TODO
         // if (traceEnabled()) {
         //     traceWrite("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
         // }
-
+        this._viewPager.setCurrentItem(value, this.animationEnabled);
-        this._viewPager.setCurrentItem(value, smoothScroll);
     }
 
     [itemsProperty.getDefault](): TabContentItem[] {
@@ -985,6 +983,10 @@ export class Tabs extends TabsBase {
     [offscreenTabLimitProperty.setNative](value: number) {
         this._viewPager.setOffscreenPageLimit(value);
     }
+
+    [animationEnabledProperty.setNative](value: number) {
+      (<any>this._viewPager).setAnimationEnabled(value);
+    }
 }
 
 function tryCloneDrawable(value: android.graphics.drawable.Drawable, resources: android.content.res.Resources): android.graphics.drawable.Drawable {

nativescript-core/ui/tabs/tabs.ios.ts

@@ -13,9 +13,17 @@ import { ios as iosView, View } from "../core/view";
 import { Frame } from "../frame";
 import { Font } from "../styling/font";
 import {
-    getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty,
+    getIconSpecSize,
+    itemsProperty,
+    selectedIndexProperty,
+    tabStripProperty,
 } from "../tab-navigation-base/tab-navigation-base";
-import { swipeEnabledProperty, TabsBase, IOSTabBarItemsAlignment, iOSTabBarItemsAlignmentProperty } from "./tabs-common";
+import {
+    IOSTabBarItemsAlignment,
+    iOSTabBarItemsAlignmentProperty,
+    swipeEnabledProperty,
+    TabsBase
+} from "./tabs-common";
 
 // TODO
 // import { profile } from "../../profiling";
@@ -463,6 +471,7 @@ export class Tabs extends TabsBase {
     public _defaultItemBackgroundColor: UIColor;
     private _selectedItemColor: Color;
     private _unSelectedItemColor: Color;
+    public animationEnabled: boolean;
 
     constructor() {
         super();
@@ -1102,7 +1111,7 @@ export class Tabs extends TabsBase {
             // do not make layout changes while the animation is in progress https://stackoverflow.com/a/47031524/613113
             this.visitFrames(item, frame => frame._animationInProgress = true);
 
-            this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, true, (finished: boolean) => {
+            invokeOnRunLoop( () => this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, this.animationEnabled, (finished: boolean) => {
                 this.visitFrames(item, frame => frame._animationInProgress = false);
                 if (finished) {
                     // HACK: UIPageViewController fix; see https://stackoverflow.com/a/17330606
@@ -1112,10 +1121,10 @@ export class Tabs extends TabsBase {
                     this._setCanBeLoaded(value);
                     this._loadUnloadTabItems(value);
                 }
-            });
+            }));
 
             if (this.tabBarItems && this.tabBarItems.length && this.viewController && this.viewController.tabBar) {
-                this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[value], true);
+                this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[value], this.animationEnabled);
             }
             // TODO:
             // (<any>this._ios)._willSelectViewController = this._ios.viewControllers[value];
@@ -1140,7 +1149,6 @@ export class Tabs extends TabsBase {
     [tabStripProperty.getDefault](): TabStrip {
         return null;
     }
-
     [tabStripProperty.setNative](value: TabStrip) {
         this.setViewControllers(this.items);
         selectedIndexProperty.coerce(this);
@@ -1149,7 +1157,6 @@ export class Tabs extends TabsBase {
     [swipeEnabledProperty.getDefault](): boolean {
         return true;
     }
-
     [swipeEnabledProperty.setNative](value: boolean) {
         if (this.viewController && this.viewController.scrollView) {
             this.viewController.scrollView.scrollEnabled = value;
@@ -1165,7 +1172,6 @@ export class Tabs extends TabsBase {
 
         return <any>(alignment.charAt(0).toLowerCase() + alignment.substring(1));
     }
-
     [iOSTabBarItemsAlignmentProperty.setNative](value: IOSTabBarItemsAlignment) {
         if (!this.viewController || !this.viewController.tabBar) {
             return;
@@ -1219,4 +1225,4 @@ export class Tabs extends TabsBase {
             this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
         }
     }
-}
+}

tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabViewPager.java

@@ -1,18 +1,15 @@
-/**
- * 
- */
 package org.nativescript.widgets;
 
 import android.content.Context;
 import androidx.viewpager.widget.ViewPager;
 import android.util.AttributeSet;
-import android.view.View;
 import android.view.MotionEvent;
 import android.view.KeyEvent;
 
 // See this thread for more information https://stackoverflow.com/questions/9650265
 public class TabViewPager extends ViewPager {
     private boolean swipePageEnabled = true;
+    private boolean animationEnabled = true;
 
     public TabViewPager(Context context) {
         super(context);
@@ -26,6 +23,10 @@ public class TabViewPager extends ViewPager {
         this.swipePageEnabled = enabled;
     }
 
+    public void setAnimationEnabled(boolean enabled) {
+        this.animationEnabled = enabled;
+    }
+
     @Override
     public boolean onInterceptTouchEvent(MotionEvent event) {
         if (this.swipePageEnabled) {
@@ -55,6 +56,7 @@ public class TabViewPager extends ViewPager {
 
     @Override
     public void setCurrentItem(int item) {
-        super.setCurrentItem(item, this.swipePageEnabled);
+        boolean smoothScroll = this.animationEnabled && this.swipePageEnabled;
+        super.setCurrentItem(item, smoothScroll);
     }
 }