Menu

Tab Bar Plugin

The tab bar plugin allows you to add a bar with customizable items and to get notified when an item is selected.

Sample Usage

const tabBar = await TabBarPlugin.init()
tabBar.setColor('#248A8D')

tabBar.setItems([
    {imageUrl: 'file:///rocket.png', selectedImageUrl: 'file:///rocket-alt.png', title: 'Catalogue', id: 'catalogue'},
    {imageUrl: 'file:///image-view.png', selectedImageUrl: 'file:///image-view-alt.png', title: 'Image View', id: 'image view'}
])

tabBar.on('itemSelect', (data) => {
    switch(data.id) {
        case "catalogue":
            layout.setContentView(mainWebView)
            break;

        case "image view":
            layout.setContentView(imageView)
            break;
    }
})

Methods

TabBarPlugin.init() #

Creates and returns an instance of the tab bar plugin that is used to make subsequent method calls.


setItems(items) #

Sets the tab bar's items.

Note: This selects the first tab by default and consequently fires the itemSelect event.


setColor(color, inactiveColor) #

Sets the color of the tab bar's text and icons.

Changing the inactive color on iOS will change the UIAppearance of the UITabBarItem. This needs to be set before tabs are added to the tab bar so it is recommended you set the tab bar color first.


setBackgroundColor(color) #

Sets the tab bar's background tint color.


setOpaque() - (iOS only) #

Sets the tab bar to be opaque.


setTranslucent() - (iOS only) #

Sets the tab bar to be translucent.


showBorder() - (Android only) #

Shows the border on top of tab bar.


hideBorder() - (Android only) #

Hides the border on top of tab bar.


selectItem(itemId) #

Select a given tab bar's item.

Events

itemSelect → { tab } #

Fires when an item is selected.

Note: This will always fire once during setItems(items) when the first tab is selected by default.

Styling

iOS

The TabBarPlugin uses a UITabBar internally to represent the tab items. You can style the UITabBar using the standard appearance proxy approach with one exception: if you want to customize the color of disabled tab bar items you need to use both the appearance proxy to style the disabled item's text as well as set the TabBarPlugin.deselectedIconColor property. deselectedIconColor controls the disabled icon color on all TabBarPlugin tab items across the application.

The best place to set up these styles is in AppDelegate's application:didFinishLaunchingWithOptions:.

For example:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    installAppearanceProxies()
    return true
}

func installAppearanceProxies() {
    // Style tab bar font (for all item states)
    let disabledColor = UIColor.red
    TabBarPlugin.deselectedColor = disabledColor
    UITabBarItem.appearance().setTitleTextAttributes([
        NSFontAttributeName: UIFont(name: "DagnyOT", size: 18.0)!,
        NSForegroundColorAttributeName: disabledColor
    ], for: .normal)

    UITabBarItem.appearance().setTitleTextAttributes([
        NSForegroundColorAttributeName: UIColor(hex: "#248A8D")!
    ], for: .selected)
}