I'm trying to navigate between two screens, and i don't know what's happening here. I would like some help please thanks.

App.js

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                  headerShown: false
              }}
                initialRouteName={'Home'}
            >
                <Stack.Screen options={{headerShown: false}}name="Home" component={Tabs} />
                
                
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;`

Home.js

const Home = ({ navigation }) => {

    
    function renderRecetteList() {
        const renderItem = ({ item }) => (
            <TouchableOpacity
                
                onPress={() => navigation.navigate("Recette" )}
            >
               
            </TouchableOpacity>
        )

        return (
            <FlatList
                data={recette}
                keyExtractor={item => `${item.id}`}
                renderItem={renderItem}
                contentContainerStyle={{
                    paddingHorizontal: SIZES.padding * 2,
                    paddingBottom: 30
                }}
            />
        )
    }

    return(
        <SafeAreaView style = {styles.container}>
            {renderRecetteList()}
        </SafeAreaView>
        
    )
}

Recette.js

const Recette = ({ navigation }) => {
    return(
        <View>
            <Text>Search</Text>
        </View>
    )
}

export default Recette;

The error

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

Do you have a screen named 'Recette'?

CodePudding user response：

You can only navigate to components that are defined as a Screen in a react Navigator. In order to use navigate to go to Recette you need to define it as a Screen as you did with Home.

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                  headerShown: false
              }}
                initialRouteName={'Home'}
            >
...
                <Stack.Screen name="Recette" component={Recette} />
                
            </Stack.Navigator>
        </NavigationContainer>
    )
}