Merge pull request #47 from react-native-simple-router-community/0.7.0-rc

0.7.0

Author: charpeni

README.md

@@ -100,6 +100,8 @@ The **`<Router />`** object used to initialize the navigation can take the follo
 - `firstRoute` (required): A React class corresponding to the first page of your navigation
 - `headerStyle`: Apply a StyleSheet to the navigation bar. You'll probably want to change the backgroundColor for example.
 - `titleStyle`: Apply a StyleSheet to the navigation bar titles. Useful for changing the font or text color.
+- `bgStyle` Apply a StyleSheet to the background of all routes.
+- `statusBarColor`: Specify the string `black` if you want the statusbar to be dark in color, or leave unspecified for a `light-content` style. Refer to StatusBarIOS for details.
 - `borderBottomWidth`: Apply a bottom border to your navbar.
 - `borderColor`: Apply a border color to your bottom border.
 - `backButtonComponent`: By default, the navigation bar will display a simple "Back" text for the back button. To change this, you can specify your own backButton component (like in the Twitter app).
@@ -108,6 +110,7 @@ The **`<Router />`** object used to initialize the navigation can take the follo
 - `hideNavigationBar`: Hide the navigation bar, always
 - `handleBackAndroid` (Boolean value): Apply a listener to the native back button on Android. On click, it will go to the previous route until it reach the first scene, then it will exit the app.
 
+
 The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript object) which can have the following keys:
 - `name`: The name of your route, which will be shown as the title of the navigation bar unless it is changed.
 - `component` (required): The React class corresponding to the view you want to render.
@@ -145,13 +148,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,
@@ -45,6 +46,24 @@ class Router extends React.Component {
     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,
@@ -54,6 +73,10 @@ class Router extends React.Component {
     this.emitter = new EventEmitter();
   }
 
+  componentWillMount() {
+    this.state.route = this.props.firstRoute;
+  }
+
   componentDidMount() {
     this.refs.navigator.navigationContext.addListener('willfocus', (event) => {
       const route = event.data.route;
@@ -65,20 +88,96 @@ class Router extends React.Component {
       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();
+    });
   }
 
   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) {
@@ -194,9 +293,9 @@ class Router extends React.Component {
     // Status bar color
     if (Platform.OS === 'ios') {
       if (this.props.statusBarColor === 'black') {
-        StatusBarIOS.setStyle(0);
+        StatusBarIOS.setStyle(0); // "Default" style according to StatusBarIOS.js
       } else {
-        StatusBarIOS.setStyle(1);
+        StatusBarIOS.setStyle(1); // "light-content" style according to StatusBarIOS.js
       }
     } else if (Platform.OS === 'android') {
       // no android version yet

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"
   },