Navigate to subsequent screen React Navigation 6 / React Native

Question

Can anyone tell me what I’m doing wrong with the below:

"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",

I’ve got this in App.js (trimmed down of course):

const Stack = createStackNavigator();

export default function App() {

return (
    <NavigationContainer>
        <Stack.Navigator>
           <Stack.Screen
              name="Home"
              component={Home}
            />
           <Stack.Screen
              name="Groups"
              component={Groups}
            />
            <Stack.Screen
              name="Group Detail"
              component={GroupDetail}
            />
        </Stack.Navigator>
    </NavigationContainer>
}

Now, when I go from Home to Groups and then try to call navigation.navigate("GroupDetail");

I get this error: The action 'NAVIGATE' with payload {"name":"GroupDetail"} was not handled by any navigator.

Do you have a screen named 'GroupDetail'?

Of course, I do have that screen and have checked the imports.

What am I missing here? I need to just push from Home, to Groups then to Group Detail.

I’ve tried the Nested Navigator documentation, but I think think it applies here (didn’t work anyway).

Answer 1

I had the name wrong.

Instead of Group Detail, it needed to be GroupDetail.