react-native-navigation/docs/docs/options-migration.md

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'
    }
  }
}

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: {
  transparent: true
}  

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

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 he 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.

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: {
  translucent: true
}

navBarNoBorder

Remove TopBar border (hair line)

topBar: {
  noBorder: true
}  

navBarBlur

Blue the area behind the TopBar, Setting drawBehind: true is required for this property to work as expected.

topBar: {
  blur: 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
}  

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 TopBa’s shadow.

topBar: {
  elevation: 0
}

navBarTitleTextCentered

Title alignment

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

statusBarColor

StatusBar color

statusBar: {
  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
• navigationBarColor
• navBarSubTitleTextCentered
• collapsingToolBarImage
• collapsingToolBarCollapsedColor
• navBarTextFontBold