Top Bar Options

TopBar

const options = {

topBar: {

animate: true,

title: {},

subtitle: {},

backButton: {},

background: {}

}

};

visible

Determines if TopBar is visible or not.

Type	Required	Platform
boolean	No	Both

animate

Determines if changing the TopBar visibility will be animated or not.

Type	Required	Platform
boolean	No	Both

title

Controls the top bar title.

Type	Required	Platform
Title	No	Both

subtitle

Controls the top bar subtitle.

Type	Required	Platform
Subitle	No	Both

backButton

Controls the top bar back button.

Type	Required	Platform
BackButton	No	Both

background

Controls the top bar background.

Type	Required	Platform
Background	No	Both

scrollEdgeAppearance

Controls the appearance settings when the scrollable content reaches the matching edge of the navigation bar.

Type	Required	Platform
Scroll Edge Background	No	iOS 13+

barStyle

Control the TopBar blur style. Requires translucent: true.

Type	Required	Platform
enum('default','black')	No	iOS

borderColor

Change the topBar border color.

Type	Required	Platform
Color	No	Both

borderHeight

Set the border height of the navbar in dp.

Type	Required	Platform
number	No	Android

drawBehind

Controls if child should be drawn behind the TopBar or below it.

Type	Required	Platform
boolean	No	Both

elevation

Set the elevation of the TopBar in dp. This option changes how the shadow under the TopBar looks. Setting this value to 0 will remove the shadow completely.

Type	Required	Platform
number	No	Android

hideOnScroll

Hide the TopBar when a scrolling layout is scrolled.

Type	Required	Platform
boolean	No	Both

Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

hideNavBarOnFocusSearchBar

Indicates whether the navigation bar should be hidden when searching. True by default.

Type	Required	Platform
boolean	No	iOS 11+

leftButtons

An array of buttons to be displayed at the right-side of the TopBar. Button layout is from left to right. See the Buttons section for more details.

Android support

Android currently only supports a single left button and does not support custom left Buttons.

Type	Required	Platform
[Button]	No	Both

leftButtonColor

Default color for left buttons.

Type	Required	Platform
Color	No	Both

noBorder

Disables border at the bottom of the TopBar.

Type	Required	Platform
boolean	No	iOS

rightButtons

An array of buttons to be displayed at the right side of the TopBar. Button layout is from right to left. See the Buttons section for more details.

Type	Required	Platform
[Button]	No	Both

rightButtonColor

Default color for the right button.

Type	Required	Platform
Color	No	Both

searchBar

Controls the SearchBar.

Type	Required	Platform
OptionsSearchBar	No	iOS 11+

Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarHiddenWhenScrolling

Hides the UISearchBar when scrolling.

Type	Required	Platform
boolean	No	iOS 11+

Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarPlaceholder

The placeholder value in the UISearchBar.

Type	Required	Platform
string	No	iOS 11+

Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarBackgroundColor

The background color of the UISearchBar's TextField.

Type	Required	Platform
Color	No	iOS 13+

Deprecation warning

This option is currently deprecated and will be removed in a future release. Please use the OptionsSearchBar option instead.

searchBarTintColor

The tint color of the UISearchBar. Affects text selection color, as well as "Cancel" button color.

Type	Required	Platform
Color	No	iOS 13+