When trying to navigate displays error "cant find variable: navigation" in expo

Question

I am trying to navigate to another page using react-navigation but it keeps displaying the same error, here is my code ,I'm using expo :

Homepage.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

export default function HomePage({navigation}) {


    return (
        <View >
            <SafeAreaView>
                <TouchableOpacity  onPress = {() => {
                    navigation.navigate('Details')}}>
                </TouchableOpacity>
            </SafeAreaView>
        </View>
    );
}

App.js

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import Homepage from './Homepage'
import Details from './Details'

const Stack = createNativeStackNavigator();





export default function App({navigation}) {

    
    return ( 
        <View style={styles.container}>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                    name="Homepage"
                    component={Homepage}
                    />
                    <Stack.Screen
                    name="Details"
                    component={Details}
                    />
                </Stack.Navigator>
            </NavigationContainer>
            <TouchableOpacity
            style={styles.Touchable1}
            onPress={({navigation}) => navigate('Home')}
            >
                <Text style={styles.text1}>
                Home
                </Text>
            </TouchableOpacity>
        </View>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    Touchable1: {
        width: "40%", 
        height: "20%",
        margin: 10,
        backgroundColor: "gray",
        marginVertical: 400,
    },
    text1: {
        fontWeight: 'bold',
        fontSize: 18,
        width: 300,
        marginTop: 60,
        marginHorizontal: 50,
    }
});

Details.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function DetailsPage({navigation}) {
    return (
        <View>
          <Text>Hello</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    
});

Answer 1

1. First - you try to navigate outside the navigation container

2. Second - You have screen Homepage, but try to navigate to Home screen(this screen do not exist)

I suggest you want to navigate from Details screen to HomePage

export default function App({navigation}) {

    
    return ( 
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                    name="Homepage"
                    component={Homepage}
                    />
                    <Stack.Screen
                    name="Details"
                    component={Details}
                    />
                </Stack.Navigator>
            </NavigationContainer>
    );
}

export default function DetailsPage({navigation}) {
    return (
        <View>
          <Text>Hello</Text>
            <TouchableOpacity
              style={styles.Touchable1}
              onPress={({navigation}) => navigate('Homepage')}
            >
                <Text style={styles.text1}>
                Navigate to Home
                </Text>
            </TouchableOpacity>
        </View>
    );
}