main.coffee

'use strict'

React = require('react-native')
NavigationBarRouteMapper = require('../modules/navigation_bar_route_mapper')
_ = require('lodash')

pages =
  Incidents: Incidents
  Notifications: Notifications

{ StyleSheet, Text, View, Navigator, TouchableOpacity } = React

Main = React.createClass(
  render: ->
    <View>
      <Navigator
        ref="nav"
        renderScene={@renderScene}
        initialRoute={@renderContent()}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
            style={styles.navBar}
          />
        }
        configureScene={ (route) ->
          if route.sceneConfig
            route.sceneConfig
          else
            _.assign {}, Navigator.SceneConfigs.HorizontalSwipeJump, gestures: {}
        }
      />
    </View>

  renderScene: (route, navigator) ->
    Component = route.component

    <View style={styles.container}>
      <Component navigator={navigator} route={route} />
    </View>

  renderContent: ->
    component: Movies
    title: "Movies"
    leftButton: "Back:
    leftButtonAction: @openSideMenu
)

styles = StyleSheet.create(
  container:
    flex: 1
  navBar:
    backgroundColor: "#0069d5"
  menu:
    height: 22
    width: 22
    color: 'white')

module.exports = Main

navigation_bar_route_mapper.coffee

React = require('react-native')
Icon = require('react-native-vector-icons/Ionicons')
textElements = require('../styles/text_elements')
{ StyleSheet, Text, View, Navigator, TouchableOpacity } = React

NavigationBarRouteMapper =
  LeftButton: (route, navigator, index, navState) ->
    return if index == 0 && !route.leftTitle && !route.leftButton
    previousRoute = navState.routeStack[index - 1]
    backButton = route.leftButton || previousRoute && <Icon style={styles.backChevron} name='chevron-left' size=22 />

    <TouchableOpacity
      onPress={() => (try route.leftButtonAction()) || navigator.pop()}
      style={styles.navBarLeftButton}>
      <View style={styles.leftButtonHolder}>
        {backButton}
        <Text style={[textElements.mediumText, styles.navBarText, NavigationBarRouteMapper.backTextStyle(backButton)]}>
          {route.leftTitle || (try previousRoute.title)}
        </Text>
      </View>
    </TouchableOpacity>

  RightButton: (route, navigator, index, navState) ->
    return unless route.rightTitle || route.rightButton
    <TouchableOpacity
      onPress={() => console.log("go right")}
      style={styles.navBarRightButton}>
      <Text style={[textElements.mediumText, styles.navBarText]}>
        Next
      </Text>
    </TouchableOpacity>

  Title: (route, navigator, index, navState) ->
    <Text style={[textElements.mediumText, styles.navBarText, styles.navBarTitleText]}>{route.title}</Text>

  backTextStyle: (backButton) -> styles.textWithBackButton if backButton

styles = StyleSheet.create(
  navBarText:
    color: 'white'
    height: 17
  navBarTitleText:
    marginTop: 12
  leftButtonHolder:
    flexDirection: 'row'
    alignItems: 'center'
    marginTop: 9
    marginLeft: 10
  backChevron:
    color: 'white'
  textWithBackButton:
    marginTop: 3
    marginLeft: 5)

module.exports = NavigationBarRouteMapper