Tabris.js Widgets: NavigationBar

The NavigationBar is only found on Android. It is located along the bottom of the screen and consists of a back button, a circular “go to home” screen button, and a square that displays your recently used apps. Though it is created by the operating system, when your app is in the foreground, it has some control over how this navigation bar appears.

You can choose to hide the NavigationBar within your app though it will still be available if the user swipes up from the bottom of the screen.

There is only ever one instance of the NavigationBar, which we can access through the NavigationBar variable.

Other displayModes are ‘float’, which allows content under the NavigationBar, and ‘default’, that positions content above but not underneath it. There is a corresponding event listener that fires whenever this displayMode property changes.

The other major way your app can manipulate the NavigationBar is by changing its background. For a red background:

Here too, there is a corresponding event that fires when the user changes the background property value. The handler function has access to the new NavigationBar background color:

The third configurable property is navigationBar.theme, which can be set to ‘dark’, ‘default’, or ‘light’. This sets the icons themselves to a light or dark color. The ‘default’ setting depends on app or OS configuration.

A change event onThemeChanged fires when the user changes the theme property value. However, both the theme property and change event are only supported by Android 8 or above.

The NavigationBar’s height can also be accessed through its height property:

This is a read-only property, so while it can be useful in positioning content around the NavigationBar, it cannot be changed.

Read more about the NavigationBar in the Tabris docs.

Or download the Tabris Developer App and run the NavigationBar snippet in the Tabris Playground.