Can’t find variable navigation in react native expo

Question

Before I begin, I'd like to say that there were other questions that were answered that had a similar problem but none of those solutions worked for me. I just started using React Native Expo today and I'm finding the navigation part a little difficult. Take a look at the code:

App.js

import React, { Component } from 'react';
import HomePage from './HomePage'
import DetailsPage from './DetailsPage'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>

        <Stack.Screen name="HomePage" component={HomePage} />
        <Stack.Screen name="DetailsPage" component={DetailsPage} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I've got 2 .js files that represent 2 pages of my app, here's the code for those files:

HomePage.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';


export default function HomePage() {

    // Create a temporary list to populate the table view
    const [orders, setOrders] = useState([
        { company: 'Airbnb',  date: '20/02/2020', author: 'Mohammed Ajmal', itemOrdered: 'Sack Craft paper', id: '1' },
        { company: 'Apple',     date: '15/01/2020', author: 'Ilma Ajmal', itemOrdered: 'Multiwall paper sacks', id: '2' },
        { company: 'Google',    date: '30/12/2019', author: 'Rifka Ajmal', itemOrdered: 'Rigid paper sacks', id: '3' },
        { company: 'Facebook',  date: '29/06/2020', author: 'Fahim Khalideen', itemOrdered: 'Paper bags', id: '4' },
])

    return (
        <View style={styles.container}>
            <SafeAreaView>

                {/* Create the table view */}
                <FlatList
                style = {styles.tableView}
                data = {orders}
                keyExtractor = {(item) => item.id}

                renderItem = {({ item }) => (
                    <TouchableOpacity style = {styles.tableViewItem} onPress = {() => {
                        navigation.navigate('DetailsPage')
                    }}>

                        <Text style = {styles.companyName}>{ item.company }</Text>
                        <Text style = {styles.date}>{ item.date }  |  { item.author }</Text>
                        <Text style = {styles.itemOrdered}>{ item.itemOrdered }</Text>
                    </TouchableOpacity>
                )}
                />

            </SafeAreaView>
        </View>
    );
}
// Stylesheet

DetailsPage.js

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

export default function DetailsPage() {
    return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
    );
}

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

What I'm trying to create is a table view, when clicked, it should take the user to the Details page, but I'm getting an error saying

Can't find variable: navigation

I tried almost everything I could find in Stack Overflow but nothing helped me, maybe because the code in those answers were different and I couldn't understand how to make it work for mine.

Answer 1

Or you could make use of the withNavigation when using a class component.

import { withNavigation } from 'react-navigation';
class DetailsPage extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}
export default withNavigation(DetailsPage);

Answer 2

You are not having a parameter for the navigation change the line

export default function HomePage() {

to

export default function HomePage({navigation}) {

And it will work.