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?

Kuti Gbolahan · Accepted Answer · 2022-03-09 11:20:20Z

4

Try this

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

answered Mar 9, 2022 at 11:20

Kuti Gbolahan

2,4691 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OneTuskedMario Over a year ago

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.

satya164 · Accepted Answer · 2020-12-02 19:55:21Z

0

You can access it with dangerouslyGetParent()

const parent = navigation.dangerouslyGetParent();

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

edited Dec 2, 2020 at 19:55

answered Dec 2, 2020 at 16:28

satya164

10.2k2 gold badges35 silver badges49 bronze badges

8 Comments

satya164 Over a year ago

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)

Leem.fin Over a year ago

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 Over a year ago

I have a feeling that your answer is not for React Navigation v5, if you see my question, I am using React Navigation v5.

satya164 Over a year ago

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.

Leem.fin Over a year ago

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?

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related