Implement additional eventemitters

README.md

@@ -144,13 +144,26 @@ The functions **`this.props.setRightProps`**, **`this.props.setLeftProps`** and
 - This allows you to talk directly to your navbar, because previously you could only talk to it when navigating forward or backward.
 
 
-Events emitted by the router:
-  `didFocus`, emits route name
-  You can add a listener to a component as such:
+As of 0.7.0 the router acts as a relay for events emitted by the navigator, and extends these to the following list:
+
+  `willFocus`: Emitted when a route will focus. Emits the route name as a string.
+  `didFocus`: Emitted when a route did focus. Emits the route name as a string.
+  `willPop`: Emitted when a route stack will be popped. Triggered by `Navigator.pop();`
+  `didPop`: Emitted when a route stack did pop. Triggered by `Navigator.pop();`
+  `willPush`: Emitted when a new route will be pushed to the route stack. Emits the new route object. Triggered by `Navigator.push(route);`
+  `didPush`: Emitted when a new route has been pushed to the route stack. Emits the new route object. Triggered by `Navigator.push(route);`
+  `willResetTo`: Emitted when the route stack will be reset to a given route. Emits the route object. Triggered by `Navigator.resetTo(route);`
+  `didResetTo`: Emitted when the route stack has been reset to a given route. Emits the route object. Triggered by `Navigator.resetTo(route);`
+  `willReplace`: Emitted when a route will replace the current one in the route stack. Emits the new route object. Triggered by `Navigator.reset(route);`
+  `didReplace`: Emitted when a route has replaced the current one in the route stack. Emits the new route object. Triggered by `Navigator.reset(route);`
+  `willPopToTop`: Emitted when the route stack will be popped to the top. Triggered by `Navigator.popToTop();`
+  `didPopToTop`: Emitted when the route stack has been popped to the top. Triggered by `Navigator.popToTop();`
+
+You can listen to these events by adding an event listener as such:
 
 ```javascript
   	this.props.routeEmitter.addListener('didFocus', (name) => {
-		//Check if name is the current component, and if it is, act on this focus event.
+		//Do something with name..
 	});
 ```
 

index.js

@@ -12,6 +12,7 @@ import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 import NavBarContainer from './components/NavBarContainer';
 import * as Styles from './styles';
