Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Navigation understanding navigator nestings

I've been using react-navigation for almost half a year, but I still don't understand the nesting part of it. How the navigation prop is inherited, how to communicate, etc..

I created a demo on snack, from the redux example app.

Demo

I'd like to understand these:

  1. What happens with the navigation prop if I navigate to a child navigator?

  2. How to navigate from a child navigators screen to the parents screen or the parents other child's screen

  3. How to remove a child navigator from the state?

The simplest example: On a login event I reset the navigator with the Main StackNavigator. The problem with this is, that I have to rebuild manually the whole Main state. It would be much easier If I could just remove somehow the Auth StackNavigator and keep the Main Stack.

  1. Is it possible to trigger redux event with the child navigators navigate actions?

I wrapped the Main navigation (StackNavigator) component with a redux component as the doc says. It works fine until I navigate into a child component. The navigation props niavigate method stops dispatching redux actions.

  1. This, I couldn't recreate in the demo

I have a Component and a DrawerNavigator inside a StackNavigator. If i navigate into the DrawerNavigator (there is only 1 screen there) from the Component, I can't go back to that Component with this:

this.props.navigation.goBack()

The odd part is that its only impossible inside the screen's component. From the screen's header component its working.

like image 997
Xyzor Avatar asked Nov 07 '22 10:11

Xyzor


1 Answers

  1. It can always access in props.navigation.

  2. reset action is needed in order to navigate to parent/child navigator.
    Also, due to #1127 key: null is required

  3. navigation.replace is another option for login navigate to main screen if the screens are in same navigator, use reset if animated transition is required. Or see other methods in #295

  4. navigate can only navigate to screen in same navigator, refer to answer 3 for other methods.

  5. maybe the component is missing navigation props

Working Demo

like image 52
inDream Avatar answered Nov 15 '22 11:11

inDream