Getting a TypeError: undefined is not an object for navigation.nagivate

Question

I am working on an app and I would like to navigate to different screens. I am using React Navigation to do so but I am getting the error TypeError: undefined is not an object (evaluating 'navigation.navigate') when I try to use navigation.navigate.

All my screens are in a screen folder here is what the file branch looks like.

File branch

Here is my code for App.js where I am making the navigation container and stack navigator.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './Screens/Home';
import NewDaignosis from './Screens/NewDaignosis';
import DaignosisList from './Screens/DaignosisList';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>

      <Stack.Navigator initalRouteName="Home">

        <Stack.Screen name="Home" component={Home}/>
        <Stack.Screen name="New Daignosis" component={NewDaignosis}/>
        <Stack.Screen name="Daignosis List" component={DaignosisList}/>


      </Stack.Navigator>

    </NavigationContainer>
  );
}

Here is Home.js where I use navigation.navigate

import React from 'react';
import { Text, View } from 'react-native';
import GeneralButton from '../Buttons/GeneralButton';
import styles from '../Styles/GeneralStyles';

const Home = (props, { navigation }) => {
  return (
    <View style={styles.genFirstView}>
      <View style={styles.genInFirstView}>

          <Text style={{
            top: 25,
            fontSize: 50,
            fontWeight: 'bold',
            color: "black",
            flex: 2,
          }}> ACHD </Text>

          <View style={{flex: 2}}>
            <GeneralButton
              name="Start New Daignosis"
              onPress={() => navigation.navigate('New Daignosis')}
            />
          </View>

          <View style={{flex: 9}}>
            <GeneralButton
              name="Choose from Daignosis list"
              onPress={() => navigation.navigate('Daignosis List')}
            />

          </View>

      </View>
      <View style={{right: 10}}>
        <GeneralButton
          name="Help"/>
      </View>
    </View>

  );
}

export default Home;

The GeneralButton is just a generic touchable opacity element I created that I could reuse.

The screens I am shifting too are just empty pages atm.

Please let me know if any clarification is needed.

Thank you!

Answer 1

There's an error on your code.

const Home = (props, { navigation })

navigation belongs to props, so you need to write like this.

const Home = ({ navigation, ...props })