I’m trying to implement a very simple navigation in react native. I’m trying to navigate from the Home Screen by clicking a button to go to a Details Screen. When clicking the button I get this error: Cannot read property ‘navigate’ of undefined.Here’s my code:

ArtScreen.js (The Details Screen):

import { View, Text, StyleSheet } from 'react-native';


export default function ArtScreen() {
 return (
   <View style={styles.container}>
     <Text style={styles.text}>Welcome to Art</Text>
   </View>
 );
}



const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#fff',
 },
 text: {
   fontSize: 24,
   fontWeight: 'bold',
 },
});

NavScreenReg.js (where I register my screens with the stack navigator and wrap them in the Navigation Container)

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import App from './App';
import ArtScreen from './ArtScreen';



const Stack = createNativeStackNavigator();


export default function NavScreenReg() {
 return (
   <NavigationContainer>
     <Stack.Navigator initialRouteName="Home">
       <Stack.Screen name="Home" component={App} />
       <Stack.Screen name="Art" component={ArtScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );
}

App.js (my Home Screen from which I try to navigate to the Art(Details) Screen)

import React from 'react';
import { View, Text, StyleSheet, Button, Alert } from 'react-native';
//import { useNavigation } from '@react-navigation/native';
//import { createNativeStackNavigator } from '@react-navigation/native-stack';
//import {useNavigation} from '@react-navigation/native'



export default function App({navigation}) {
  //const navigation = useNavigation();

  // Log the navigation prop
  console.log('Navigation prop:', navigation);
  
 return (
   <View style={styles.container}>
     <View style={styles.navBar}>
       <Text style={styles.navItem}>Item1</Text>
       <Text style={styles.navItem}>Item2</Text>
       <Text style={styles.navItem}>Item3</Text>
       <Text style={styles.navItem}>Item4</Text>
     </View>

    
     <View style={styles.blocksContainer}>
       <View style={styles.row}>
         <View style={styles.block}>
           <Text style={styles.blockText}>Art</Text>
           <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Art')}
      />
         </View>
         <View style={styles.block}>
           <Text style={styles.blockText}>Block2</Text>
         </View>
       </View>
       </View>
       <View style={[styles.block, styles.singleBlock]}>
         <Text style={styles.blockText}>Block3</Text>
       </View>
    
   </View>
 );
}


const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
 },
 navBar: {
   marginTop: 30,
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
   backgroundColor: '#f8f8f8',
   height: 60,
   paddingHorizontal: 20,
   borderBottomWidth: 1,
   borderBottomColor: '#e0e0e0',
 },
 navItem: {
   fontSize: 18,
   fontWeight: 'bold',
   color: '#333',
 },
 descriptionText: {
   fontSize: 16,
   color: '#555',
   marginTop: 20,
   marginHorizontal: 20,
   textAlign: 'center',
 },
 blocksContainer: {
   marginTop: 40,
   paddingHorizontal: 20,
 },
 row: {
   flexDirection: 'row',
   justifyContent: 'space-between',
   marginBottom: 10,
 },
 column: {
   flexDirection: 'column',
   justifyContent: 'space-between',
   marginBottom: 10,
 },
 block: {
   flex: 1,
   height: 100,
   backgroundColor: '#f0f0f0',
   justifyContent: 'center',
   alignItems: 'center',
   margin: 5,
   borderRadius: 8,
 },
 singleBlock: {
   alignSelf: 'center',
   width: '95%',
 },
 blockText: {
   fontSize: 16,
   fontWeight: 'bold',
   color: '#555',
 },
});

When I try to log the value of the navigation prop I get ‘undefined’ even though the navigation prop is passed to the home screen and both my home screen and my details screen are registered with the stack navigator and wrapped in a navigation container. I made sure to install the necessary dependencies: npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
I also tried using the hook useNavigation instead of using the navigation prop and that was giving me an error as well, but a different one.