React-Native toolbar on Navigation-Experimental (for both Android and iOS)

NavBar.android.js

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

export default class NavBar extends Component {
  static propTypes = {
    title: React.PropTypes.string,
    onLeftPress: React.PropTypes.func,
    showDrawer: React.PropTypes.bool
  }

  render () {
    const { title, onLeftPress, showDrawer } = this.props
    return (
      <Icon.ToolbarAndroid
        navIconName={showDrawer ? 'md-menu' : 'md-arrow-back'}
        onIconClicked={onLeftPress}
        style={styles.toolbar}
        titleColor={'white'}
        title={title}
      />
    )
  }
}

const styles = StyleSheet.create({
  toolbar: {
    backgroundColor: 'blusteel',
    height: 54,
    position: 'absolute', 
    top: 0, 
    left: 0, 
    width: Dimensions.get('window').width
  }
})

NavBar.ios.js

import React, { Component, PropTypes } from 'react'
import { NavigationExperimental, StyleSheet, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

const { Header } = NavigationExperimental

export default class NavigationHeader extends Component {
  static propTypes = {
    title: PropTypes.string,
    onLeftPress: PropTypes.func,
    showDrawer: PropTypes.bool
  }

  _renderTitleComponent = () => {
    const { title } = this.props
    return (
      <Header.Title textStyle={styles.titleText}>
        {title}
      </Header.Title>
    )
  }

  _renderLeftComponent = () => {
    const { onLeftPress, showDrawer } = this.props
    return (
      <TouchableView onPress={onLeftPress} style={styles.leftButton}>
        <Icon name={showDrawer ? 'ios-menu' : 'ios-arrow-back'} size={18} color={'white'} />
      </TouchableView>
    )
  }

  render () {
    return (
      <Header
        {...this.props}
        style={styles.container}
        renderTitleComponent={this._renderTitleComponent}
        renderLeftComponent={this._renderLeftComponent}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'bluesteel'
  },
  titleText: {
    color: 'white'
  },
  leftButton: {
    padding: 14
  }
})

Preview:

Can be implemented easily in NavigationExperimental renderOverlay:

_renderOverlay = (navigatorProps) => {
    const currentRoute = navigatorProps.navigationState.children[navigatorProps.navigationState.index]
    const { key, title } = currentRoute
    const showDrawer = appRoutes[key].showInDrawer // Your logic here: should the route show the drawer or the back button? (I put all my routes and info in a json called appRoutes for example)
    const onLeftPress = () => {
      if (showDrawer) {
        this.navigationActions.openDrawer() // Your action for handling the drawer button press
      } else {
        this.navigationActions.navigatePop() // Your action for handling the back button press
      }
    }
    return (
      <NavBar
        title={title}
        onLeftPress={onLeftPress}
        showDrawer={showDrawer}
        {...navigatorProps} // !!!important!!! navigator props used in the iOS Toolbar component
      />
    )
  }

@mmazzarolo mind throwing this into an example react-native app?

just a correction, looks like renderOverlay has been removed as a property, the new property to use should be renderHeader. Refer this

In the last days I've read all Reactive Native documentations.
Now I'm totally confused. Am I the only one?

Could someone please provide an integration demo from a root index.js?

By the way, I tried this with react-native-router-flux custom navbar option.
'Dimensions' does not work in my environment. What do I have to have present to get Dimensions?
Please help, I'm a looser, but some day I will do something like this...
https://www.youtube.com/watch?v=i__Hrjg3bEQ

I'm super mad because of Internet confusing UI Bars and thus creates a lot more misusage of this terminology.
https://developer.apple.com/ios/human-interface-guidelines/ui-bars/toolbars/