Skip to content

Commit c4a5b42

Browse files
farfromrefugfarfromrefug
committed
fix(bottomnavigationbar): font icons not working
1 parent ad57a8b commit c4a5b42

File tree

4 files changed

+74
-41
lines changed

4 files changed

+74
-41
lines changed

‎src/bottom-navigation/index.ios.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TabStrip } from '@nativescript-community/ui-material-core/tab-navigatio
55
import { TabStripItem } from '@nativescript-community/ui-material-core/tab-navigation-base/tab-strip-item';
66
// Types
77
// Requires
8-
import { CSSType, Color, Device, CoreTypes, Font, Frame, IOSHelper, ImageSource, Property, Utils, View, booleanConverter } from '@nativescript/core';
8+
import { CSSType, Color, CoreTypes, Device, Font, Frame, IOSHelper, ImageSource, Property, Utils, View, booleanConverter } from '@nativescript/core';
99
import { getTransformedText } from '@nativescript/core/ui/text-base';
1010
import { iOSNativeHelper } from '@nativescript/core/utils';
1111
export { TabContentItem, TabStrip, TabStripItem };

‎src/bottomnavigationbar/bottomnavigationbar-common.ts‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export interface TabReselectedEventData extends EventData {
4444
export enum TitleVisibility {
4545
selected = 0,
4646
always = 1,
47-
never = 2,
47+
never = 2
4848
}
4949

5050
@CSSType('BottomNavigationBar')
@@ -88,7 +88,7 @@ export abstract class BottomNavigationBarBase extends View {
8888
const eventData: TabPressedEventData = {
8989
eventName: BottomNavigationBarBase.tabPressedEvent,
9090
object: this,
91-
index,
91+
index
9292
};
9393
this.notify(eventData);
9494

@@ -102,7 +102,7 @@ export abstract class BottomNavigationBarBase extends View {
102102
eventName: BottomNavigationBarBase.tabSelectedEvent,
103103
object: this,
104104
oldIndex: this.selectedTabIndex,
105-
newIndex: index,
105+
newIndex: index
106106
};
107107
this.selectedTabIndex = index;
108108
this.notify(eventData);
@@ -116,7 +116,7 @@ export abstract class BottomNavigationBarBase extends View {
116116
const eventData: TabReselectedEventData = {
117117
eventName: BottomNavigationBarBase.tabReselectedEvent,
118118
object: this,
119-
index,
119+
index
120120
};
121121
this.notify(eventData);
122122
}
@@ -144,7 +144,7 @@ export abstract class BottomNavigationBarBase extends View {
144144

145145
export const tabsProperty = new Property<BottomNavigationBarBase, BottomNavigationTabBase[]>({
146146
name: 'tabs',
147-
affectsLayout: true,
147+
affectsLayout: true
148148
});
149149

150150
tabsProperty.register(BottomNavigationBarBase);
@@ -153,15 +153,15 @@ export const titleVisibilityProperty = new Property<BottomNavigationBarBase, Tit
153153
name: 'titleVisibility',
154154
equalityComparer: (x, y) => x === y,
155155
affectsLayout: true,
156-
valueConverter: (v) => (typeof v === 'string') ? TitleVisibility[v.toLowerCase()]:v ,
156+
valueConverter: (v) => (typeof v === 'string' ? TitleVisibility[v.toLowerCase()] : v)
157157
});
158158

159159
titleVisibilityProperty.register(BottomNavigationBarBase);
160160

161161
export const autoClearBadgeProperty = new Property<BottomNavigationBarBase, boolean>({
162162
name: 'autoClearBadge',
163163
defaultValue: true,
164-
valueConverter: booleanConverter,
164+
valueConverter: booleanConverter
165165
});
166166

167167
autoClearBadgeProperty.register(BottomNavigationBarBase);
@@ -170,29 +170,29 @@ export const activeColorCssProperty = new CssProperty<Style, Color>({
170170
name: 'activeColor',
171171
cssName: 'active-color',
172172
equalityComparer: Color.equals,
173-
valueConverter: (v) => new Color(v),
173+
valueConverter: (v) => new Color(v)
174174
});
175175
activeColorCssProperty.register(Style);
176176

177177
export const inactiveColorCssProperty = new CssProperty<Style, Color>({
178178
name: 'inactiveColor',
179179
cssName: 'inactive-color',
180180
equalityComparer: Color.equals,
181-
valueConverter: (v) => new Color(v),
181+
valueConverter: (v) => new Color(v)
182182
});
183183
inactiveColorCssProperty.register(Style);
184184
export const badgeColorCssProperty = new CssProperty<Style, Color>({
185185
name: 'badgeColor',
186186
cssName: 'badge-color',
187187
equalityComparer: Color.equals,
188-
valueConverter: (v) => new Color(v),
188+
valueConverter: (v) => new Color(v)
189189
});
190190
badgeColorCssProperty.register(Style);
191191
export const badgeTextColorCssProperty = new CssProperty<Style, Color>({
192192
name: 'badgeTextColor',
193193
cssName: 'badge-text-color',
194194
equalityComparer: Color.equals,
195-
valueConverter: (v) => new Color(v),
195+
valueConverter: (v) => new Color(v)
196196
});
197197
badgeTextColorCssProperty.register(Style);
198198

@@ -207,41 +207,40 @@ interface BottomNavigationTabProps {
207207
@CSSType('BottomNavigationTab')
208208
export abstract class BottomNavigationTabBase extends View implements BottomNavigationTabProps {
209209
@cssProperty title: string;
210-
@cssProperty icon: ImageSource;
210+
@cssProperty icon: string | ImageSource;
211211
isSelectable?: boolean;
212212

213213
@cssProperty activeColor: Color;
214214
@cssProperty inactiveColor: Color;
215215

216-
constructor(args?: BottomNavigationTabProps) {
217-
super();
218-
if (!args) {
219-
return;
220-
}
221-
for (const k in args) {
222-
if (args.hasOwnProperty(k)) {
223-
this[k] = args[k];
224-
}
225-
}
226-
}
227-
228-
abstract getNativeIcon(): any;
216+
// constructor(args?: BottomNavigationTabProps) {
217+
// super();
218+
// if (!args) {
219+
// return;
220+
// }
221+
// for (const k in args) {
222+
// if (args.hasOwnProperty(k)) {
223+
// this[k] = args[k];
224+
// }
225+
// }
226+
// }
227+
228+
// abstract getNativeIcon(): any;
229229
abstract showBadge(value?: number): void;
230230
abstract removeBadge(): void;
231231
}
232232

233233
export const isSelectableProperty = new Property<BottomNavigationTabBase, boolean>({
234234
name: 'isSelectable',
235235
defaultValue: true,
236-
valueConverter: booleanConverter,
236+
valueConverter: booleanConverter
237237
});
238238

239239
isSelectableProperty.register(BottomNavigationTabBase);
240240

241241
export const iconProperty = new Property<BottomNavigationTabBase, ImageSource>({
242242
name: 'icon',
243-
affectsLayout: true,
244-
valueConverter: ImageSource.fromFileOrResourceSync,
243+
affectsLayout: true
245244
});
246245

247246
iconProperty.register(BottomNavigationTabBase);

‎src/bottomnavigationbar/bottomnavigationbar.android.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { state, stateSets } from '@nativescript-community/ui-material-core/android/utils';
2-
import { Color } from '@nativescript/core';
1+
import { getFullColorStateList, state, stateSets } from '@nativescript-community/ui-material-core/android/utils';
2+
import { Color, fontInternalProperty, ImageSource, Utils } from '@nativescript/core';
33
import {
44
BottomNavigationBarBase,
55
BottomNavigationTabBase,
@@ -9,7 +9,8 @@ import {
99
badgeTextColorCssProperty,
1010
inactiveColorCssProperty,
1111
tabsProperty,
12-
titleVisibilityProperty
12+
titleVisibilityProperty,
13+
iconProperty
1314
} from './bottomnavigationbar-common';
1415

1516
// Types shortcuts
@@ -193,8 +194,8 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
193194
// the create nativeView will actually add the item to the tab bar
194195
item.index = index;
195196
this._addView(item);
196-
const tab = item.nativeViewProtected;
197-
tab.setIcon(item.getNativeIcon());
197+
// const tab = item.nativeViewProtected;
198+
// tab.setIcon(item.getNativeIcon());
198199
});
199200
}
200201

