React Native: undefined is not an object (evaluating 'props.navigation.navigate')

Question

I'm learning React Native and by trying to run this code using Expo it gives me the Exception error: undefined is not an object (evaluating 'props.navigation.navigate'), at line 17 on App.js (marked in the comment)

There are two files: App.js and Untitled1.js

App:

import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';

  function App(props) {
    return (

      <View style={styles.container}>
        <Text style={styles.logo}>APPetito</Text>

        <Text style={styles.loginText}>Welcome to our app!</Text>
        <Text style={styles.loginText}>Choose what do you want to do</Text>

// [ THE FOLLOWING LINE CONTAINS THE ERROR ]
        <TouchableOpacity onPress={() => props.navigation.navigate("Untitled1")} style={styles.loginBtn}>

          <Text style={styles.loginText}>I eat food</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.loginText}>I sell food</Text>
        </TouchableOpacity>

      </View>
    );

  }
// here there are the const styles
export default App;

Untitled.js

import * as React from 'react';
import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import Icon from "react-native-vector-icons/Entypo";
import { NavigationContainer } from '@react-navigation/native';

function Untitled1(props) {
  return (
    <View style={styles.container}>
      <Icon name="check" style={styles.icon}></Icon>
      <Text style={styles.itWorks}>It works!</Text>
    </View>
  );
}

// here there are the const styles
export default Untitled1;

What can I do to solve the problem?

Answer 1

I think the problem is that you didn't create a Stack navigator in the first place to navigate between screens. Refer to react navigation docs to know more here

According to the docs you have to implement the stack navigator such as:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

  function Home(props) {
    return (

      <View style={styles.container}>
        <Text style={styles.logo}>APPetito</Text>

        <Text style={styles.loginText}>Welcome to our app!</Text>
        <Text style={styles.loginText}>Choose what do you want to do</Text>

        <TouchableOpacity onPress={() => props.navigation.navigate("Untitled1")} style={styles.loginBtn}>

          <Text style={styles.loginText}>I eat food</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.loginText}>I sell food</Text>
        </TouchableOpacity>

      </View>
    );

  }


const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Untitled1" component={Untitled1} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I have updated your code a little bit to help you understand the concept.