Skip to main content
Version: 7.2.0

BottomTabBar

API Reference: UI.BottomTabBar

BottomTabBar is an UI object. It is used for navigating between pages using tab bar items. Each tab bar item has title, icon and page. If the individual tab has an Icon, icons must be set two types as selected and normal.

danger

On Android side, you can not add more than five tab bar items to bottom tab bar.

Create 3 different page from UI editor named like

  • pgProfile
  • pgMessages
  • pgSettings

and export them from the pages/index.ts file

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
import "@smartface/extension-utils";
import "theme";
import router from "routes";

router.push("/btb");
Custom Icons for iOS

Please check this guideline before choosing your custom TabBarItem ​icons.

Android Tabbar Optimization

To save time by loading Tabbar, you can optionally call the constructor function in advance.

BottomTabbar Badge​

BottomTabBar Badge has a circular or elliptical background, displayed on top-right to the BottomTabBarItem.

import "@smartface/extension-utils";
import "theme";
import router from "routes";

router.push("/btb");

BottomTabBar Font Change​


import { BottomTabBarRouter, NativeStackRouter, Route, NativeRouter } from '@smartface/router';
import Color from '@smartface/native/ui/color';
import * as Pages from 'pages';
import Image from '@smartface/native/ui/image';
import { themeService } from 'theme';
import TabBarItem from '@smartface/native/ui/tabbaritem';
import System from '@smartface/native/device/system';
import AttributedString from '@smartface/native/global/attributedstring';

const tabbarFont = themeService.getNativeStyle('.sf-headerBar').font;

const setBtbItems = () => {
  const BtbItems = [];
  btbItems.forEach((item) => {
    let title = { title: item.title }
    let icon = { icon: Image.createFromFile(`${item.icon}`) }
    let btbItemProperties = { ...title, ...icon };
    
    const btbItem = new TabBarItem(btbItemProperties);

    if (System.OS === System.OSType.ANDROID) {
      btbItem.android.attributedTitle = new AttributedString({
        string: item.title,
        font: tabbarFont
      });
    } else {
      btbItem.ios.font = tabbarFont;
    }
    BtbItems.push(btbItem);
  });

  return BtbItems;
};

const btbItems = [
  {
    title: 'Profiles',
    icon: 'images://profile.png'
  },
  {
    title: 'Messages',
    icon: 'images://messages.png'
  },
  {
    title: 'Settings',
    icon: 'images://settings.png'
  }
];

const bottomTabBarRouter = BottomTabBarRouter.of({
  path: '/btb',
  to: '/btb/tab1/page1',
  homeRoute: 0,
  tabbarParams: () => ({
    ios: { translucent: false },
    itemColor: {
      normal: Color.BLACK,
      selected: Color.WHITE
    },
    backgroundColor: Color.create('#00A1F1')
  }),
  items: setBtbItems(),
  // tab1
  routes: [
    // tab1
    NativeStackRouter.of({
      path: '/btb/tab1',
      to: '/btb/tab1/page1',
      routes: [
        Route.of<Pages.Page1>({
          path: `/btb/tab1/page1`,
          build(router, route) {
            return new Pages.Page1(router, route);
          },
          headerBarParams: () => ({
            visible: true
          })
        })
      ]
    }),
    NativeStackRouter.of({
      path: '/btb/tab2',
      to: '/btb/tab2/page2',
      routes: [
        Route.of<Pages.Page2>({
          path: `/btb/tab1/page2`,
          build(router, route) {
            return new Pages.Page2(router, route);
          },
          headerBarParams: () => ({
            visible: true
          })
        })
      ]
    }),
    NativeStackRouter.of({
      path: '/btb/tab3',
      to: '/btb/tab3/page3',
      routes: [
        Route.of<Pages.Page3>({
          path: `/btb/tab3/page3`,
          build(router, route) {
            return new Pages.Page3(router, route);
          },
          headerBarParams: () => ({
            visible: true
          })
        })
      ]
    })
  ]
});

export default bottomTabBarRouter;


Badge Position On iOS

On iOS, when BottomTabBarItem icon's size is big, badge can be positioned wrong by default. You should call move function for fix this problem.

BottomTabbar Animation On Android

On Android BottomTabbarItems animates when clicked but badge have no animation. In order to have a better experience disableItemAnimation can be used.