navbar.js

<NavBar
  left=((routeProps, nextProps) => { return string or component })
  middle={<SomeComponent />}
  right='string'
  otherPropsDoOtherThings
  />

routeDictionary.js

// navbar can be specified per route declaratively in the corresponding routeDictionary
{
  testdrive: {
    Component: Testdrive,
    navbar: {
      left: (routeProps, prevRouteProps) => prevRouteProps.title // can be function of props & routeStack
      left: 'Active Drive' // or string
      left: <SomeComponent /> // or component
      middle: // ... same thing
      right: // ... same thing
      underlay: <UnderlayComponent />
      overlay: <OverlayComponent />
    }
  }
}

// @IMPLEMENTATION this will passed along to the navbar via context too, but it will be standardized and abstracted away in the app navigator

SomeScene.js

// navbar can be imperatively set / overrode via context
// this is a little automagical, but also allows for unlimited flexibility including changing route title within one route (e.g. intentBuilder)

class SomeScene extends Component {
  componentWillMount() {
    this.context.navbar.set({
      left,
      middle,
      right,
      //...
    })
  }
}