+import aspect from 'aspect-js';
 
 const propTypes = {
   backButtonComponent: PropTypes.func,
@@ -44,9 +45,25 @@ class Router extends React.Component {
     this.onBack = this.onBack.bind(this);
     this.customAction = this.customAction.bind(this);
     this.renderScene = this.renderScene.bind(this);
+
     this.onDidFocus = this.onDidFocus.bind(this);
     this.onWillFocus = this.onWillFocus.bind(this);
 
+    this.onWillPop = this.onWillPop.bind(this);
+    this.onDidPop = this.onDidPop.bind(this);
+
+    this.onWillPush = this.onWillPush.bind(this);
+    this.onDidPush = this.onDidPush.bind(this);
+
+    this.onWillResetTo = this.onWillResetTo.bind(this);
+    this.onDidResetTo = this.onDidResetTo.bind(this);
+
+    this.onWillReplace = this.onWillReplace.bind(this);
+    this.onDidReplace = this.onDidReplace.bind(this);
+
+    this.onWillPopToTop = this.onWillPopToTop.bind(this);
+    this.onDidPopToTop = this.onDidPopToTop.bind(this);
+
     this.state = {
       route: {
         name: null,
@@ -56,6 +73,57 @@ class Router extends React.Component {
     this.emitter = new EventEmitter();
   }
 
+  componentDidMount() {
+    this.refs.navigator.navigationContext.addListener('willfocus', (event) => {
+      const route = event.data.route;
+      this.setState({ route });
+      this.emitter.emit('willFocus', route.name);
+    });
+
+    this.refs.navigator.navigationContext.addListener('didfocus', (event) => {
+      const route = event.data.route;
+      this.emitter.emit('didFocus', route.name);
+    });
+
+    aspect.before(this.refs.navigator, 'pop', () => {
+      this.onWillPop();
+    });
+    aspect.after(this.refs.navigator, 'pop', () => {
+      this.onDidPop();
+    });
+
+    aspect.before(this.refs.navigator, 'push', (route) => {
+      this.onWillPush(route);
+    });
+    aspect.after(this.refs.navigator, 'push', (route) => {
+        //temporary hack to fix bug in aspect library
+      this.onDidPush(route || arguments[1]);
+    });
+
+    aspect.before(this.refs.navigator, 'resetTo', (route) => {
+      this.onWillResetTo(route);
+    });
+    aspect.after(this.refs.navigator, 'resetTo', (route) => {
+        //temporary hack to fix bug in aspect library
+      this.onDidResetTo(route || arguments[1]);
+    });
+
+    aspect.before(this.refs.navigator, 'replace', (route) => {
+      this.onWillReplace(route);
+    });
+    aspect.after(this.refs.navigator, 'replace', (route) => {
+        //temporary hack to fix bug in aspect library
+      this.onDidReplace(route || arguments[1]);
+    });
+
+    aspect.before(this.refs.navigator, 'popToTop', () => {
+      this.onWillPopToTop();
+    });
+    aspect.after(this.refs.navigator, 'popToTop', () => {
+      this.onDidPopToTop();
+    });
+  }
+
   onWillFocus(route) {
     this.setState({ route });
     this.emitter.emit('willFocus', route.name);
@@ -68,15 +136,53 @@ class Router extends React.Component {
   onBack(navigator) {
     if (this.state.route.index > 0) {
       navigator.pop();
-      this.emitter.emit('pop');
     }
   }
 
   onForward(nextRoute, navigator) {
     navigator.push(
       Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
     );
-    this.emitter.emit('push', nextRoute);
+  }
+
+  onWillPop() {
+    this.emitter.emit('willPop');
+  }
+
+  onDidPop() {
+    this.emitter.emit('didPop');
+  }
+
+  onWillPush(route) {
+    this.emitter.emit('willPush', route);
+  }
+
+  onDidPush(route) {
+    this.emitter.emit('didPush', route);
+  }
+
+  onWillResetTo(route) {
+    this.emitter.emit('willResetTo', route);
+  }
+
+  onDidResetTo(route) {
+    this.emitter.emit('didResetTo', route);
+  }
+
+  onWillReplace(route) {
+    this.emitter.emit('willReplace', route);
+  }
+
+  onDidReplace(route) {
+    this.emitter.emit('didReplace', route);
+  }
+
+  onWillPopToTop() {
+    this.emitter.emit('willPopToTop');
+  }
+
+  onDidPopToTop() {
+    this.emitter.emit('didPopToTop');
   }
 
   setRightProps(props) {
@@ -228,8 +334,6 @@ class Router extends React.Component {
         initialRoute={this.props.firstRoute}
         navigationBar={navigationBar}
         renderScene={this.renderScene}
-        onDidFocus={this.onDidFocus}
-        onWillFocus={this.onWillFocus}
         configureScene={this.configureScene}
       />
     );

package.json

@@ -5,6 +5,7 @@
   "author": "Tristan Edwards <tristan.edwards@me.com> (http://tristanedwards.me)",
   "contributors": [
     "Mikael Carpenter",
+	"Nicolas Charpentier",
     "David Leonardi"
   ],
   "main": "index.js",
@@ -31,6 +32,9 @@
     "url": "https://github.com/react-native-simple-router-community/react-native-simple-router/issues"
   },
   "homepage": "https://github.com/react-native-simple-router-community/react-native-simple-router",
+  "dependencies": {
+    "aspect-js": "^1.0.3"
+  },
   "peerDependencies": {
     "react-native": ">=0.12.0 || 0.5.0-rc1 || 0.6.0-rc || 0.7.0-rc || 0.7.0-rc.2 || 0.8.0-rc || 0.8.0-rc.2 || 0.9.0-rc || 0.10.0-rc || 0.11.0-rc || 0.12.0-rc || 0.13.0-rc || 0.14.0-rc || 0.15.0-rc || 0.16.0-rc || 0.17.0-rc || 0.18.0-rc || 0.19.0-rc || 0.20.0-rc || 0.20.0-rc1"
   },