Tabbed Navigation

Tabbed navigation is a special kind of navigation where the user is presented with "tabs" always located at the bottom of the screen. Each tab then corresponds to one screen.

Creating Tabs from designs

When you have imported a design that contains tab bar already, you can use Supernova to analyze its content and properly configure all the properties for you. You do that by selecting tab bar component, right-clicking it and selecting Convert to Tab Bar > Create New Tab Group.

In order to have the tab bar properly created, all items needs to be grouped together. You then convert the top-most group, and Supernova takes care of the rest - creating items out of every subgroup that contains any content. The example above shows how to properly group the content so it gets recognized properly.

You can also notice that after creating the tab bar, only one icon/text remains and the rest is gone.

Tab bar gets automatically created based on the contentTab bar gets automatically created based on the content

Tab bar gets automatically created based on the content

That is because Supernova took the first icon and text and assigned it to the first screen. There are no connected screens to that tab bar just yet, so even in live mode, you'll only see one icon. Let's add another connected screen. You can do that by selecting the tab bar again (this time, on a different screen) and choosing the second option Convert to Tab Bar > Connect to Existing Group > Tab Group 1.

This connects the second screen to the tab bar you created previously. You'll still see just one icon in preview mode - the icon of the current screen. However, when switched to live mode, tab bar will show 2 items, with the second one selected.

📘

Tab Bar Limit

There is a limit of 5 items in the tab bar and you'll not be able to add any more after that. This is to avoid the native behavior where items after the fifth one are added to ... menu on the right.

Creating Tabs without the design

You can also create a tab bar without the design component. In that case, a default tab bar will be created containing only one item with placeholder text. You can do that from navigation map by selecting the screen you wish to embed in tab bar, right-clicking it and selecting embed in tab bar option.

Creating tab bar without a design component. 
You can then add screens to it using the same approach as described aboveCreating tab bar without a design component. 
You can then add screens to it using the same approach as described above

Creating tab bar without a design component.
You can then add screens to it using the same approach as described above

Tab Bar Style

Tab bar style is governed by the tab bar itself. Tab Bars always recolor the items inside to specified set of colors for both texts and images. You can use the following attributes to style the tab bar properly:

  • Item Font - Font of the item texts in all states
  • Text Color - Color of item texts when the screen is not selected
  • Selected Text Color - Color of item texts when the screen is selected
  • Image Color - Color of item icons when the screen is not selected
  • Selected Image Color - Color of item icons when the screen is selected
  • Background Color - Background color of the tab bar

Tab Bar Items

When a screen contains a tab bar, it will have exactly one item that is then used throughout the app. You can configure what will be shown by scrolling down the list of components for that screen and locating bottom tab bar. The bottom tab bar will have exactly one item with following configuration:

  • Text - Text for the current screen
  • Image - Image/Icon for the current screen

Reordering / Removing Tabs

Screens are added in the order of conversion. However, you can reorder them easily by moving them inside the screen selection panel. The tabs are shown from top to bottom where the left-most item corresponds to the top-most screen in the tab bar group.