From de43b54c7d32ea7a8c5688e1ac9519e4dbc35fd0 Mon Sep 17 00:00:00 2001
From: Eric Raio <ericraio@gmail.com>
Date: Wed, 13 Jan 2016 01:23:06 +0900
Subject: [PATCH] binding state update on will focus

---
 components/NavBarContainer.js |  2 ++
 index.js                      | 31 ++++++++++++++++++++-----------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js
index 1bb32ba..ffffdbb 100644
--- a/components/NavBarContainer.js
+++ b/components/NavBarContainer.js
@@ -18,6 +18,8 @@ var NavBarContainer = React.createClass({
   },
 
   componentWillReceiveProps: function(newProps) {
+    if (!newProps.currentRoute) { return; }
+
     if (!this.props.currentRoute || (this.props.currentRoute.index === null)) {
       newProps.currentRoute.index = 0;
     }
diff --git a/index.js b/index.js
index e4e17fb..f411c92 100644
--- a/index.js
+++ b/index.js
@@ -23,13 +23,22 @@ var Router = React.createClass({
     };
   },
 
-  /*
-   * This changes the title in the navigation bar
-   * It should preferrably be called for "onWillFocus" instad >
-   * > but a recent update to React Native seems to break the animation
-   */
-  onDidFocus: function(route) {
-    this.setState({ route: route });
+  componentDidMount: function() {
+    this.onWillFocusNavigationSub =
+      this.refs.navigator.navigationContext.addListener(
+        'willfocus', this.onWillFocus
+    );
+  },
+
+  componentWillUnmount: function() {
+    if (this.onWillFocusNavigationSub) {
+      this.onWillFocusNavigationSub.remove();
+      this.onWillFocusNavigationSub = null;
+    }
+  },
+
+  onWillFocus: function(event) {
+    self.setState({ route: Object.assign({}, event.target.currentRoute) });
   },
 
   onBack: function(navigator) {
@@ -89,7 +98,7 @@ var Router = React.createClass({
     var updateNavbarProps = function(props) {
       route.updateNavbarProps && route.updateNavbarProps(props);
       route.updateStaticNavbarProps && route.updateStaticNavbarProps(props);
-    }
+    };
 
     var Content = route.component;
     return (
@@ -141,10 +150,10 @@ var Router = React.createClass({
     initialRoute.index = 0;
     return (
       <Navigator
+        ref="navigator"
         initialRoute={initialRoute}
         navigationBar={navigationBar}
-        renderScene={this.renderScene}
-        onDidFocus={this.onDidFocus}/>)
+        renderScene={this.renderScene} />)
   },
 });
 
@@ -156,4 +165,4 @@ var styles = StyleSheet.create({
 });
 
 
-module.exports = Router;
\ No newline at end of file
+module.exports = Router;