CODEWITHSUNDEEP
react-nativereact-native-navigation
acheese
acheese

Reputation: 59

React Native Stack Navigation Screen Doesn't Exist

In App.js I have the following Stack Navigator:

    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen name="Home">
            {(props) => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>

In the HomeScreen, I am trying to navigate to the "Profile" screen:

export default function HomeScreen(props) {
  const onProfilePress = () => {
    props.navigation.navigate('Profile')
  };

  return (
     <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={onProfilePress}>
            <Text style={styles.buttonText}>Profile</Text>
        </TouchableOpacity>
     </View>
   );
}

However, I get a

The action 'NAVIGATE' with payload {"name":"Profile"} was not handled by any navigator.

Does anyone know how to fix?

Upvotes: 0

Views: 1481

Answers (1)

Steven Bell
Steven Bell

Reputation: 1989

Profile is only part of the stack when user is true. Perhaps you meant to do something like this:

<NavigationContainer>
      <Stack.Navigator>
        {user ? (
<>
          <Stack.Screen name="Home">
            {(props) => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
<Stack.Screen name="Profile" component={ProfileScreen} />
</>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>

Upvotes: 1

Related Questions