Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

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

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

sharathprabhal opened this issue May 12, 2015 · 9 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@sharathprabhal
Copy link
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
Copy link
Contributor Author

(bump)

@sharathprabhal
Copy link
Contributor Author

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!

@mohammedhammoud
Copy link

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

@sharathprabhal
Copy link
Contributor Author

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

@brentvatne
Copy link
Collaborator

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

@clintconklin
Copy link

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
Copy link

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

@fselcukcan
Copy link

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
@yangxiaomu
fix bug：facebook/react-native#1241
5a872ad 
change 首页的NavigatorIOS改为Navigator
@chenbin92 chenbin92 mentioned this issue Feb 27, 2016
Open
@ephemer
Copy link
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
@ephemer
stopPropagation on navigationComplete event. Fixes facebook#1241
288700e 
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 facebook#1241 for more a more detailed example.
@ephemer ephemer mentioned this issue Sep 9, 2016
Closed
facebook-github-bot pushed a commit that referenced this issue Oct 17, 2016
@ephemer
NavigatorIOS: stopPropagation on navigationComplete event. Fixes #1241
73c5360 
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
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@brentvatne @clintconklin @sharathprabhal @fselcukcan @mohammedhammoud @ephemer @ignivanishant @react-native-bot