NAVIGATION.md

December 1, 2018 ยท View on GitHub

Navigation make it easy to explore and switch between different views.

Example

import * as React from 'react'
import { Navigation, Card } from 'react-router-navigation'

const App = () => (
  <Navigation navBarStyle={{ backgroundColor: 'purple' }} titleStyle={{ color: 'white' }}>
    <Card exact path="/feed" component={require('./Feed')} />
    <Card
      backButtonTintColor="white"
      path="/feed/article/:id"
      component={require('./Article')}
    />
  </Navigation>
)

Options

  • hideNavBar ?boolean whether to display nav bar
  • renderNavBar ?string callback which renders a custom navigation bar
  • navBarStyle ?StyleSheet override style for the navigation bar
  • hideBackButton ?boolean whether to display default back button
  • backButtonTintColor ?string sets the color of the back button
  • backButtonTitle ?string text that appears on back button
  • renderLeftButton ?Function callback which renders a custom left button
  • title ?string string to be displayed in the navigation bar
  • titleStyle ?StyleSheet style override for the title element
  • renderTitle ?Function callback which renders a custom title component
  • renderRightButton ?Function callback which renders a right button
  • ... <NavBar /> props
  • onTransitionStart ?Function function invoked when the card transition animation is about to start
  • onTransitionEnd ?Function function invoked once the card transition animation completes
  • cardStyle ?StyleSheet override style for the card component
  • configureTransition ?Function function which customize animation
  • mode ?string sets the mode configuration. Can be either card (default) or modal
  • gesturesEnabled ?boolean whether you can use gestures to dismiss this screen.

<Card /> props