Skip to main content
Version: Next

options-migration

Common Options#

navBarTextColor#

Title text color

topBar: {
title: {
color: 'red'
}
}

navBarTextFontSize#

Title font size

topBar: {
title: {
fontSize: 18
}
}

navBarTextFontFamily#

Title font

topBar: {
title: {
fontFamily: 'Helvetica'
}
}

navBarBackgroundColor#

TopBar background color

topBar: {
background: {
color: 'red'
}
}

navBarCustomView#

Use a react view as the TopBar's background or use a React view instead of the textual title.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground'
}
},
title: {
component: {
name: 'example.CustomTopBarTitle'
}
}
}

navBarClipToBounds#

Restrict the navbar background color to the navbar, and do not flow behind the status bar.

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
clipToBounds: true
}
},
}

navBarComponentAlignment#

Align the React view used as the title

topBar: {
title: {
component: {
name: 'example.CustomTopBarTitle',
alignment: 'center' | 'fill'
}
}
}

navBarCustomViewInitialProps#

Initial props passed to the React component

topBar: {
background: {
component: {
name: 'example.CustomTopBarBackground',
passProps: {}
}
},
title: {
component: {
name: 'example.CustomTopBarTitle',
passProps: {}
}
}
}

navBarButtonColor#

TopBar button color

topBar: {
rightButtons: [
{
color: 'red'
}
],
leftButtons: [
{
color: 'red'
}
],
backButton: {
color: 'red'
}
}

navBarHidden#

TopBar visibility. When setting visible: false, you probably want to set drawBehind: true as well. Use animate: false to toggle visibility without animation.

topBar: {
visible: false
}

navBarTransparent#

Transparent TopBar. Set drawBehind: true to draw the screen behind the transparent TopBar.

topBar: {
background: {
color: 'transparent'
}
}

drawUnderNavBar#

Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent

topBar: {
drawBehind: true
}

drawUnderTabBar#

Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.

bottomTabs: {
drawBehind: true
}

tabBarHidden#

BottomTabs visibility.

bottomTabs: {
visible: false
}

The BottomTab's visibility can be toggled only on Android using mergeOptions:

Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
visible: false
}
});

On iOS, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to false in the options passed to the push command or via the static options(passProps) {} api.

statusBarHidden#

StatusBar visibility. For android, also set drawBehind: true.

statusBar: {
visible: false
}

statusBarTextColorScheme#

Theme of text and icons displayed in the StatusBar

statusBar: {
style: 'light' | 'dark'
}

navBarSubtitleColor#

Subtitle color

topBar: {
subtitle: {
color: 'red'
}
}

navBarSubtitleFontFamily#

Subtitle font

topBar: {
subtitle: {
fontFamily: 'Helvetica'
}
}

navBarSubtitleFontSize#

Subtitle font size

topBar: {
subtitle: {
fontSize: 14
}
}

screenBackgroundColor#

Screen color, visible before the actual React view is rendered

layout: {
backgroundColor: 'red'
}

orientation#

layout: {
orientation: ['portrait', 'landscape'] // An array of supported orientations
}

disabledButtonColor#

Button color when enabled: false is used

topBar: {
rightButtons: [
{
disabledColor: 'grey'
}
]
}

navBarButtonFontSize#

Button font size

topBar: {
rightButtons: [
{
fontSize: 13
}
],
leftButtons: [
{
fontSize: 13
}
]
}

navBarLeftButtonFontSize#

Left button font size

{
topBar: {
leftButtons: [
{
fontSize: 13
}
]
}
}

navBarLeftButtonColor#

Left button color

{
topBar: {
leftButtons: [
{
color: 'red'
}
]
}
}

navBarLeftButtonFontWeight#

Left button font weight

{
topBar: {
leftButtons: [
{
weight: '300'
}
]
}
}

navBarRightButtonFontSize#

Right button font size

topBar: {
leftButtons: [
{
fontSize: 13
}
]
}

