TypeError: Cannot read property 'navigate' of undefined in the main App.js file

I am getting this error TypeError: Cannot read property 'navigate' of undefined. All code is defined in the main App.js file. Any solutions for this.

<Stack.Screen                    name="Home"                    component={BottomNav}                    options={{                        headerShown: true,                        headerTitle: 'Home',                        headerTitleStyle: { color: 'blue', fontWeight: 'bold' },                        headerRight: () => (<TouchableOpacity                                activeOpacity={0.5}                                onPress={() => this.props.navigation.navigate('PropertySearchScreen')}><Image                                    source={require('./../assets/icons/search.png')}                                    style={{ width: 25, height: 25, marginRight: 20 }}                                /></TouchableOpacity>                        ),                    }}                />