@@ -224,8 +225,21 @@ export class BottomNavigationTab extends BottomNavigationTabBase {
224225
initNativeView() {
225226
// override for super not to be called. isClickable does not exist on android.view.MenuItem
226227
}
227-
getNativeIcon(): android.graphics.drawable.BitmapDrawable {
228-
return this.icon && new android.graphics.drawable.BitmapDrawable(this.icon.android);
228+
[iconProperty.setNative](iconSource) {
229+
if (!iconSource) {
230+
return null;
231+
}
232+
let is: ImageSource;
233+
if (iconSource instanceof ImageSource) {
234+
is = iconSource;
235+
} else if (Utils.isFontIconURI(iconSource)) {
236+
const fontIconCode = iconSource.split('//')[1];
237+
const font = this.style.fontInternal;
238+
is = ImageSource.fromFontIconCodeSync(fontIconCode, font, new Color('white'));
239+
} else {
240+
is = ImageSource.fromFileOrResourceSync(iconSource);
241+
}
242+
this.nativeViewProtected.setIcon(is ? new android.graphics.drawable.BitmapDrawable(is.android) : null);
229243
}
230244

231245
showBadge(value?): void {
@@ -256,7 +270,7 @@ export class BottomNavigationTab extends BottomNavigationTabBase {
256270
this.activeColor instanceof Color
257271
? this.activeColor.android
258272
: this.nativeViewProtected.getIconTintList()
259-
? this.nativeViewProtected.getIconTintList().getColorForState(stateSets.FOCUSED_STATE_SET, color2)
273+
? this.nativeViewProtected.getIconTintList().getColorForState(stateSets.SELECTED_STATE_SET, color2)
260274
: 0;
261275
const colorStateList = createColorStateList(color1, color2);
262276
// this.nativeViewProtected.setText(colorStateList); // can we set the text color?

‎src/bottomnavigationbar/bottomnavigationbar.ios.ts‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { themer } from '@nativescript-community/ui-material-core';
2-
import { Application, Color, Screen, Utils, backgroundColorProperty } from '@nativescript/core';
2+
import { Application, Color, ImageSource, Screen, Utils, backgroundColorProperty } from '@nativescript/core';
33
import {
44
BottomNavigationBarBase,
55
BottomNavigationTabBase,
@@ -9,7 +9,8 @@ import {
99
badgeTextColorCssProperty,
1010
inactiveColorCssProperty,
1111
tabsProperty,
12-
titleVisibilityProperty
12+
titleVisibilityProperty,
13+
iconProperty
1314
} from './bottomnavigationbar-common';
1415

1516
@NativeClass
@@ -193,9 +194,28 @@ export class BottomNavigationTab extends BottomNavigationTabBase {
193194
}
194195

195196
getNativeIcon(): UIImage {
196-
return this.icon && this.icon.ios;
197-
}
197+
const iconSource = this.icon;
198+
if (!iconSource) {
199+
return null;
200+
}
201+
if (iconSource instanceof ImageSource) {
202+
return iconSource.ios;
203+
}
198204

205+
let is: ImageSource;
206+
if (Utils.isFontIconURI(iconSource)) {
207+
const fontIconCode = iconSource.split('//')[1];
208+
const font = this.style.fontInternal;
209+
is = ImageSource.fromFontIconCodeSync(fontIconCode, font, new Color('white'));
210+
} else {
211+
is = ImageSource.fromFileOrResourceSync(iconSource);
212+
}
213+
214+
return is && is.ios;
215+
}
216+
[iconProperty.setNative](iconSource) {
217+
this.nativeViewProtected.image = this.getNativeIcon();
218+
}
199219
getMDView() {
200220
return (this.parent as BottomNavigationBar).nativeViewProtected.viewForItem(this.nativeViewProtected) as MDCBottomNavigationItemView;
201221
}

0 commit comments

Comments
 (0)