Merge pull request #287 from flypapertech/fix-ios-tabs-selector-ripple

fix(tabs ios): selector and ripple color css
nativescript-community · Apr 29, 2021 · 5319ae9 · 5319ae9
2 parents 0e0c20d + b6b0125
commit 5319ae9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/src/core/tab-navigation-base/tab-navigation-base/index.ts b/src/core/tab-navigation-base/tab-navigation-base/index.ts
@@ -255,6 +255,15 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
     public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: any): void {
         // overridden by inheritors
     }
+
+    public setTabBarRippleColor(value: Color) {
+        // overridden by inheritors
+    }
+
+    public getTabBarRippleColor() {
+        // overridden by inheritors
+        return null;
+    }
 }
 
 const MIN_ICON_SIZE = 24;

diff --git a/src/core/tab-navigation-base/tab-strip/index.ts b/src/core/tab-navigation-base/tab-strip/index.ts
@@ -1,6 +1,7 @@
 /**
  * @module @nativescript-community/ui-material-core/tab-navigation-base/tab-strip
  */
+import { rippleColorProperty } from '../../cssproperties';
 import { AddArrayFromBuilder, AddChildFromBuilder, CSSType, Color, CssProperty, Property, Style, View, ViewBase, booleanConverter } from '@nativescript/core';
 import { backgroundColorProperty, backgroundInternalProperty, colorProperty, fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
 import { textTransformProperty } from '@nativescript/core/ui/text-base';
@@ -172,6 +173,18 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
 
         return parent && parent.setTabBarUnSelectedItemColor(value);
     }
+
+    [rippleColorProperty.getDefault](): Color {
+        const parent = this.parent as TabNavigationBase;
+
+        return parent && parent.getTabBarRippleColor();
+    }
+
+    [rippleColorProperty.setNative](value: Color) {
+        const parent = this.parent as TabNavigationBase;
+
+        return parent && parent.setTabBarRippleColor(value);
+    }
 }
 
 const itemsProperty = new Property<TabStrip, TabStripItem[]>({

diff --git a/src/tabs/tabs.ios.ts b/src/tabs/tabs.ios.ts
@@ -1,4 +1,4 @@
-import { rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
+import { themer } from '@nativescript-community/ui-material-core';
 import { Color, Device, Font, Frame, IOSHelper, ImageSource, Trace, Utils, View, ViewBase } from '@nativescript/core';
 import { TabsBase, swipeEnabledProperty } from './tabs-common';
 
@@ -492,6 +492,8 @@ export class Tabs extends TabsBase {
 
     public _needsCacheUpdate = false;
     public _animateNextChange = true;
+    private _selectionIndicatorColor: Color;
+    private _rippleColor: Color;
 
     constructor() {
         super();
@@ -1084,13 +1086,13 @@ export class Tabs extends TabsBase {
         this._ios.tabBar.setImageTintColorForState(nativeColor, UIControlState.Selected);
     }
 
-    public getTabBarHighlightColor(): UIColor {
-        return this._ios.tabBar.tintColor;
+    public getTabBarHighlightColor(): Color {
+        return this._selectionIndicatorColor;
     }
 
-    public setTabBarHighlightColor(value: UIColor | Color) {
-        const nativeColor = value instanceof Color ? value.ios : value;
-        this._ios.tabBar.tintColor = nativeColor;
+    public setTabBarHighlightColor(value: Color) {
+        this._selectionIndicatorColor = value;
+        this._ios.tabBar.selectionIndicatorStrokeColor = value.ios;
     }
 
     public getTabBarSelectedItemColor(): Color {
@@ -1122,8 +1124,13 @@ export class Tabs extends TabsBase {
         });
     }
 
-    [rippleColorProperty.setNative](value: UIColor | Color) {
-        this.setTabBarHighlightColor(value);
+    public setTabBarRippleColor(value: Color) {
+        this._rippleColor = value;
+        this._ios.tabBar.rippleColor = value.ios;
+    }
+
+    public getTabBarRippleColor(): Color {
+        return this._rippleColor;
     }
 
     [selectedIndexProperty.setNative](value: number) {