From 5f5738ba4a6de47029212a6b1a4b8cdf3839a957 Mon Sep 17 00:00:00 2001 From: David Leonardi Date: Sat, 13 Feb 2016 18:28:06 +0100 Subject: [PATCH 1/4] Fixing #30 --- index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 87a42e5..718f2fa 100644 --- a/index.js +++ b/index.js @@ -56,6 +56,19 @@ 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); + }); + } + onWillFocus(route) { this.setState({ route }); this.emitter.emit('willFocus', route.name); @@ -228,8 +241,6 @@ class Router extends React.Component { initialRoute={this.props.firstRoute} navigationBar={navigationBar} renderScene={this.renderScene} - onDidFocus={this.onDidFocus} - onWillFocus={this.onWillFocus} configureScene={this.configureScene} /> ); From e871e4cd8a01dcb50e80a069d3d6a0d5efcbb376 Mon Sep 17 00:00:00 2001 From: David Leonardi Date: Sat, 13 Feb 2016 19:20:58 +0100 Subject: [PATCH 2/4] add dependencies and credits --- package.json | 4 ++++ 1 file changed, 4 insertions(+) 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" }, From e763c9bd767e41b1779210e67cfa4f590f8e2c67 Mon Sep 17 00:00:00 2001 From: David Leonardi Date: Sat, 13 Feb 2016 20:43:19 +0100 Subject: [PATCH 3/4] Added support for a bunch of events. `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();` --- README.md | 21 +++++++++--- index.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 112 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 861fec9..64c6946 100644 --- a/README.md +++ b/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.. }); ``` diff --git a/index.js b/index.js index 718f2fa..dec6579 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, @@ -67,6 +84,44 @@ 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(); + }); } onWillFocus(route) { @@ -81,7 +136,6 @@ class Router extends React.Component { onBack(navigator) { if (this.state.route.index > 0) { navigator.pop(); - this.emitter.emit('pop'); } } @@ -89,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) { From c5ec57a54006fd74ae35a73dfd5cc01b652cf2ef Mon Sep 17 00:00:00 2001 From: David Leonardi Date: Sat, 13 Feb 2016 20:53:16 +0100 Subject: [PATCH 4/4] Fixing #26 --- README.md | 3 +++ index.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 64c6946..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. diff --git a/index.js b/index.js index dec6579..4987018 100644 --- a/index.js +++ b/index.js @@ -298,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