When navigating to a stack, route state of this stack is undefined

[matpoz]

Current behavior

1. I have a root stack and a nested stack.

   const RootNavigator = () => (
   <RootStack.Navigator>
   <RootStack.Screen component={RootScreen} name="Screen" />
   <RootStack.Screen component={NestedNavigator} name="NestedStack" />
   </RootStack.Navigator>
   );

2. I navigate from from a screen within the root stack ("RootScreen") to a screen within the nested stack ("NestedStack").

3. Check the route.state of this stack. Use any method: getState, useNavigationState, the route prop all give the same result.

   const NestedNavigator = ({ route }) => {
   const currentRoute = useNavigationState((state) =>
   state.routes.find((route) => route.name === 'NestedStack')
   );
   
   return (
   <>
     // undefined
     <Text>Route state index: {route?.state?.index}</Text>
     // also undefined
     <Text>Route state index: {currentRoute?.state?.index}</Text>
     <NestedStack.Navigator>
       <NestedStack.Screen component={NestedScreen1} name="NestedScreen1" />
       <NestedStack.Screen component={NestedScreen2} name="NestedScreen2" />
     </NestedStack.Navigator>
   </>
   );
   };

4. To get access to the state property I have to perform any navigation action within the nested stack.

Expected behavior

The nested stack is rendered and so is a screen within the stack. The state property containing the name and index of the currently rendered route should already be accessible.

Reproduction

https://snack.expo.dev/WDITwptdY68Ahe_pf0wwW

Platform

• [X] Android
• [X] iOS
• [X] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [X] @react-navigation/stack
• [ ] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

• [x] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.17
@react-navigation/stack	6.3.29
react-native-safe-area-context	4.5.0
react-native-screens	3.20.0
react-native-gesture-handler	2.9.0
react-native	0.72.6

[SusulAdam]

I have the same issue on react native 0.72.2 and similar navigation packages version.

[AptypTheKing]

@matpoz why did you close it? you found another solution?

[github-actions[bot]]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[matpoz]

@AptypTheKing I found this in the v5 to v6 migration guide: https://reactnavigation.org/docs/upgrading-from-5.x/#no-more-state-property-on-the-route-prop

"The route prop passed to components often contained a state property which held state of the child navigator. While it wasn't meant to be public and we recommended against using it in the docs, we've seen a lot of people use this property. It's problematic to use the property since it's not guaranteed to exist before navigation happens in the child navigator. This can cause subtle bugs in your app which you might not notice during development. So we have started warning on using this property in React Navigation 5 and removed this property entirely in React Navigation 6 prevent its usage."

Although this is not exactly the same case (I don't intend to use the route prop at all), this shows that this probably doesn't work by design.

I haven't found a solution. I'd really appreciate any advice.