[
  {
    "path": ".gitignore",
    "content": "lib-cov\n*.seed\n*.log\n*.csv\n*.dat\n*.out\n*.pid\n*.gz\nconfig.js\n\npids\nlogs\nresults\npublic\n\nnpm-debug.log\n.DS_Store\n\nnode_modules\nACCOUNTS\nPods\n\n.env"
  },
  {
    "path": ".npmignore",
    "content": ".*.swp\n._*\n.DS_Store\n.git\n.hg\n.lock-wscript\n.svn\n.wafpickle-*\nCVS\nnpm-debug.log\nnode_modules\nexample/node_modules"
  },
  {
    "path": "README.md",
    "content": "react-native-custom-navigation\n===================\nThe goal is making a easy navigation router for react-native, you could plug-in different navigation-bar in each view stack, and update navigation-bar background style at any time. The router would provide your navigation-bar a smooth transition animation when push, pop or swipe-back gesture is activating.\n\nInspired by [react-native-router](https://github.com/t4t5/react-native-router)\n\nCase 1:\nDifferent view stack using different navgation bar\n\n![Example](https://www.dropbox.com/s/3jqguw37buhagu4/demo.gif?dl=1)\n\n\nCase 2:\nUsing singleton navigation bar for all views\n\n![Example](https://www.dropbox.com/s/ik6i3x6m2bgirh5/demo2.gif?dl=1)\n\n\n\nInstall\n-------\n\nIn your React Native project directory and run:\n\n```npm install react-native-custom-navigation --save```\n\n\n\nDemo\n-------\n\nIn node_modules/react-native-custom-navigation/example directory and run:\n\n```npm install```\n\nIn ```index.ios.js```, 2 demos are ready for you.\n\n\n```javascript\nvar React = require('react-native');\nvar Demo1 = require('./demo1');\nvar Demo2 = require('./demo2');\n\nvar {\n  AppRegistry,\n} = React;\n\nAppRegistry.registerComponent('ReactTest', () => Demo1);\n```\n\nUpdate\n-------\n0.2.1:\n- Not specifying react-native as dependency in package.json\n- Demo using react-native 0.11\n\n0.2.0:\n- You can pass initial props to your navbar component by\nsetting **`navbarPassProps`** when pushing a route object.\n- You can update current navbar props in current view module by calling **`this.props.updateNavbarProps`**.\n- Access the passing props in your navbar module by **`this.props.xxx`**,\n- Handle the passing props in **`componentWillMound`** or **`componentWillReceiveProps`** to render navbar UI.\n- The usage of these features can be found in the example that had been updated.\n\n\nBasic Usage\n-------\n\n```javascript\nvar Router = require('react-native-custom-navigation');\n```\n\nYour route object should contain component object for the page to render.\nI would like setting a back-button component for each view stack, also you can pass this and manage the back-button by your navigation-bar.\n\n```javascript\n\nvar BackButton = React.createClass({\n  render() {\n    return (\n      <Text style={{\n          alignSelf: 'center',\n          textAlign: 'center',\n          fontSize: 16,\n          color: '#fff',\n        }}>Back</Text>)\n  }\n});\n\nvar route = {\n  component: FirstView,\n  backButton:\n  title: 'Root',\n  titleStyle: {\n    color: '#ddd',\n    fontSize: 22\n  }\n}\n\nvar RootController = React.createClass({\n  render() {\n    return (\n      <Router\n        backButtonComponent={BackButton}\n        initialRoute=route/>);\n  }\n});\n\nAppRegistry.registerComponent('ReactTest', () => RootController);\n```\n\nHere we go.\nNow we got a scrollView here, we can have fade-in navbar-background when we scrolling down.\n\n```javascript\nvar FirstView = React.createClass({\n\trender() {\n\t\treturn (\n      <ScrollView\n        scrollEventThrottle={16}\n        onScroll={this._handleScroll}>\n        <TouchableHighlight\n          onPress={this._push}>\n          <View style={styles.buttonView}>\n            <Text style={styles.buttonText}>Push with custom navbar</Text>\n          </View>\n        </TouchableHighlight>\n      </ScrollView>\n\t\t)\n\t},\n\n  _handleScroll(e) {\n    var alpha = (e.nativeEvent.contentInset.top + e.nativeEvent.contentOffset.y) / 200;\n    if (alpha < 0) alpha = 0;\n    if (alpha > 1) alpha = 1;\n\n    var style = {backgroundColor: 'rgba(102, 106, 136, ' + alpha +')'};\n    this.props.route.updateNavbarStyle(style);\n  }\n\n  _push() {\n    var navbarContent = (\n          <CustomNavbar\n            style={{backgroundColor: color}}/>);\n\n    this.props.route.push({\n      component: FirstView,\n      title: 'title would never show',\n      navbarComponent: navbarContent\n    });\n  },\n});\n```\n\nYou can then navigate further to a new component by calling\n```javascript\nthis.props.route.push()\n```\n\nYou can set \"navbarComponent\" as navigation-bar in next route object.\nIf you want still have the fade-in effect, make sure the background color of your \"navbarComponent\" is transparent.\n\n\nConfigurations\n--------------\nThe **`<Router />`** object used to initialize the navigation can take the following props:\n- `initialRoute` (required)\n- `backButtonComponent`\n- `navbarComponent`: Set the component as the singleton navbar for all views.\n- `navbarPassProps`: Send initial props to your singleton navbar, access it by `this.props.xxx`\n\nThe **`this.props.route.push()`** callback prop takes one parameter (a JavaScript object) which can have the following keys:\n- `title`\n- `titleStyle`\n- `component` (required) The next view component\n- `navbarComponent`: Set the component as the navbar in this route\n- `passProps`: Send object data to your view component. access the data by `this.props.xxx`\n- `navbarPassProps`: Send initial data to your navbar, access it by `this.props.xxx`\n\nThe **`navbarComponent` and `component`** access route parameter or function by ***`this.props.route`*** which have the following keys:\n- `index`\n- `previousIndex`(for singleton navbar only)\n- `progress`(for singleton navbar only): current transition animation progress (0 - 1)\n- ~~`updateNavbarStyle`(view component only)~~\n- `push`\n- `pop`\n- `popToTop`\n\n~~The **`this.props.route.updateNavbarStyle()`** callback prop takes style object which update the style of navbar background~~\n\n**`this.props.route.updateNavbarStyle`** this function had been abandoned, replace with **`this.props.updateBarBackgroundStyle()`** .\n\n\nTodos\n-------\n\n- Less and clear code\n- Make transition animation looks naturally when using singleton navbar and stack navbar at same time.\n\nQuestions?\n---------\nfeel free to [follow me on Twitter](https://twitter.com/eatdami)"
  },
  {
    "path": "components/NavBarContainer.js",
    "content": "'use strict';\n\nvar React = require('react-native');\n\nvar NavBarContent = require('./NavBarContent').NavBarContent;\nvar NavbarBackground = require('./NavBarContent').NavbarBackground;\nvar StaticNavBarContent = require('./StaticNavBarContent');\n\nvar {\n  StyleSheet,\n  View\n} = React;\n\nvar NavBarContainer = React.createClass({\n\n  getInitialState: function() {\n    return {};\n  },\n\n  componentWillReceiveProps: function(newProps) {\n    if (!this.props.currentRoute || (this.props.currentRoute.index === null)) {\n      newProps.currentRoute.index = 0;\n    }\n\n    if (newProps.currentRoute === this.props.currentRoute) {\n      return;\n    }\n\n    this.setState({\n      previousRoute: this.props.currentRoute,\n      currentRoute: newProps.currentRoute\n    });\n  },\n\n  _goBack: function() {\n    this.props.onBack(this.props.navigator);\n  },\n\n  _goForward: function(route) {\n    this.props.onForward(route, this.props.navigator);\n  },\n\n  _goFirst: function() {\n    this.props.onFirst(this.props.navigator);\n  },\n\n  _onAnimationChange: function(progress, fromIndex, toIndex) {\n    this.setState({\n      progress: progress\n    });\n  },\n\n  onAnimationStart: function(fromIndex, toIndex) {\n    var routeStack = this.props.navState.routeStack;\n    var fromRoute = routeStack.length > fromIndex ? routeStack[fromIndex] : null;\n    var toRoute = routeStack.length > toIndex ? routeStack[toIndex] : null;\n    this.state = {\n      previousRoute: fromRoute,\n      currentRoute: toRoute,\n    };\n  },\n\n  onAnimationEnd: function() {\n\n  },\n\n  updateProgress: function(progress, fromIndex, toIndex) {\n    this._onAnimationChange(progress, fromIndex, toIndex);\n  },\n\n  // We render both the current and the previous navbar (for animation)\n  render: function() {\n\n    var currentProps = {\n      progress:this.state.progress,\n      route:this.state.currentRoute,\n    };\n\n    var previousProps = {\n      progress:this.state.progress,\n      route:this.state.previousRoute,\n      willDisappear:true\n    };\n\n    var navigatorProps = {\n      goForward: this._goForward,\n      goBack: this._goBack,\n      goFirst: this._goFirst\n    };\n\n    var previousContent, currentContent;\n    var previousBackground, currentBackground;\n    if (this.state.previousRoute) {\n      previousBackground = (\n        <NavbarBackground\n          {...previousProps}\n          style={styles.background}/>);\n\n      currentBackground = (\n        <NavbarBackground\n          {...currentProps}\n          style={styles.background}/>);\n\n      currentContent = (\n        <NavBarContent\n          {...currentProps}\n          {...navigatorProps}\n          direction={this.state.currentRoute.index - this.state.previousRoute.index}\n          backButtonComponent={this.props.backButtonComponent}/>);\n\n      previousContent = (\n        <NavBarContent\n          {...previousProps}\n          {...navigatorProps}\n          direction={this.state.currentRoute.index - this.state.previousRoute.index}\n          backButtonComponent={this.props.backButtonComponent}/>);\n\n    } else if (this.state.currentRoute){\n      currentBackground = (\n        <NavbarBackground\n          {...currentProps}\n          style={styles.background}/>);\n\n      currentContent = (\n        <NavBarContent\n          {...currentProps}\n          {...navigatorProps}\n          direction={0}\n          backButtonComponent={this.props.backButtonComponent}/>);\n    }\n\n    var staticContent;\n    if (this.props.navbarComponent) {\n      staticContent = (\n        <StaticNavBarContent\n          previousRoute={this.state.previousRoute}\n          currentRoute={this.state.currentRoute}\n          progress={this.state.progress}\n          navbarComponent={this.props.navbarComponent}\n          navbarPassProps={this.props.navbarPassProps}\n          {...navigatorProps}/>\n        )\n    }\n\n    // Using createFragment to prevent 'Each child in an array should have a unique \"key\" prop.'\n    // warning message\n    var navbarContents = React.addons.createFragment({\n      \"staticContent\": staticContent,\n      \"previousCountent\" : previousContent,\n      \"currentContent\":currentContent\n    });\n\n    return (\n      <View style={[styles.navbarContainer, this.props.style]}>\n        {previousBackground}\n        {currentBackground}\n        {navbarContents}\n      </View>\n    )\n  }\n});\n\n\nvar styles = StyleSheet.create({\n  navbar: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    height: 64,\n    justifyContent: 'center',\n    flexDirection: 'row',\n  },\n\n  background: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height: 64,\n  },\n\n  navbarContainer: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height: 64,\n    backgroundColor: 'rgba(0,0,0,0)'\n  }\n});\n\n\nmodule.exports = NavBarContainer;\n"
  },
  {
    "path": "components/NavBarContent.js",
    "content": "'use strict';\n\nvar React = require('react-native');\nvar TimerMixin = require('react-timer-mixin');\n\nvar {\n  StyleSheet,\n  Text,\n  View,\n  TouchableHighlight,\n  Dimensions,\n} = React;\n\nvar NavbarBackground = React.createClass({\n  mixins: [TimerMixin],\n\n  getInitialState: function() {\n    return {};\n  },\n\n  _initState: function(fadeIn) {\n    var state = {};\n    state.opacityStart = fadeIn ? 0 : 1;\n    state.opacityEnd = fadeIn ? 1 : 0;\n    state.progress = 0;\n    this.state = state;\n  },\n\n  componentWillMount: function() {\n    this.props.route.updateBarBackgroundStyle = this._updateBarBackgroundStyle;\n    this._initState(false);\n  },\n\n  componentWillReceiveProps: function(newProps) {\n    if (newProps.route !== this.props.route) {\n      this._initState(!this.props.willDisappear);\n      if (!this.props.willDisappear) {\n        newProps.route.updateBarBackgroundStyle = this._updateBarBackgroundStyle;\n      }\n    }\n\n    this.state.progress = newProps.progress;\n  },\n\n  _updateBarBackgroundStyle: function(style) {\n    this.props.route.barBackgroundStyle = style;\n    this.setTimeout(this.forceUpdate, 0);\n  },\n\n  render() {\n    var opacity = (this.state.opacityEnd - this.state.opacityStart) * this.state.progress + this.state.opacityStart;\n    var transitionStyle = {\n      opacity: opacity,\n    };\n\n    return (\n      <View style={[this.props.style, transitionStyle, this.props.route.barBackgroundStyle]} />\n    );\n  }\n});\n\nvar screen = Dimensions.get('window');\nvar NavBarContent = React.createClass({\n  mixins: [TimerMixin],\n\n  getInitialState: function() {\n    return {};\n  },\n\n  _initState: function(direction, fadeIn) {\n    var state = {};\n    state.opacityStart = fadeIn ? 0 : 1;\n    state.opacityEnd = fadeIn ? 1 : 0;\n\n    if (direction > 0) {\n      state.leftStart = fadeIn ? screen.width : 0;\n      state.leftEnd = fadeIn ? 0 : -screen.width;\n    } else if (direction < 0) {\n      state.leftStart = fadeIn ? -screen.width : 0;\n      state.leftEnd = fadeIn ? 0: screen.width;\n    } else {\n      //todo replace\n    }\n    this.state = state;\n  },\n\n  componentWillMount: function() {\n    this._initState(1, false);\n    this.props.route.updateNavbarProps = this._updateNavbarProps;\n  },\n\n  componentWillReceiveProps: function(newProps) {\n    if (this.props.route !== newProps.route) {\n      this._initState(newProps.direction, !this.props.willDisappear);\n      if (!newProps.willDisappear) {\n        newProps.route.updateNavbarProps = this._updateNavbarProps;\n      }\n    }\n  },\n\n  _updateNavbarProps: function(props) {\n    this.props.route.navbarProps = props;\n    this.setTimeout(this.forceUpdate, 0);\n  },\n\n  render() {\n    var left = (this.state.leftEnd - this.state.leftStart) * this.props.progress + this.state.leftStart;\n    var opacity = (this.state.opacityEnd - this.state.opacityStart) * this.props.progress + this.state.opacityStart;\n\n    var transitionStyle = {\n      position: 'absolute',\n      opacity: opacity,\n      left: left\n    };\n\n    var mainContent;\n    if (this.props.route.navbarComponent) {\n      var navbarProps = this.props.route.navbarProps ? this.props.route.navbarProps : this.props.route.navbarPassProps\n      var NavbarComponent = this.props.route.navbarComponent;\n      mainContent = (\n        <NavbarComponent\n          route={{\n            index: this.props.route.index,\n            push: this.props.goForward,\n            pop: this.props.goBack,\n            popToTop: this.props.goFirst\n          }}\n          {...navbarProps}/>\n        );\n    } else {\n      var leftCorner;\n      var leftCornerContent;\n      var BackButton = this.props.backButtonComponent\n\n      if (this.props.route.index > 0 && BackButton) {\n        leftCornerContent = (\n          <TouchableHighlight onPress={this.props.goBack} underlayColor=\"transparent\">\n            <View style={styles.backView}>\n              <BackButton />\n            </View>\n          </TouchableHighlight>);\n      }\n\n      leftCorner = (\n        <View\n          key='nav-back'\n          style={[styles.corner, styles.alignLeft]}>\n          {leftCornerContent}\n        </View>\n      );\n\n      mainContent = [leftCorner];\n        if (this.props.route.title) {\n          mainContent.push(\n            <Text\n              key='nav-title'\n              style={[styles.title, this.props.route.titleStyle]}\n              numberOfLines={1}>{this.props.route.title}</Text>\n        );\n      }\n    }\n\n    return (\n      <View style={[styles.navbar, transitionStyle]}>\n        {mainContent}\n      </View>\n    );\n  }\n});\n\n\nvar styles = StyleSheet.create({\n  navbar: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    height: 64,\n    justifyContent: 'center',\n    flexDirection: 'row',\n  },\n\n  corner: {\n    flex: 1,\n    left:0,\n    top: 18,\n    position: 'absolute',\n    justifyContent: 'center',\n  },\n\n  alignLeft: {\n    alignItems: 'flex-start'\n  },\n\n  title: {\n    position: 'absolute',\n    width: screen.width - 100,\n    top: 28,\n    left: 50,\n    fontSize: 18,\n    color: '#fff',\n    textAlign: 'center',\n  },\n\n  backView: {\n    width: 44,\n    height: 44,\n    justifyContent: 'center',\n  }\n});\n\n\nmodule.exports = {\n  NavBarContent: NavBarContent,\n  NavbarBackground: NavbarBackground,\n};\n"
  },
  {
    "path": "components/StaticNavBarContent.js",
    "content": "'use strict';\n\nvar React = require('react-native');\nvar TimerMixin = require('react-timer-mixin');\n\nvar {\n  StyleSheet,\n  Text,\n  View,\n  TouchableHighlight\n} = React;\n\nvar StaticNavBarContent = React.createClass({\n  mixins: [TimerMixin],\n\n  getInitialState() {\n    return {\n      navbarProps: this.props.navbarPassProps\n    };\n  },\n\n  componentWillMount() {\n    this.props.currentRoute &&\n      (this.props.currentRoute.updateStaticNavbarProps = this._updateNavbarProps)\n  },\n\n  componentWillReceiveProps(newProps) {\n    if (this.props.currentRoute !== newProps.currentRoute) {\n      newProps.currentRoute.updateStaticNavbarProps = this._updateNavbarProps;\n    };\n  },\n\n  render() {\n    var previousIndex = this.props.previousRoute ? this.props.previousRoute.index : null;\n    var index = this.props.currentRoute ? this.props.currentRoute.index : null;\n\n    return (\n      <View style={styles.navbar}>\n        <this.props.navbarComponent\n          route={{\n            progress: this.props.progress,\n            previousIndex: previousIndex,\n            index: index,\n            push: this.props.goForward,\n            pop: this.props.goBack,\n            popToTop: this.props.goFirst\n          }}\n          {...this.state.navbarProps}/>\n      </View>\n      );\n  },\n\n  _updateNavbarProps(props) {\n    this.setTimeout(\n      () => {\n        this.setState({\n          navbarProps: props\n        });\n      },\n      0\n    );\n  }\n});\n\nvar styles = StyleSheet.create({\n  navbar: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    height: 64,\n    justifyContent: 'center',\n    flexDirection: 'row',\n  },\n});\n\nmodule.exports = StaticNavBarContent;"
  },
  {
    "path": "example/demo1.js",
    "content": "var React = require('react-native');\nvar {\n\tImage,\n\tView,\n  ScrollView,\n\tStyleSheet,\n  Text,\n  TouchableHighlight\n} = React;\n\nvar Router = require('react-native-custom-navigation');\n\nvar navbarColors = [\n  '#acc7bf',\n  '#5e5f67',\n  '#c37070',\n  '#eae160',\n  '#bf7aa3',\n  '#b7d967'\n];\n\nvar NavbarContent = require('./navbar');\nvar screen = require('Dimensions').get('window');\n\nvar BackButton = React.createClass({\n  render() {\n    return (\n        <Text style={{\n            alignSelf: 'center',\n            textAlign: 'center',\n            fontSize: 16,\n            color: '#fff',\n          }}>Back</Text>)\n  }\n});\n\nvar RootController = React.createClass({\n  render() {\n    return (\n      <Router\n        backButtonComponent={BackButton}\n        initialRoute={{\n          component: DemoView,\n          title: 'Root',\n          titleStyle: {\n            color: '#ddd',\n            fontSize: 22\n          },\n        }}/>);\n  }\n});\n\nvar NavbarWrapper = React.createClass({\n  getInitialState() {\n    return {};\n  },\n\n  componentWillMount() {\n    this.setState({\n      style: this.props.style\n    });\n  },\n\n  componentWillReceiveProps(newProps) {\n    if (newProps.style !== this.props.style) {\n      this.setState({\n        style: newProps.style\n      });\n    }\n  },\n\n  render() {\n    return (\n      <NavbarContent\n        goFoward = {this._push}\n        goBack = {this.props.route.pop}\n        style={this.state.style}/>);\n  },\n\n  _push() {\n    var colorIndex = this.props.route.index % navbarColors.length;\n    var color = navbarColors[colorIndex];\n\n    this.props.route.push({\n      component: DemoView,\n      navbarComponent: NavbarWrapper,\n      navbarPassProps: {\n        style: {\n          backgroundColor: color\n        }\n      }\n    });\n  },\n});\n\nvar DemoView = React.createClass({\n\trender() {\n    var imageUri = 'https://divnil.com/wallpaper/iphone5/img/app/c/l/clear-your-desktop-wallpaper-for-640x1136-iphone-5-311-46_33a8356f2205d7c0be8727720a21a207_raw.jpg';\n\n\t\treturn (\n      <View style={styles.container}>\n        <ScrollView\n          scrollEventThrottle={16}\n          onScroll={this._handleScroll}>\n          <Image\n            style={styles.image}\n            source={{uri: imageUri}}>\n            <TouchableHighlight\n              style={[styles.button, {marginTop: 120}]}\n              onPress={this._pushToNext}>\n              <View style={styles.buttonView}>\n                <Text style={styles.buttonText}>Push</Text>\n              </View>\n            </TouchableHighlight>\n            <TouchableHighlight\n              style={styles.button}\n              onPress={this._pushToNextCustomNavbar}>\n              <View style={styles.buttonView}>\n                <Text style={styles.buttonText}>Push with custom navbar</Text>\n              </View>\n            </TouchableHighlight>\n            <TouchableHighlight\n              style={styles.button}\n              onPress={this._back}>\n              <View style={styles.buttonView}>\n                <Text style={styles.buttonText}>Back</Text>\n              </View>\n            </TouchableHighlight>\n            <TouchableHighlight\n              style={styles.button}\n              onPress={this._popToTop}>\n              <View style={styles.buttonView}>\n                <Text style={styles.buttonText}>Pop to top</Text>\n              </View>\n            </TouchableHighlight>\n            <TouchableHighlight\n              style={styles.button}\n              onPress={this._changeColor}>\n              <View style={styles.buttonView}>\n                <Text style={styles.buttonText}>*custom bar become gray</Text>\n              </View>\n            </TouchableHighlight>\n          </Image>\n        </ScrollView>\n      </View>\n\t\t)\n\t},\n\n  _back() {\n    this.props.route.pop();\n  },\n\n  _pushToNext() {\n    var nextIndex = ++this.props.route.index;\n\n    this.props.route.push({\n      component: DemoView,\n      title: nextIndex,\n      titleStyle: {\n        fontSize: 22,\n        color: '#eee'\n      }\n    });\n  },\n\n  _pushToNextCustomNavbar() {\n    var colorIndex = this.props.route.index % navbarColors.length;\n    var color = navbarColors[colorIndex];\n\n    this.props.route.push({\n      component: DemoView,\n      navbarComponent: NavbarWrapper,\n      navbarPassProps: {\n        style: {\n          backgroundColor: color\n        }\n      }\n    });\n  },\n\n  _popToTop() {\n    this.props.route.popToTop();\n  },\n\n  _changeColor() {\n    this.props.updateNavbarProps({\n      style: {\n        backgroundColor: '#666'\n      }\n    });\n  },\n\n  _handleScroll(e) {\n    var alpha = (e.nativeEvent.contentInset.top + e.nativeEvent.contentOffset.y) / 200;\n    if (alpha < 0) alpha = 0;\n    if (alpha > 1) alpha = 1;\n\n    var style = {backgroundColor: 'rgba(102, 106, 136, ' + alpha +')'};\n    this.props.updateBarBackgroundStyle(style);\n  }\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    width: screen.width,\n    height: screen.height,\n  },\n\n  buttonView: {\n    justifyContent: 'center',\n    padding: 4,\n    width: 180,\n    height: 60,\n    backgroundColor: 'rgba(0,0,0,0.5)',\n    borderRadius: 4\n  },\n\n  button: {\n    marginBottom: 40\n  },\n\n  buttonText: {\n    fontSize: 20,\n    textAlign: 'center',\n    color: '#fff',\n    backgroundColor: 'rgba(0,0,0,0)'\n  },\n\n\timage: {\n    alignItems: 'center',\n\t\twidth: screen.width,\n\t\theight: screen.height * 1.5,\n\t},\n});\n\nmodule.exports = RootController;"
  },
  {
    "path": "example/demo2.js",
    "content": "var React = require('react-native');\nvar {\n  Image,\n  View,\n  ScrollView,\n  StyleSheet,\n  Text,\n  TouchableHighlight\n} = React;\n\nvar Router = require('react-native-custom-navigation');\n\nvar navbarColors = [\n  '#acc7bf',\n  '#5e5f67',\n  '#c37070',\n  '#eae160',\n  '#bf7aa3',\n  '#b7d967'\n];\n\nvar NavbarContent = require('./navbar');\nvar screen = require('Dimensions').get('window');\nvar axisWidth = screen.width - 120;\n\nvar NavbarWrapper = React.createClass({\n  getInitialState() {\n    return {\n      backgroundColor: this.props.backgroundColor,\n      progress: 0\n    };\n  },\n\n  componentWillReceiveProps(newProps) {\n    if (newProps.route !== this.props.route) {\n      var route = newProps.route;\n      var progress;\n      var n = Math.abs(route.previousIndex - route.index) * route.progress;\n      if (route.index > route.previousIndex) {\n        progress = (route.previousIndex + n) * 0.2;\n      } else {\n        progress = (route.previousIndex - n) * 0.2;\n      }\n\n      this.setState({\n        progress : progress\n      });\n    }\n\n    if (newProps.backgroundColor !== this.props.backgroundColor) {\n      this.setState({\n        backgroundColor: newProps.backgroundColor\n      })\n    }\n  },\n\n  _push() {\n    if (this.props.route.index > 4) {\n      return;\n    }\n\n    this.props.route.push({\n      component: DemoView,\n    });\n  },\n\n  render() {\n    var width = this.state.progress * axisWidth;\n    return (\n      <View>\n        <NavbarContent\n          goFoward = {this._push}\n          goBack = {this.props.route.pop}\n          style={{backgroundColor: '#5e5f67'}} />\n        <View style={styles.activity}>\n          <View style={styles.axisView}>\n            <View style={[styles.progress, {width: width, backgroundColor: this.state.backgroundColor}]}/>\n          </View>\n        </View>\n      </View>\n      );\n  }\n});\n\nvar RootController = React.createClass({\n  render() {\n    return (\n      <Router\n        navbarComponent={NavbarWrapper}\n        navbarPassProps={{\n          backgroundColor: '#b7d967'\n        }}\n        initialRoute={{\n          component: DemoView,\n        }}/>);\n  }\n});\n\nvar DemoView = React.createClass({\n  render() {\n    var imageUri = 'https://divnil.com/wallpaper/iphone5/img/app/c/l/clear-your-desktop-wallpaper-for-640x1136-iphone-5-311-46_33a8356f2205d7c0be8727720a21a207_raw.jpg';\n\n    return (\n      <View style={styles.container}>\n        <Image\n          style={styles.image}\n          source={{uri: imageUri}}>\n          <TouchableHighlight\n            style={styles.button}\n            onPress={this._pushToNext}>\n            <View style={styles.buttonView}>\n              <Text style={styles.buttonText}>Push</Text>\n            </View>\n          </TouchableHighlight>\n          <TouchableHighlight\n            style={styles.button}\n            onPress={this._back}>\n            <View style={styles.buttonView}>\n              <Text style={styles.buttonText}>Back</Text>\n            </View>\n          </TouchableHighlight>\n          <TouchableHighlight\n            style={styles.button}\n            onPress={this._popToTop}>\n            <View style={styles.buttonView}>\n              <Text style={styles.buttonText}>Pop to top </Text>\n            </View>\n          </TouchableHighlight>\n          <TouchableHighlight\n            style={styles.button}\n            onPress={this._changeColor}>\n            <View style={styles.buttonView}>\n              <Text style={styles.buttonText}>{'*change progress red'}</Text>\n            </View>\n          </TouchableHighlight>\n        </Image>\n      </View>\n    )\n  },\n\n  _back() {\n    this.props.route.pop();\n  },\n\n  _pushToNext() {\n    if (this.props.route.index > 4) {\n      return;\n    }\n\n    this.props.route.push({\n      component: DemoView,\n    });\n  },\n\n  _popToTop() {\n    this.props.route.popToTop();\n  },\n\n  _changeColor() {\n    this.props.updateNavbarProps({backgroundColor: 'rgba(255,0,0,1)'});\n  }\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    width: screen.width,\n    height: screen.height,\n  },\n\n  buttonView: {\n    justifyContent: 'center',\n    padding: 4,\n    width: 180,\n    height: 60,\n    backgroundColor: 'rgba(0,0,0,0.5)',\n    borderRadius: 4\n  },\n\n  button: {\n    marginBottom: 40\n  },\n\n  buttonText: {\n    fontSize: 20,\n    textAlign: 'center',\n    color: '#fff',\n    backgroundColor: 'rgba(0,0,0,0)'\n  },\n\n  image: {\n    alignItems: 'center',\n    width: screen.width,\n    height: screen.height,\n    justifyContent: 'center'\n  },\n\n  activity: {\n    position: 'absolute',\n    height: 64,\n    width: axisWidth,\n    top: 0,\n    left: (screen.width - axisWidth) / 2\n  },\n\n  navbar: {\n    width:screen.width,\n    height: 64,\n    backgroundColor: '#5e5f67',\n    justifyContent: 'center'\n  },\n\n  axisView: {\n    marginTop: 40,\n    width: axisWidth,\n    height: 8,\n    borderRadius: 4,\n    backgroundColor : '#fff',\n    alignSelf: 'center',\n    justifyContent: 'center'\n  },\n\n  progress: {\n    alignSelf: 'flex-start',\n    height: 6,\n    borderRadius: 3,\n  }\n});\n\nmodule.exports = RootController;"
  },
  {
    "path": "example/index.ios.js",
    "content": "/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n */\n'use strict';\n\nvar React = require('react-native');\nvar Demo1 = require('./demo1');\nvar Demo2 = require('./demo2');\n\nvar {\n  AppRegistry,\n} = React;\n\nAppRegistry.registerComponent('ReactTest', () => Demo1);"
  },
  {
    "path": "example/navbar.js",
    "content": "'use strict';\n\nvar React = require('react-native');\n\nvar {\n  View,\n  Text,\n  StyleSheet,\n  TouchableHighlight,\n} = React;\n\nvar screen = require('Dimensions').get('window');\nvar NavbarContent = React.createClass({\n  render() {\n    return (\n      <View style={[styles.container, this.props.style]}>\n        <View style={[styles.corner, styles.leftCorner]}>\n          <TouchableHighlight onPress={this.props.goBack} underlayColor=\"transparent\">\n            <View style={styles.backView}>\n              <Text style={styles.buttonText}>{'<'}</Text>\n            </View>\n          </TouchableHighlight>\n        </View>\n\n        <View style={[styles.corner, styles.rightCorner]}>\n          <TouchableHighlight onPress={this.props.goFoward} underlayColor=\"transparent\">\n            <View style={styles.backView}>\n              <Text style={styles.buttonText}>{'>'}</Text>\n            </View>\n          </TouchableHighlight>\n        </View>\n\n        <Text style={styles.titleText}>{this.props.title}</Text>\n      </View>\n    )\n  },\n});\n\nvar styles = StyleSheet.create({\n  container: {\n    width: screen.width,\n    height: 64,\n    justifyContent: 'center',\n  },\n\n  titleText: {\n    fontSize: 22,\n    color: '#fff',\n    textAlign: 'center',\n    alignSelf: 'center',\n  },\n\n  buttonText: {\n    fontSize: 32,\n    color: '#111',\n    textAlign: 'center',\n  },\n\n  corner: {\n    top: 20,\n    flex: 1,\n    position: 'absolute',\n    justifyContent: 'center',\n  },\n\n  leftCorner: {\n    left:0,\n  },\n\n  rightCorner: {\n    right:0,\n  },\n\n  backView: {\n    width: 44,\n    height: 44,\n    justifyContent: 'center',\n  }\n});\n\nmodule.exports = NavbarContent;"
  },
  {
    "path": "example/package.json",
    "content": "{\n  \"name\": \"sample-react-native-custom-navigation\",\n  \"version\": \"0.2.1\",\n  \"private\": true,\n  \"scripts\": {\n    \"start\": \"node_modules/react-native/packager/packager.sh\"\n  },\n  \"dependencies\": {\n    \"react-native\" : \"^0.11.0\",\n    \"react-native-custom-navigation\" : \"file:../\"\n  }\n}\n"
  },
  {
    "path": "index.js",
    "content": "'use strict';\n\nvar React = require('react-native');\n\nvar NavBarContainer = require('./components/NavBarContainer');\n\nvar {\n  StyleSheet,\n  Navigator,\n  StatusBarIOS,\n  View,\n} = React;\n\nvar self;\nvar Router = React.createClass({\n\n  getInitialState: function() {\n    self = this;\n    return {\n      route: null,\n      dragStartX: null,\n      didSwitchView: null,\n    };\n  },\n\n  /*\n   * This changes the title in the navigation bar\n   * It should preferrably be called for \"onWillFocus\" instad >\n   * > but a recent update to React Native seems to break the animation\n   */\n  onDidFocus: function(route) {\n    this.setState({ route: route });\n  },\n\n  onBack: function(navigator) {\n    if (this.state.route.index > 0) {\n      navigator.pop();\n    }\n  },\n\n  onForward: function(route, navigator) {\n    route.index = this.state.route.index + 1 || 1;\n    navigator.push(route);\n  },\n\n  onFirst: function(navigator) {\n    navigator.popToTop();\n  },\n\n  renderScene: function(route, navigator) {\n    var goForward = function(route) {\n      route.index = this.state.route.index + 1 || 1;\n      navigator.push(route);\n    }.bind(this);\n\n    var goBackwards = function() {\n      this.onBack(navigator);\n    }.bind(this);\n\n    var goToFirstRoute = function() {\n      navigator.popToTop();\n    };\n\n    var didStartDrag = function(evt) {\n      var x = evt.nativeEvent.pageX;\n      if (x < 28) {\n        this.setState({\n          dragStartX: x,\n          didSwitchView: false\n        });\n        return true;\n      }\n    }.bind(this);\n\n    // Recognize swipe back gesture for navigation\n    var didMoveFinger = function(evt) {\n      var draggedAway = ((evt.nativeEvent.pageX - this.state.dragStartX) > 30);\n      if (!this.state.didSwitchView && draggedAway) {\n        this.onBack(navigator);\n        this.setState({ didSwitchView: true });\n      }\n    }.bind(this);\n\n    // Set to false to prevent iOS from hijacking the responder\n    var preventDefault = function(evt) {\n      return true;\n    };\n\n    var updateNavbarProps = function(props) {\n      route.updateNavbarProps && route.updateNavbarProps(props);\n      route.updateStaticNavbarProps && route.updateStaticNavbarProps(props);\n    }\n\n    var Content = route.component;\n    return (\n      <View\n        style={[styles.container]}\n        onStartShouldSetResponder={didStartDrag}\n        onResponderMove={didMoveFinger}\n        onResponderTerminationRequest={preventDefault}>\n        <Content\n          route={{\n            index:route.index,\n            push:goForward,\n            pop:goBackwards,\n            popToTop:goToFirstRoute,\n          }}\n          updateBarBackgroundStyle={\n            (style)=>{\n              route.updateBarBackgroundStyle &&\n                route.updateBarBackgroundStyle(style)\n            }\n          }\n          updateNavbarProps={updateNavbarProps}\n          {...route.passProps}/>\n      </View>\n    )\n\n  },\n\n  render: function() {\n\n    // Status bar color\n    if (this.props.statusBarColor === \"black\") {\n      StatusBarIOS.setStyle(0);\n    } else {\n      StatusBarIOS.setStyle(1);\n    }\n\n    var navigationBar =\n      <NavBarContainer\n        navbarComponent={this.props.navbarComponent}\n        navbarPassProps={this.props.navbarPassProps}\n        currentRoute={this.state.route}\n        backButtonComponent={this.props.backButtonComponent}\n        onForward={this.onForward}\n        onBack={this.onBack}\n        onFirst={this.onFirst}/>\n\n    var initialRoute = this.props.initialRoute;\n    initialRoute.index = 0;\n    return (\n      <Navigator\n        initialRoute={initialRoute}\n        navigationBar={navigationBar}\n        renderScene={this.renderScene}\n        onDidFocus={this.onDidFocus}/>)\n  },\n});\n\n\nvar styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n\n\nmodule.exports = Router;"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-native-custom-navigation\",\n  \"version\": \"0.2.2\",\n  \"description\": \"A navigation that allow to custom the appearance of navigation bar in your app\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/superdami/react-native-custom-navigation.git\"\n  },\n  \"keywords\": [\n    \"react\",\n    \"react component\",\n    \"react native\",\n    \"react navigation\",\n    \"ios\",\n    \"navigation\",\n    \"navbar\",\n    \"router\"\n  ],\n  \"author\": \"Chen Zhejun <devsuperdami@gmail.com>\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/superdami/react-native-custom-navigation\",\n  \"dependencies\": {\n    \"react-timer-mixin\" : \"*\"\n  }\n}\n"
  }
]