diff --git a/README.md b/README.md
index 861fec9..c8492ba 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,8 @@ The **``** 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 **``** 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.
@@ -144,13 +147,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..
});
```
diff --git a/index.js b/index.js
index 87a42e5..4987018 100644
--- a/index.js
+++ b/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,7 +136,6 @@ class Router extends React.Component {
onBack(navigator) {
if (this.state.route.index > 0) {
navigator.pop();
- this.emitter.emit('pop');
}
}
@@ -76,7 +143,46 @@ class Router extends React.Component {
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) {
@@ -192,9 +298,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
@@ -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}
/>
);
diff --git a/package.json b/package.json
index cc1a0b0..a5cd1a8 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"author": "Tristan Edwards (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"
},