NavigatorIOS crashes when "pushing" to a new route #1241

Closed
sharathprabhal opened this Issue May 12, 2015 · 9 comments

Projects

None yet

7 participants

@sharathprabhal
Contributor

Error message:

Invariant Violation: No navigator item should be pushed without JS knowing about it 1 0"

The red screen is displayed as soon as a new route is pushed.

Sample app available at https://github.com/sharathprabhal/TestNavigatorIOS

screen shot 2015-05-11 at 8 46 58 pm

@sharathprabhal
Contributor

(bump)

@sharathprabhal
Contributor

Found a workaround. Looks like using nested NavigatorIOS results in this. Instead, I replaced the top level nav with Navigator, since I did not need the iOS style back swipe for the top nav.

See diff at https://github.com/sharathprabhal/TestNavigatorIOS/pull/1/files

What is the purpose of the Navigator when developing an iOS app? Will it eventually replace NavigatorIOS? Will iOS style back swipe gesture be added to Navigator Any roadmap type info will be helpful here. Thanks!

@iktw
iktw commented May 25, 2015

I encountered the same problem. How do I solve this?

@sharathprabhal
Contributor

See above comment. I solved it by using Navigator for top level navigation

@brentvatne
Member

Closing as it seems to be fixed! @christopherdro #fridaytriage

@brentvatne brentvatne closed this May 29, 2015
@clintconklin

Ran into this today. Solution was to pass the root NavigatorIOS component to the nested component as a prop, e.g. <MyComponent navigator={this.props.navigator} />, and then just invoke it there via this.props.navigator.

@ignivanishant

i am facing same problem can we solve this without shifting from NavigatorIos to Navigator

@isikfsc
isikfsc commented Nov 7, 2015

Can one use nested Navigators all the way down, instead of using NavigatorIOS in any level of that hierarchy?

@yangxiaomu yangxiaomu added a commit to yangxiaomu/oursToDo that referenced this issue Dec 21, 2015
@yangxiaomu yangxiaomu fix bug:facebook/react-native#1241
change 首页的NavigatorIOS改为Navigator
5a872ad
@chenbin92 chenbin92 referenced this issue in chenbin92/React-native-example Feb 27, 2016
Open

React Native 之 LandingPage 示例演示 #8

@ephemer
Contributor
ephemer commented Sep 9, 2016

@brentvatne this still happens over a year later. It'd be great to be able to use a NavigatorIOS inside a NavigatorIOS. Having two different navigation stacks is a common pattern in iOS and is pretty much a must for our use case. The test repo provided by the OP is still relevant (https://github.com/sharathprabhal/TestNavigatorIOS)

I have just played around with this a bit and have a fix. Will post a pull request in a minute.

@ephemer ephemer added a commit to ephemer/react-native that referenced this issue Sep 9, 2016
@ephemer ephemer stopPropagation on navigationComplete event. Fixes #1241
With nested NavigatorIOS components:

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

Navigating (via push etc.) in ComponentWithNavigatorIOSInSubtree'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. The event bubbling was automatic and almost certain unintentional, so preventing it should not cause unintended side-effects.

See demo repo at #1241 for more a more detailed example.
288700e
@facebook-github-bot facebook-github-bot pushed a commit that referenced this issue Oct 17, 2016
@ephemer ephemer + Facebook Github Bot 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
73c5360
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment