New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
8 participants
@sharathprabhal
Contributor

sharathprabhal commented May 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@sharathprabhal

sharathprabhal May 12, 2015

Contributor

(bump)

Contributor

sharathprabhal commented May 12, 2015

(bump)

@sharathprabhal

This comment has been minimized.

Show comment
Hide comment
@sharathprabhal

sharathprabhal May 13, 2015

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!

Contributor

sharathprabhal commented May 13, 2015

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

This comment has been minimized.

Show comment
Hide comment
@iktw

iktw May 25, 2015

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

iktw commented May 25, 2015

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

@sharathprabhal

This comment has been minimized.

Show comment
Hide comment
@sharathprabhal

sharathprabhal May 25, 2015

Contributor

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

Contributor

sharathprabhal commented May 25, 2015

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

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 29, 2015

Collaborator

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

Collaborator

brentvatne commented May 29, 2015

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

@brentvatne brentvatne closed this May 29, 2015

@clintconklin

This comment has been minimized.

Show comment
Hide comment
@clintconklin

clintconklin Aug 9, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@ignivanishant

ignivanishant Oct 5, 2015

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

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

@isikfsc

This comment has been minimized.

Show comment
Hide comment
@isikfsc

isikfsc Nov 7, 2015

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

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 added a commit to yangxiaomu/oursToDo that referenced this issue Dec 21, 2015

fix bug:facebook/react-native#1241
change 首页的NavigatorIOS改为Navigator
@ephemer

This comment has been minimized.

Show comment
Hide comment
@ephemer

ephemer Sep 9, 2016

Contributor

@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.

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 added a commit to ephemer/react-native that referenced this issue Sep 9, 2016

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.

facebook-github-bot pushed a commit that referenced this issue Oct 17, 2016

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

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.