Access parent stack navigator's navigation object from nested child screen

Question

I am using React Navigation v5 in my react-native project.

I have a nested stack navigator.

The parent stack navigator MyParentFlow which has a screen component which hosts another stack navigator:

const MyParentFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();

  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is the nested children stack navigator*/}
       <MyStack.Screen
         name={FLOWS.MyChildrenFlow}
         component={MyChildrenFlow}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

My nested stack navigator MyChildrenFlow:

const MyChildrenFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();


  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is a child screen in the nested navigator*/}
       <MyStack.Screen 
         name="MyChildScreen"
         component={MyChildScreen}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

In the child screen hosted by the nested stack navigator:

const MyChildScreen =({navigation})=> {
    /* I need to set options for the header of the parent's navigation */
    navigation.setOptions({
    headerRight: () => (
      ...
      />
    ),
  });

}

In the child screen hosted by the nested stack navigator, I need to set header via navigation for the parent navigator. My above code doesn't work because that navigation object is the nested stack navigator's , not the parent's.

My question is how can I get access of parent's navigator in the nested child screen and set the navigation options for it?

score 3 · Answer 1 · answered Mar 09 '22 at 11:20

3

Try this

navigation.getParent().dispatch(
                    CommonActions.navigate({
                            name: 'screenName',
                            params: {},
                        }
                    ))

answered Mar 09 '22 at 11:20

Kuti Gbolahan

2,379
1
9
17

2

This is probably the only answer I could find in StackOverflow talking about how to successfully navigate from one nested child into the nested child of another parent. – OneTuskedMario Oct 23 '22 at 02:36

satya164 · Answer 2 · 2020-12-02T19:55:21.530

0

You can access it with dangerouslyGetParent()

const parent = navigation.dangerouslyGetParent();

https://reactnavigation.org/docs/navigation-prop/#dangerouslygetparent

edited Dec 02 '20 at 19:55

answered Dec 02 '20 at 16:28

satya164

9,464
2
31
42

pretty sure it's not. it'd either return a navigation object, or undefined. there's no case where it returns empt object. (source: I maintain react navigation) – satya164 Dec 02 '20 at 17:00
Interesting, I am also pretty sure since the code and logs are in front of me now telling me that `parent` is `{}`. Have you tried? This is what I tried : ```const MyChildScreen =({navigation})=> { const parent = navigation.dangerouslyGetParent(); console.log(`parent: ${JSON.stringify(parent)}`); }``` , logs say `parent: {}`. Very obvious result isn't it? But thank you any way – Leem.fin Dec 02 '20 at 17:15
I have a feeling that your answer is not for React Navigation v5, if you see my question, I am using React Navigation v5. – Leem.fin Dec 02 '20 at 17:21
1

Why are you doing JSON.stringify? The navigation object only contains functions, what do you expect to be in the printed object after you JSON.stringify it? Functions cannot be stringified, so obviously it prints empty object. – satya164 Dec 02 '20 at 20:01
OK, because I don't know that function returns json or not, your answer doesn't tell. I thought it is a json object. And the link you provided also says `This method returns the state object of the navigator which contains the screen. ` Anyway, I tried again without treating it as JSON, the output is `parent: [object Object]`. Is that the `navigation` object of the parent stack navigator? I mean I am asking since I don't know what that [object Object] is. Can I directly `setOptions(...)` with that return? – Leem.fin Dec 02 '20 at 20:21
The link says "This method returns the navigation prop from the parent navigator that the current navigator is nested in", also I answered that to your question specifically asking for navigation object, why would I need to repeat it in my answer? Yes you can call setOptions on it because it's the navigation object. You can just try it in your code, it'd take 2 seconds. – satya164 Dec 02 '20 at 21:21
Right. Thank you! – Leem.fin Dec 03 '20 at 16:03
Try `this.props.navigation.getParent.setOptions`: https://reactnavigation.org/docs/navigation-prop/#getparent – Joshua Pinter Oct 03 '21 at 19:26

Access parent stack navigator's navigation object from nested child screen

2 Answers2