navBarRightButtonColor#

Right button color

topBar: {
rightButtons: [
{
color: 'red'
}
]
}

navBarRightButtonFontWeight#

Right button font weight

topBar: {
rightButtons: [
{
weight: '400'
}
]
}

modalPresentationStyle#

Controls the behavior of screens displayed modally.

Options supported on iOS#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • formSheet - Content is centered in the screen
  • pageSheet -Content partially covers the underlying content
  • overFullScreen - Content covers the screen, without detaching previous content.
  • fullScreen - Content covers the screen, previous content is detached.
  • popover - Content is displayed in a popover view.

More information on the different styles for iOS can be found on https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

Options supported on Android#

  • overCurrentContext - Content is displayed over the previous screen. Useful for transparent modals
  • none - Previous content is detached when the Modal's show animation ends
{
modalPresentationStyle: 'overCurrentContext'
}

navBarButtonFontFamily#

Button font family

topBar: {
rightButtons: [
{
fontFamily: 'Helvetica'
}
]
}

iOS only#

navBarHideOnScroll#

Hide TopBar when list is scrolled

topBar: {
hideOnScroll: true
}

navBarTranslucent#

Translucent TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
translucent: true
}
}

navBarNoBorder#

Remove TopBar border (hair line)

topBar: {
noBorder: true
}

navBarBlur#

Blur the area behind the TopBar, Setting drawBehind: true and topBar background transparent: true is required for this property to work as expected.

topBar: {
drawBehind: true,
background: {
blur: true,
transparent: true
}
}

rootBackgroundImageName#

  • iOS: name of image in Images.xcassets
  • Android: name of drawable
{
rootBackgroundImage: require('rootBackground.png')
}

screenBackgroundImageName#

name of image in Images.xcassets

{
backgroundImage: require('background.png')
}

statusBarHideWithNavBar#

Hide the StatusBar if the TopBar is also hidden

statusBar: {
hideWithTopBar: true
}

statusBarBlur#

Blur the area behind the StatusBar

statusBar: {
blur: true
}

statusBarAnimate#

Animate between style changes of the StatusBar

statusBar: {
animate: true
}

disabledBackGesture#

Disable the back (swipe) gesture used to pop screens

{
popGesture: false
}

largeTitle#

Use iOS 11 large title

topBar: {
largeTitle: {
visible: true,
fontSize: 30,
color: 'red',
fontFamily: 'Helvetica'
}
}

Android Options#

topBarElevationShadowEnabled#

TopBar elevation in dp. Set this value to 0 to disable the TopBar's shadow.

topBar: {
elevation: 0
}

navBarTitleTextCentered#

Title alignment

topBar: {
title: {
alignment: 'center'|'fill'
}
}

statusBarColor#

StatusBar color

statusBar: {
backgroundColor: 'red'
}

navigationBarColor#

NavigationBar color

navigationBar: {
backgroundColor: 'red'
}

drawUnderStatusBar#

Draw content behind the StatusBar

statusBar: {
drawBehind: true
}

navBarHeight#

TopBar height in dp

topBar: {
height: 70
}

navBarTopPadding#

Content top margin

layout: {
topMargin: 26
}

topTabsHeight#

TopTabs height

topTabs: {
height: 70
}

topBarBorderColor#

TopBar border color

topBar: {
borderColor: 'red'
}

topBarBorderWidth#

TopBar border height

topBar: {
borderHeight: 1.3
}

Unsupported options#

  • disabledSimultaneousGesture
  • statusBarTextColorSchemeSingleScreen
  • navBarButtonFontWeight
  • topBarShadowColor
  • topBarShadowOpacity
  • topBarShadowOffset
  • topBarShadowRadius
  • preferredContentSize
  • navBarSubTitleTextCentered
  • collapsingToolBarImage
  • collapsingToolBarCollapsedColor
  • navBarTextFontBold
Edit this page