UNPKG

@nativescript-community/ui-material-bottom-navigation

Version:

Material Design Bottom Navigation bars allow movement between primary destinations in an app. Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.

738 lines 32.9 kB
// Types import { TabContentItem } from '@nativescript-community/ui-material-core-tabs/tab-content-item'; import { TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from '@nativescript-community/ui-material-core-tabs/tab-navigation-base'; import { TabsPosition } from '@nativescript-community/ui-material-core-tabs/tab-navigation/index-common'; import { TabStrip } from '@nativescript-community/ui-material-core-tabs/tab-strip'; import { TabStripItem } from '@nativescript-community/ui-material-core-tabs/tab-strip-item'; // Types // Requires import { CSSType, Color, Device, Font, Frame, IOSHelper, ImageSource, Property, Utils, View, booleanConverter } from '@nativescript/core'; import { getTransformedText } from '@nativescript/core/ui/text-base'; import { SDK_VERSION } from '@nativescript/core/utils'; export { TabContentItem, TabStrip, TabStripItem }; // TODO: // import { profile } from "../../profiling"; const maxTabsCount = 5; const isPhone = Device.deviceType === 'Phone'; var MDTabBarControllerImpl = /** @class */ (function (_super) { __extends(MDTabBarControllerImpl, _super); function MDTabBarControllerImpl() { return _super !== null && _super.apply(this, arguments) || this; } MDTabBarControllerImpl.initWithOwner = function (owner) { var handler = MDTabBarControllerImpl.alloc().init(); handler._owner = owner; handler._preventTraitCollectionChanges = false; return handler; }; MDTabBarControllerImpl.prototype.viewDidLoad = function () { _super.prototype.viewDidLoad.call(this); if (SDK_VERSION >= 18) { try { this._preventTraitCollectionChanges = true; this.traitOverrides.horizontalSizeClass = UIUserInterfaceSizeClass.Compact; } finally { this._preventTraitCollectionChanges = false; } } this.tabBar.backgroundColor = new Color('#fff').ios; }; MDTabBarControllerImpl.prototype.viewWillAppear = function (animated) { _super.prototype.viewWillAppear.call(this, animated); var owner = this._owner.get(); if (!owner) { return; } // Unify translucent and opaque bars layout this.extendedLayoutIncludesOpaqueBars = true; IOSHelper.updateAutoAdjustScrollInsets(this, owner); if (!owner.parent) { owner.callLoaded(); } }; MDTabBarControllerImpl.prototype.viewDidDisappear = function (animated) { var _a; _super.prototype.viewDidDisappear.call(this, animated); var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.get(); if (owner && !owner.parent && owner.isLoaded && !this.presentedViewController) { owner.callUnloaded(); } }; MDTabBarControllerImpl.prototype.viewWillTransitionToSizeWithTransitionCoordinator = function (size, coordinator) { var _this = this; var _a; _super.prototype.viewWillTransitionToSizeWithTransitionCoordinator.call(this, size, coordinator); if (!((_a = this._owner) === null || _a === void 0 ? void 0 : _a.get())) { return; } coordinator.animateAlongsideTransitionCompletion(function () { var _a, _b; var owner = (_a = _this._owner) === null || _a === void 0 ? void 0 : _a.get(); if ((_b = owner === null || owner === void 0 ? void 0 : owner.tabStrip) === null || _b === void 0 ? void 0 : _b.items) { var tabStrip_1 = owner.tabStrip; tabStrip_1.items.forEach(function (tabStripItem) { updateBackgroundPositions(tabStrip_1, tabStripItem); var index = tabStripItem.index; var tabBarItemController = _this.viewControllers[index]; updateTitleAndIconPositions(tabStripItem, tabBarItemController.tabBarItem, tabBarItemController); }); } }, null); }; // Mind implementation for other controllers MDTabBarControllerImpl.prototype.traitCollectionDidChange = function (previousTraitCollection) { var _a, _b, _c; _super.prototype.traitCollectionDidChange.call(this, previousTraitCollection); if (this._preventTraitCollectionChanges) { return; } if (SDK_VERSION >= 13) { var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.get(); if (owner && ((_c = (_b = this.traitCollection).hasDifferentColorAppearanceComparedToTraitCollection) === null || _c === void 0 ? void 0 : _c.call(_b, previousTraitCollection))) { owner.notify({ eventName: IOSHelper.traitCollectionColorAppearanceChangedEvent, object: owner }); } } }; return MDTabBarControllerImpl; }(UITabBarController)); var BNTabBarControllerDelegateImpl = /** @class */ (function (_super) { __extends(BNTabBarControllerDelegateImpl, _super); function BNTabBarControllerDelegateImpl() { return _super !== null && _super.apply(this, arguments) || this; } BNTabBarControllerDelegateImpl.initWithOwner = function (owner) { var delegate = BNTabBarControllerDelegateImpl.alloc().init(); delegate._owner = owner; return delegate; }; BNTabBarControllerDelegateImpl.prototype.tabBarControllerShouldSelectViewController = function (tabBarController, viewController) { // TODO // if (Trace.isEnabled()) { // Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug); // } var owner = this._owner.get(); if (owner) { // "< More" cannot be visible after clicking on the main tab bar buttons. var backToMoreWillBeVisible = false; owner._handleTwoNavigationBars(backToMoreWillBeVisible); if (tabBarController.viewControllers) { var position = tabBarController.viewControllers.indexOfObject(viewController); if (position !== NSNotFound) { var tabStrip = owner.tabStrip; var tabStripItems = tabStrip && tabStrip.items; if (tabStripItems && tabStripItems[position]) { tabStripItems[position]._emit(TabStripItem.tapEvent); tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position }); } } } } if (tabBarController.selectedViewController === viewController) { return false; } tabBarController._willSelectViewController = viewController; return true; }; BNTabBarControllerDelegateImpl.prototype.tabBarControllerDidSelectViewController = function (tabBarController, viewController) { // TODO // if (Trace.isEnabled()) { // Trace.write("TabView.delegate.DID_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug); // } var owner = this._owner.get(); if (owner) { owner._onViewControllerShown(viewController); } tabBarController._willSelectViewController = undefined; }; BNTabBarControllerDelegateImpl.ObjCProtocols = [UITabBarControllerDelegate]; return BNTabBarControllerDelegateImpl; }(NSObject)); var BNNavigationControllerDelegateImpl = /** @class */ (function (_super) { __extends(BNNavigationControllerDelegateImpl, _super); function BNNavigationControllerDelegateImpl() { return _super !== null && _super.apply(this, arguments) || this; } BNNavigationControllerDelegateImpl.initWithOwner = function (owner) { var delegate = BNNavigationControllerDelegateImpl.alloc().init(); delegate._owner = owner; return delegate; }; BNNavigationControllerDelegateImpl.prototype.navigationControllerWillShowViewControllerAnimated = function (navigationController, viewController, animated) { // TODO // if (Trace.isEnabled()) { // Trace.write("TabView.moreNavigationController.WILL_show(" + navigationController + ", " + viewController + ", " + animated + ");", Trace.categories.Debug); // } var owner = this._owner.get(); if (owner) { // If viewController is one of our tab item controllers, then "< More" will be visible shortly. // Otherwise viewController is the UIMoreListController which shows the list of all tabs beyond the 4th tab. var backToMoreWillBeVisible = owner.viewController.viewControllers.containsObject(viewController); owner._handleTwoNavigationBars(backToMoreWillBeVisible); } }; BNNavigationControllerDelegateImpl.prototype.navigationControllerDidShowViewControllerAnimated = function (navigationController, viewController, animated) { // TODO // if (Trace.isEnabled()) { // Trace.write("TabView.moreNavigationController.DID_show(" + navigationController + ", " + viewController + ", " + animated + ");", Trace.categories.Debug); // } // We don't need Edit button in More screen. navigationController.navigationBar.topItem.rightBarButtonItem = null; var owner = this._owner.get(); if (owner) { owner._onViewControllerShown(viewController); } }; BNNavigationControllerDelegateImpl.ObjCProtocols = [UINavigationControllerDelegate]; return BNNavigationControllerDelegateImpl; }(NSObject)); function updateBackgroundPositions(tabStrip, tabStripItem) { let bgView = tabStripItem.bgView; const index = tabStripItem.index; const width = tabStrip.nativeView.frame.size.width / tabStrip.items.length; const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width); if (!bgView) { bgView = UIView.alloc().initWithFrame(frame); tabStrip.nativeView.insertSubviewAtIndex(bgView, 0); tabStripItem.bgView = bgView; } else { bgView.frame = frame; } const backgroundColor = tabStripItem.style.backgroundColor; if (backgroundColor) { bgView.backgroundColor = backgroundColor instanceof Color ? backgroundColor.ios : backgroundColor; } else { // always default to at least a solid white background as fallback // building with Xcode 13 causes bgView with no background to be fully transparent unless a css background-color is set - this allows original default behavior to work as it always did bgView.backgroundColor = null; } } function updateTitleAndIconPositions(tabStripItem, tabBarItem, controller) { if (!tabStripItem || !tabBarItem) { return; } // For iOS <11 icon is *always* above the text. // For iOS 11 icon is above the text *only* on phones in portrait mode. const orientation = controller.interfaceOrientation; const isPortrait = orientation !== 4 /* UIInterfaceOrientation.LandscapeLeft */ && orientation !== 3 /* UIInterfaceOrientation.LandscapeRight */; const isIconAboveTitle = SDK_VERSION < 11 || (isPhone && isPortrait); if (!tabStripItem.iconSource) { if (isIconAboveTitle) { tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: -20 }; } else { tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 }; } } if (!tabStripItem.title) { if (isIconAboveTitle) { tabBarItem.imageInsets = new UIEdgeInsets({ top: 6, left: 0, bottom: -6, right: 0 }); } else { tabBarItem.imageInsets = new UIEdgeInsets({ top: 0, left: 0, bottom: 0, right: 0 }); } } } export const iosCustomPositioningProperty = new Property({ name: 'iosCustomPositioning', defaultValue: false, valueConverter: booleanConverter }); let BottomNavigation = class BottomNavigation extends TabNavigationBase { constructor() { super(); this.tabsPosition = TabsPosition.Bottom; this.mIconsCache = {}; this.viewController = MDTabBarControllerImpl.initWithOwner(new WeakRef(this)); } createNativeView() { return this.viewController.view; } initNativeView() { super.initNativeView(); this.mDelegate = BNTabBarControllerDelegateImpl.initWithOwner(new WeakRef(this)); this.mMoreNavigationControllerDelegate = BNNavigationControllerDelegateImpl.initWithOwner(new WeakRef(this)); if (!this.tabStrip) { this.viewController.tabBar.hidden = true; } } disposeNativeView() { this.mDelegate = null; this.mMoreNavigationControllerDelegate = null; super.disposeNativeView(); } onLoaded() { super.onLoaded(); this.setViewControllers(this.items); const selectedIndex = this.selectedIndex; const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content; if (selectedView instanceof Frame) { selectedView._pushInFrameStackRecursive(); } this.viewController.delegate = this.mDelegate; this.onSelectedIndexChanged(selectedIndex, selectedIndex); } onUnloaded() { this.viewController.delegate = null; this.viewController.moreNavigationController.delegate = null; super.onUnloaded(); this.items.forEach((item, i) => { item.unloadView(item.content); }); } // @ts-ignore get ios() { return this.viewController; } layoutNativeView(left, top, right, bottom) { if (this.iosCustomPositioning) { super.layoutNativeView(left, top, right, bottom); } } _setNativeViewFrame(nativeView, frame) { if (this.iosCustomPositioning) { super._setNativeViewFrame(nativeView, frame); } } onSelectedIndexChanged(oldIndex, newIndex) { const items = this.items; if (!items) { return; } if (this.unloadOnTabChange) { const oldItem = items[oldIndex]; if (oldItem) { oldItem.canBeLoaded = false; oldItem.unloadView(oldItem.content); } } const newItem = items[newIndex]; if (newItem && this.isLoaded) { const selectedView = items[newIndex].content; if (selectedView instanceof Frame) { selectedView._pushInFrameStackRecursive(); } newItem.canBeLoaded = true; newItem.loadView(newItem.content); } const tabStripItems = this.tabStrip && this.tabStrip.items; if (tabStripItems) { if (tabStripItems[newIndex]) { tabStripItems[newIndex]._emit(TabStripItem.selectEvent); } if (oldIndex !== newIndex && tabStripItems[oldIndex]) { tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent); } } super.onSelectedIndexChanged(oldIndex, newIndex); } getTabBarBackgroundColor() { return this.viewController.tabBar.barTintColor; } setTabBarBackgroundColor(value) { this.viewController.tabBar.backgroundColor = this.viewController.tabBar.barTintColor = value instanceof Color ? value.ios : value; this.updateAllItemsColors(); } setTabBarItemTitle(tabStripItem, value) { tabStripItem.nativeView.title = value; } setTabBarItemBackgroundColor(tabStripItem, value) { if (!this.tabStrip || !tabStripItem) { return; } updateBackgroundPositions(this.tabStrip, tabStripItem); } setTabBarItemColor(tabStripItem, value) { this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } setItemColors() { if (this.mSelectedItemColor) { this.viewController.tabBar.selectedImageTintColor = this.mSelectedItemColor.ios; } if (this.mUnSelectedItemColor) { this.viewController.tabBar.unselectedItemTintColor = this.mUnSelectedItemColor.ios; } } setIconColor(tabStripItem, forceReload = false) { if (forceReload || (!this.mUnSelectedItemColor && !this.mSelectedItemColor)) { // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style const tabStripColor = this.selectedIndex === tabStripItem.index ? this.mSelectedItemColor : this.mUnSelectedItemColor; const image = this.getIcon(tabStripItem, tabStripColor); tabStripItem.nativeView.image = image; tabStripItem.nativeView.selectedImage = image; } } setTabBarIconColor(tabStripItem, value) { this.setIconColor(tabStripItem); } setTabBarIconSource(tabStripItem, value) { this.updateItemColors(tabStripItem); } setTabBarItemFontInternal(tabStripItem, value) { this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } setTabBarItemTextTransform(tabStripItem, value) { tabStripItem.nativeView.title = getTransformedText(tabStripItem.label.text, value); } getTabBarHighlightColor() { return this.viewController.tabBar.tintColor; } setTabBarHighlightColor(value) { this.viewController.tabBar.tintColor = value instanceof Color ? value.ios : value; } getTabBarSelectedItemColor() { return this.mSelectedItemColor; } setTabBarSelectedItemColor(value) { this.mSelectedItemColor = value; this.updateAllItemsColors(); } getTabBarUnSelectedItemColor() { return this.mUnSelectedItemColor; } setTabBarUnSelectedItemColor(value) { this.mUnSelectedItemColor = value; this.updateAllItemsColors(); } onMeasure(widthMeasureSpec, heightMeasureSpec) { const width = Utils.layout.getMeasureSpecSize(widthMeasureSpec); const widthMode = Utils.layout.getMeasureSpecMode(widthMeasureSpec); const height = Utils.layout.getMeasureSpecSize(heightMeasureSpec); const heightMode = Utils.layout.getMeasureSpecMode(heightMeasureSpec); const widthAndState = View.resolveSizeAndState(width, width, widthMode, 0); const heightAndState = View.resolveSizeAndState(height, height, heightMode, 0); this.setMeasuredDimension(widthAndState, heightAndState); } _onViewControllerShown(viewController) { // This method could be called with the moreNavigationController or its list controller, so we have to check. // TODO // if (Trace.isEnabled()) { // Trace.write("TabView._onViewControllerShown(" + viewController + ");", Trace.categories.Debug); // } if (this.viewController.viewControllers && this.viewController.viewControllers.containsObject(viewController)) { this.selectedIndex = this.viewController.viewControllers.indexOfObject(viewController); } else { // TODO // if (Trace.isEnabled()) { // Trace.write("TabView._onViewControllerShown: viewController is not one of our viewControllers", Trace.categories.Debug); // } } } _handleTwoNavigationBars(backToMoreWillBeVisible) { // TODO // if (Trace.isEnabled()) { // Trace.write(`TabView._handleTwoNavigationBars(backToMoreWillBeVisible: ${backToMoreWillBeVisible})`, Trace.categories.Debug); // } // The "< Back" and "< More" navigation bars should not be visible simultaneously. const page = this.page || this._selectedView.page || this._selectedView.currentPage; if (!page || !page.frame) { return; } const actionBarVisible = page.frame._getNavBarVisible(page); if (backToMoreWillBeVisible && actionBarVisible) { page.frame.ios._disableNavBarAnimation = true; page.actionBarHidden = true; page.frame.ios._disableNavBarAnimation = false; this._actionBarHiddenByTabView = true; // TODO // if (Trace.isEnabled()) { // Trace.write(`TabView hid action bar`, Trace.categories.Debug); // } return; } if (!backToMoreWillBeVisible && this._actionBarHiddenByTabView) { page.frame.ios._disableNavBarAnimation = true; page.actionBarHidden = false; page.frame.ios._disableNavBarAnimation = false; this._actionBarHiddenByTabView = undefined; // TODO // if (Trace.isEnabled()) { // Trace.write(`TabView restored action bar`, Trace.categories.Debug); // } return; } } getViewController(item) { let newController = item.content ? item.content.viewController : null; if (newController) { item.setViewController(newController, newController.view); return newController; } if (item.content.ios instanceof UIViewController) { newController = item.content.ios; item.setViewController(newController, newController.view); } else if (item.content.ios && item.content.ios.controller instanceof UIViewController) { newController = item.content.ios.controller; item.setViewController(newController, newController.view); } else { newController = IOSHelper.UILayoutViewController.initWithOwner(new WeakRef(item.content)); newController.view.addSubview(item.content.nativeViewProtected); item.content.viewController = newController; item.setViewController(newController, item.content.nativeViewProtected); } return newController; } setViewControllers(items) { const length = items ? items.length : 0; if (length === 0) { this.viewController.viewControllers = null; return; } // Limit both tabContentItems and tabStripItems to 5 in order to prevent iOS 'more' button items = items.slice(0, maxTabsCount); const controllers = NSMutableArray.alloc().initWithCapacity(length); if (this.tabStrip) { this.tabStrip.setNativeView(this.viewController.tabBar); } items.forEach((item, i) => { const controller = this.getViewController(item); if (this.tabStrip && this.tabStrip.items && this.tabStrip.items[i]) { const tabStripItem = this.tabStrip.items[i]; const tabBarItem = this.createTabBarItem(tabStripItem, i); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); this.setViewAttributes(tabBarItem, tabStripItem.label); controller.tabBarItem = tabBarItem; tabStripItem.index = i; tabStripItem.setNativeView(tabBarItem); } controllers.addObject(controller); }); this.setItemImages(); this.viewController.viewControllers = controllers; this.viewController.customizableViewControllers = null; // When we set this.viewController.viewControllers, someone is clearing the moreNavigationController.delegate, so we have to reassign it each time here. this.viewController.moreNavigationController.delegate = this.mMoreNavigationControllerDelegate; } setItemImages() { if (this.mSelectedItemColor || this.mUnSelectedItemColor) { if (this.tabStrip && this.tabStrip.items) { this.tabStrip.items.forEach((item) => { if (this.mUnSelectedItemColor && item.nativeView) { item.nativeView.image = this.getIcon(item, this.mUnSelectedItemColor); item.nativeView.tintColor = this.mUnSelectedItemColor; } if (this.mSelectedItemColor && item.nativeView) { item.nativeView.selectedImage = this.getIcon(item, this.mSelectedItemColor); item.nativeView.tintColor = this.mSelectedItemColor; } }); } } } updateAllItemsColors() { this.setItemColors(); if (this.tabStrip && this.tabStrip.items) { this.tabStrip.items.forEach((tabStripItem) => { this.updateItemColors(tabStripItem); }); } } updateItemColors(tabStripItem) { updateBackgroundPositions(this.tabStrip, tabStripItem); this.setIconColor(tabStripItem, true); } createTabBarItem(item, index) { let image; let title; if (item.isLoaded) { image = this.getIcon(item); title = item.label.text; const textTransform = item.label.style.textTransform; if (textTransform) { title = getTransformedText(title, textTransform); } } return UITabBarItem.alloc().initWithTitleImageTag(title, image, index); } getIconRenderingMode() { switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) { case 'alwaysOriginal': return 1 /* UIImageRenderingMode.AlwaysOriginal */; case 'alwaysTemplate': return 2 /* UIImageRenderingMode.AlwaysTemplate */; case 'automatic': default: return 0 /* UIImageRenderingMode.Automatic */; } } getIcon(tabStripItem, color) { // Image and Label children of TabStripItem // take priority over its `iconSource` and `title` properties const iconSource = tabStripItem.image && tabStripItem.image.src; if (!iconSource) { return null; } const target = tabStripItem.image; const font = target.style.fontInternal || Font.default; if (!color) { color = target.style.color; } const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(';'); let isFontIcon = false; let image = this.mIconsCache[iconTag]; if (!image) { let is; if (typeof iconSource === 'string') { if (Utils.isFontIconURI(iconSource)) { isFontIcon = true; const fontIconCode = iconSource.split('//')[1]; const target = tabStripItem.image ? tabStripItem.image : tabStripItem; const font = target.style.fontInternal; if (!color) { color = target.style.color; } is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color); } else { is = ImageSource.fromFileOrResourceSync(iconSource); } } else { is = iconSource; } image = is?.ios; if (image) { image = is.ios; if (this.tabStrip && this.tabStrip.isIconSizeFixed) { image = this.getFixedSizeIcon(image); } let renderingMode = 1 /* UIImageRenderingMode.AlwaysOriginal */; if (!isFontIcon) { renderingMode = this.getIconRenderingMode(); } const originalRenderedImage = image.imageWithRenderingMode(renderingMode); this.mIconsCache[iconTag] = originalRenderedImage; image = originalRenderedImage; } else { // TODO // traceMissingIcon(iconSource); } } return image; } getFixedSizeIcon(image) { const inWidth = image.size.width; const inHeight = image.size.height; const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight }); const widthPts = iconSpecSize.width; const heightPts = iconSpecSize.height; UIGraphicsBeginImageContextWithOptions({ width: widthPts, height: heightPts }, false, Utils.layout.getDisplayDensity()); image.drawInRect(CGRectMake(0, 0, widthPts, heightPts)); const resultImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return resultImage; } // private _updateIOSTabBarColorsAndFonts(): void { // if (!this.tabStrip || !this.tabStrip.items || !this.tabStrip.items.length) { // return; // } // const tabBar = <UITabBar>this.ios.tabBar; // const states = getTitleAttributesForStates(this); // for (let i = 0; i < tabBar.items.count; i++) { // applyStatesToItem(tabBar.items[i], states); // } // } // TODO: Move this to TabStripItem // [fontInternalProperty.getDefault](): Font { // return null; // } // [fontInternalProperty.setNative](value: Font) { // this._updateIOSTabBarColorsAndFonts(); // } [selectedIndexProperty.setNative](value) { // TODO // if (Trace.isEnabled()) { // Trace.write("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", Trace.categories.Debug); // } if (value > -1) { this.viewController._willSelectViewController = this.viewController.viewControllers[value]; this.viewController.selectedIndex = value; } } [itemsProperty.getDefault]() { return null; } [itemsProperty.setNative](value) { if (value) { value.forEach((item, i) => { item.index = i; }); } this.setViewControllers(value); selectedIndexProperty.coerce(this); } [tabStripProperty.getDefault]() { return null; } [tabStripProperty.setNative](value) { this.setViewControllers(this.items); selectedIndexProperty.coerce(this); } setViewAttributes(item, view) { if (!view) { return null; } const defaultTabItemFontSize = 10; const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize; const font = (view.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); const tabItemTextColor = view.style.color; const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; const attributes = { [NSFontAttributeName]: font }; // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style if (!this.mSelectedItemColor && !this.mUnSelectedItemColor) { if (textColor) { attributes[UITextAttributeTextColor] = textColor; attributes[NSForegroundColorAttributeName] = textColor; } } else { this.viewController.tabBar.unselectedItemTintColor = this.mUnSelectedItemColor && this.mUnSelectedItemColor.ios; this.viewController.tabBar.selectedImageTintColor = this.mSelectedItemColor && this.mSelectedItemColor.ios; } item.setTitleTextAttributesForState(attributes, 4 /* UIControlState.Selected */); item.setTitleTextAttributesForState(attributes, 0 /* UIControlState.Normal */); // there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip // https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor // to fix the above issue we are applying the selected fix only for the case, when there is no background set // in that case we have the following known issue: // // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && SDK_VERSION > 9) { this.viewController.tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor]; } } }; BottomNavigation = __decorate([ CSSType('BottomNavigation') ], BottomNavigation); export { BottomNavigation }; iosCustomPositioningProperty.register(BottomNavigation); //# sourceMappingURL=index.ios.js.map