Skip to content

Commit a9b6823

Browse files
davidLeonardiJohann
authored andcommitted
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();`
1 parent d05f813 commit a9b6823

File tree

2 files changed

+112
-6
lines changed

2 files changed

+112
-6
lines changed

README.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,26 @@ The functions **`this.props.setRightProps`**, **`this.props.setLeftProps`** and
145145
- This allows you to talk directly to your navbar, because previously you could only talk to it when navigating forward or backward.
146146

147147

148-
Events emitted by the router:
149-
`didFocus`, emits route name
150-
You can add a listener to a component as such:
148+
As of 0.7.0 the router acts as a relay for events emitted by the navigator, and extends these to the following list:
149+
150+
`willFocus`: Emitted when a route will focus. Emits the route name as a string.
151+
`didFocus`: Emitted when a route did focus. Emits the route name as a string.
152+
`willPop`: Emitted when a route stack will be popped. Triggered by `Navigator.pop();`
153+
`didPop`: Emitted when a route stack did pop. Triggered by `Navigator.pop();`
154+
`willPush`: Emitted when a new route will be pushed to the route stack. Emits the new route object. Triggered by `Navigator.push(route);`
155+
`didPush`: Emitted when a new route has been pushed to the route stack. Emits the new route object. Triggered by `Navigator.push(route);`
156+
`willResetTo`: Emitted when the route stack will be reset to a given route. Emits the route object. Triggered by `Navigator.resetTo(route);`
157+
`didResetTo`: Emitted when the route stack has been reset to a given route. Emits the route object. Triggered by `Navigator.resetTo(route);`
158+
`willReplace`: Emitted when a route will replace the current one in the route stack. Emits the new route object. Triggered by `Navigator.reset(route);`
159+
`didReplace`: Emitted when a route has replaced the current one in the route stack. Emits the new route object. Triggered by `Navigator.reset(route);`
160+
`willPopToTop`: Emitted when the route stack will be popped to the top. Triggered by `Navigator.popToTop();`
161+
`didPopToTop`: Emitted when the route stack has been popped to the top. Triggered by `Navigator.popToTop();`
162+
163+
You can listen to these events by adding an event listener as such:
151164

152165
```javascript
153166
this.props.routeEmitter.addListener('didFocus', (name) => {
154-
//Check if name is the current component, and if it is, act on this focus event.
167+
//Do something with name..
155168
});
156169
```
157170

index.js

Lines changed: 95 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
1212

1313
import NavBarContainer from './components/NavBarContainer';
1414
import * as Styles from './styles';
15+
import aspect from 'aspect-js';
1516

1617
const propTypes = {
1718
backButtonComponent: PropTypes.func,
@@ -44,9 +45,25 @@ class Router extends React.Component {
4445
this.onBack = this.onBack.bind(this);
4546
this.customAction = this.customAction.bind(this);
4647
this.renderScene = this.renderScene.bind(this);
48+
4749
this.onDidFocus = this.onDidFocus.bind(this);
4850
this.onWillFocus = this.onWillFocus.bind(this);
4951

52+
this.onWillPop = this.onWillPop.bind(this);
53+
this.onDidPop = this.onDidPop.bind(this);
54+
55+
this.onWillPush = this.onWillPush.bind(this);
56+
this.onDidPush = this.onDidPush.bind(this);
57+
58+
this.onWillResetTo = this.onWillResetTo.bind(this);
59+
this.onDidResetTo = this.onDidResetTo.bind(this);
60+
61+
this.onWillReplace = this.onWillReplace.bind(this);
62+
this.onDidReplace = this.onDidReplace.bind(this);
63+
64+
this.onWillPopToTop = this.onWillPopToTop.bind(this);
65+
this.onDidPopToTop = this.onDidPopToTop.bind(this);
66+
5067
this.state = {
5168
route: {
5269
name: null,
@@ -67,6 +84,44 @@ class Router extends React.Component {
6784
const route = event.data.route;
6885
this.emitter.emit('didFocus', route.name);
6986
});
87+
88+
aspect.before(this.refs.navigator, 'pop', () => {
89+
this.onWillPop();
90+
});
91+
aspect.after(this.refs.navigator, 'pop', () => {
92+
this.onDidPop();
93+
});
94+
95+
aspect.before(this.refs.navigator, 'push', (route) => {
96+
this.onWillPush(route);
97+
});
98+
aspect.after(this.refs.navigator, 'push', (route) => {
99+
//temporary hack to fix bug in aspect library
100+
this.onDidPush(route || arguments[1]);
101+
});
102+
103+
aspect.before(this.refs.navigator, 'resetTo', (route) => {
104+
this.onWillResetTo(route);
105+
});
106+
aspect.after(this.refs.navigator, 'resetTo', (route) => {
107+
//temporary hack to fix bug in aspect library
108+
this.onDidResetTo(route || arguments[1]);
109+
});
110+
111+
aspect.before(this.refs.navigator, 'replace', (route) => {
112+
this.onWillReplace(route);
113+
});
114+
aspect.after(this.refs.navigator, 'replace', (route) => {
115+
//temporary hack to fix bug in aspect library
116+
this.onDidReplace(route || arguments[1]);
117+
});
118+
119+
aspect.before(this.refs.navigator, 'popToTop', () => {
120+
this.onWillPopToTop();
121+
});
122+
aspect.after(this.refs.navigator, 'popToTop', () => {
123+
this.onDidPopToTop();
124+
});
70125
}
71126

72127
onWillFocus(route) {
@@ -81,15 +136,53 @@ class Router extends React.Component {
81136
onBack(navigator) {
82137
if (this.state.route.index > 0) {
83138
navigator.pop();
84-
this.emitter.emit('pop');
85139
}
86140
}
87141

88142
onForward(nextRoute, navigator) {
89143
navigator.push(
90144
Object.assign(nextRoute, { index: this.state.route.index + 1 || 1 })
91145
);
92-
this.emitter.emit('push', nextRoute);
146+
}
147+
148+
onWillPop() {
149+
this.emitter.emit('willPop');
150+
}
151+
152+
onDidPop() {
153+
this.emitter.emit('didPop');
154+
}
155+
156+
onWillPush(route) {
157+
this.emitter.emit('willPush', route);
158+
}
159+
160+
onDidPush(route) {
161+
this.emitter.emit('didPush', route);
162+
}
163+
164+
onWillResetTo(route) {
165+
this.emitter.emit('willResetTo', route);
166+
}
167+
168+
onDidResetTo(route) {
169+
this.emitter.emit('didResetTo', route);
170+
}
171+
172+
onWillReplace(route) {
173+
this.emitter.emit('willReplace', route);
174+
}
175+
176+
onDidReplace(route) {
177+
this.emitter.emit('didReplace', route);
178+
}
179+
180+
onWillPopToTop() {
181+
this.emitter.emit('willPopToTop');
182+
}
183+
184+
onDidPopToTop() {
185+
this.emitter.emit('didPopToTop');
93186
}
94187

95188
setRightProps(props) {

0 commit comments

Comments
 (0)