Skip to content

Commit ff6d89f

Browse files
MartoYankovMartoYankov
authored
feat(ios): add icon rendering mode for bottom navigation (#7738)
1 parent f436b6f commit ff6d89f

6 files changed

Lines changed: 21 additions & 43 deletions

File tree

‎e2e/ui-tests-app/app/bottom-navigation/binding-page.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</StackLayout>
1212
<GridLayout row="1">
1313
<BottomNavigation automationText="tabNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
14-
<TabStrip items="{{ tabStripItems }}">
14+
<TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
1515
</TabStrip>
1616
</BottomNavigation>
1717
</GridLayout>

‎e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml‎

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,8 @@
33
<ActionBar title="BottomNavigation" icon="" class="action-bar">
44
</ActionBar>
55

6-
<!-- w/o TabStrip -->
7-
<!-- <BottomNavigation>
8-
<TabContentItem>
9-
<GridLayout>
10-
<Label text="First View"/>
11-
</GridLayout>
12-
</TabContentItem>
13-
<TabContentItem>
14-
<GridLayout>
15-
<Label text="Second View"/>
16-
</GridLayout>
17-
</TabContentItem>
18-
</BottomNavigation> -->
19-
20-
<!-- w/ TabStrip -->
216
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
22-
<TabStrip>
7+
<TabStrip iosIconRenderingMode="alwaysOriginal">
238
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
249
<TabStripItem>
2510
<!-- <Image src="res://icon" /> -->
@@ -71,26 +56,4 @@
7156
</StackLayout>
7257
</TabContentItem>
7358
</BottomNavigation>
74-
75-
<!-- =============================================================================================== -->
76-
77-
<!-- Bottom Bar with TabStrip -->
78-
<!-- <BottomNavigationBar>
79-
<TabStrip>
80-
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
81-
<TabStripItem>
82-
<Image src="res://icon" />
83-
<Label text="Second Tab" />
84-
</TabStripItem>
85-
</TabStrip>
86-
</BottomNavigationBar> -->
87-
88-
<!-- Bottom Bar w/o TabStrip -->
89-
<!-- <BottomNavigationBar>
90-
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
91-
<TabStripItem>
92-
<Image src="res://icon" />
93-
<Label text="Second Tab" />
94-
</TabStripItem>
95-
</BottomNavigationBar> -->
9659
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ActionBar title="BottomNavigation" icon="" class="action-bar">
33
</ActionBar>
44
<BottomNavigation id="bottomNavigation" automationText="tabNavigation" class="font-awesome">
5-
<TabStrip>
5+
<TabStrip iosIconRenderingMode="alwaysOriginal">
66
<TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
77
<TabStripItem iconSource="font://&#xf206;" title="icon">
88
</TabStripItem>

‎e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</ActionBar>
44

55
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
6-
<TabStrip>
6+
<TabStrip iosIconRenderingMode="alwaysOriginal">
77
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
88
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
99
</TabStrip>

‎tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,15 @@ export class BottomNavigation extends TabNavigationBase {
531531
}
532532

533533
private getIconRenderingMode(): UIImageRenderingMode {
534-
return UIImageRenderingMode.AlwaysOriginal;
534+
switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
535+
case "alwaysOriginal":
536+
return UIImageRenderingMode.AlwaysOriginal;
537+
case "alwaysTemplate":
538+
return UIImageRenderingMode.AlwaysTemplate;
539+
case "automatic":
540+
default:
541+
return UIImageRenderingMode.Automatic;
542+
}
535543
}
536544

537545
private getIcon(tabStripItem: TabStripItem): UIImage {
@@ -547,10 +555,12 @@ export class BottomNavigation extends TabNavigationBase {
547555
const color = target.style.color;
548556
const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");
549557

558+
let isFontIcon = false;
550559
let image: UIImage = this._iconsCache[iconTag];
551560
if (!image) {
552561
let is = new ImageSource;
553562
if (isFontIconURI(iconSource)) {
563+
isFontIcon = true;
554564
const fontIconCode = iconSource.split("//")[1];
555565
is = fromFontIconCode(fontIconCode, font, color);
556566
} else {
@@ -564,7 +574,11 @@ export class BottomNavigation extends TabNavigationBase {
564574
image = this.getFixedSizeIcon(image);
565575
}
566576

567-
const originalRenderedImage = image.imageWithRenderingMode(this.getIconRenderingMode());
577+
let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysOriginal;
578+
if (!isFontIcon) {
579+
renderingMode = this.getIconRenderingMode();
580+
}
581+
const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
568582
this._iconsCache[iconTag] = originalRenderedImage;
569583
image = originalRenderedImage;
570584
} else {

‎tns-core-modules/ui/tabs/tabs.ios.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -885,6 +885,7 @@ export class Tabs extends TabsBase {
885885
}
886886

887887
private getIconRenderingMode(): UIImageRenderingMode {
888+
// MDCTabBar doesn't work with rendering mode AlwaysTemplate
888889
return UIImageRenderingMode.AlwaysOriginal;
889890
}
890891

0 commit comments

Comments
 (0)