Steroids UI Components

Steroids UI Components

Config Options Related to the Native UI

Some behaviour and styling is configured in the steroids.config, defined in the config/ file:

  • steroids.config.tabBar
  • steroids.config.statusBar
  • steroids.config.navigationBar
  • steroids.config.theme

Tab bar

The native tab bar needs to be enabled by defining steroids.config.tabBar in config/ By default, the tab bar that is shown on the screen in all views, with each tab pointing to a separate WebView. See the config/ guide for more information. Note that the tab bar is also available on Android, but cannot be shown, hidden or updated programmatically.



Provides methods to temporarily present a view on top of the whole application. Only one modal window can be active at a time.

Modal window shows any steroids.views.* object.



Only one drawer window per edge can be active at a time. Closing the drawer by tapping the original view that opened the drawer does not currently work, use steroids.drawers.hide instead or steroids.drawers.enableGesture where "tap to hide" works.


Deprecated methods

The following methods were deprecated in Steroids.js v3.1.9 in favor of steroids.drawers.update:



Native UI buttons.


Native Transition Animations

Transition animations that can be used with navigation elements are also available to use without actual navigation.