Permalink
Browse files

NavigatorIOS: stopPropagation on navigationComplete event. Fixes #1241

Summary:
With nested NavigatorIOS components:

```
<NavigatorIOS initialRoute={{
  component: ComponentWithAnotherNavigatorIOSInSubtree
  title: 'xyz'
}}>
```

Navigating (via push etc.) in ComponentWithAnotherNavigatorIOSInSubtree's `navigator` caused an invariant error, making apps with this structure unusable. The reason was that the `navigationComplete` nativeEvent was being propagated to the outer Navigator due to React's automatic event bubbling, making the outer NavigatorIOS incorrectly think it was holding navigation stack state inconsistent with its native UINavigationController.

Concretely, if the outer navigation stack is empty except for its initial state and something is pushed onto the inner stack, the outer NavigatorIOS suddenly complains that it has 2 items on its stack rather than 1. In reality, the outer Navigator still only has 1 item on its stack but the inner Navigator's event (containing information about the inner Navigator) incorrectly bubbles up and reaches the outer Navigator too.
Closes #9828

Differential Revision: D4030167

Pulled By: ericvicenti

fbshipit-source-id: d04de3d5b70b4862a78610c92701ebdab2b047dd
  • Loading branch information...
1 parent 6a462fb commit 73c5360470bee493e440d10b33a173aa42acf23b @ephemer ephemer committed with Facebook Github Bot Oct 17, 2016
Showing with 3 additions and 0 deletions.
  1. +3 −0 Libraries/Components/Navigation/NavigatorIOS.ios.js
@@ -836,6 +836,9 @@ var NavigatorIOS = React.createClass({
},
_handleNavigationComplete: function(e: Event) {
+ // Don't propagate to other NavigatorIOS instances this is nested in:
+ e.stopPropagation();
+
if (this._toFocusOnNavigationComplete) {
this._getFocusEmitter().emit('focus', this._toFocusOnNavigationComplete);
this._toFocusOnNavigationComplete = null;

0 comments on commit 73c5360

Please sign in to comment.