React Native undefined is not an object (evaluating 'HomeScreen.props.navigation') - reactjs

Question

I'm trying to navigate to another screen on the react navigation header when pressing the left element icon.
Error: React native Undefined is not an object(evaluating'HomeScreen.props.navigation')
Here's a picture of the error
Using:
expo, react navigation v3 and User Avatar to display user's profile picture (this will redirect to the user's profile)
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Image, SafeAreaView, FlatList} from 'react-native';
import CardStack, { Card } from 'react-native-card-stack-swiper';
import UserAvatar from 'react-native-user-avatar';
import GradientButton from 'react-native-gradient-buttons';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation';
import Drawer from 'react-native-drawer';
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerLeft: (
<TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')}>
<UserAvatar style={{marginLeft: 15}} size="28" name="User Test" color="#000"/>
</TouchableOpacity>
),
headerTitle: (
<View style={{flex:1, flexDirection:'row', justifyContent:'center', marginRight: 5}}>
<Image resizeMode="cover" style={{width:98, height:25}} source={require('./src/images/logo.png')}/>
</View>
),
headerRight:(
<TouchableOpacity>
<Image style={{width:28, height:28, marginRight: 15}} source={require('./src/images/share.png')}/>
</TouchableOpacity>
),
};
};
render() {
return (
<View style={styles.container}>
<View style={styles.content}>
<View style={styles.cardContainer}>
<Card style={styles.card}><Text style={styles.label} onPress={() => this.props.navigation.navigate('Feed')}>A</Text></Card>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Feed')}>
<Image style={{width:220, height:55}} source={require('./src/images/button.png')} onPress={() => this.props.navigation.navigate('Feed')}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
export default HomeScreen;
const drawerStyles = {
drawer: {
flex: 1.0,
backgroundColor: '#2E2E2E'
},
main: {
flex: 1.0,
backgroundColor: 'white'
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#EFF2F5'
},
buttonContainer:{
flex: 1,
flexDirection:'row',
justifyContent:'center',
position: 'absolute',
alignSelf: 'center',
marginTop: 30,
},
cardContainer:{
flexDirection:'row',
justifyContent:'center',
marginTop: 55,
},
card:{
width: 312,
height: 476,
backgroundColor: '#fff',
borderRadius: 25,
shadowColor: 'rgba(0,0,0,0.9)',
shadowOffset: {
width: 50,
height: 5
},
shadowOpacity:0.5,
},
label: {
lineHeight: 400,
textAlign: 'center',
fontSize: 55,
fontFamily: 'System',
color: '#000',
backgroundColor: 'transparent',
},
});
Here's the app.js file
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Image, SaveAreaView, ScrollView} from 'react-native';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from "react-navigation";
import HomeScreen from './layout_home.js';
import FeedScreen from './layout_feed.js';
import ProfileScreen from './layout_profile.js';
const AppStackNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
Feed: {
screen: FeedScreen
},
Profile: {
screen: ProfileScreen
},
})
export default createAppContainer(AppStackNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#808080'
},
});

Answer 1

You have already passed the navigation parameters.
You have to change it as the code below.
return {
headerLeft: (
<TouchableOpacity onPress={() => navigation.navigate('Profile')}>
<UserAvatar style={{marginLeft: 15}} size="28" name="User Test" color="#000"/>
</TouchableOpacity>
),