React native navigation undefine object error - reactjs

Question

I am facing a error called "undefine is not an object (evaluating '_this.props'). Its a very simple code which i am using the modern function of react native. I am not using class here.
my code is this App.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Routes from './Routes';
export default function App() {
return (
<Routes/>
);
}
And Route.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { render } from 'react-dom';
/// define all components here
import HomeScreen from './src/Component/HomeScreen';
import DetailScreen from './src/Component/DetailScreen';
// Routes defination
export default function Routes(){
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailScreen,
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
return(
<AppContainer/>
);
}
And Homescreen.js from where i need this to be jump to detail screen
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
export default function HomeScreen() {
return (
<View>
<Text>I am testing from the home screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}></Button>
</View>
)
}
And DetailScreen.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
export default function DetailScreen() {
return (
<View>
<Text>I am testing from the detail screen</Text>
</View>
)
}

Answer 1

Try withNavigation from react-navigation, you're seeing this error because you are not passing navigation from the parent.
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {withNavigation} from 'react-navigation'
export default withNavigation(function HomeScreen() {
return (
<View>
<Text>I am testing from the home screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}></Button>
</View>
)
})

Answer 2

Its fix
export default function HomeScreen(props) {
return (
<View>
<Text>I am testing from the home screen</Text>
<Button
title="Go to Details"
onPress={() => props.navigation.navigate('Details')}></Button>
</View>
)
}
because this.props only coming in class component but in function component its coming without a 'this'