react native stack navigation button onpress not working - react-native

Question

I am new in react native and trying to navigate between screens. I made two components: Home.js and Product.js. in App.js I try to show the home. There is a button in homescreen but when I click the button it does not respond. I want to go productList after clicking the button.
home.js:
import React from 'react';
import { StyleSheet, View, Text, Button,ScrollView} from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class Home extends React.Component{
render(){
return(
<ScrollView>
<View>
<Button
title="Go to About"
onPress={() => this.props.navigation.navigate('ProductList')}
/>
</View>
</ScrollView>
)
}
}
export default Home;
ProductList.js:
import React from 'react';
import { StyleSheet,Text,View,Image,ScrollView,AppRegistry,FlatList,Button } from 'react-native';
import ProductImages from './ProductImages';
class ProductList extends React.Component{
render(){
return(
<View>
<Text>Product List</Text>
</View>
);
}
}
export default ProductList;
App.js:
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './components/Home';
import ProductList from './components/ProductList';
class App extends React.Component{
render(){
return <AppContainer />;
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: Home,
},
Product: {
screen: ProductList
},
});
export default AppContainer = createAppContainer(AppNavigator);

Answer 1

import React from "react";
import { StyleSheet, View, Text, Button, ScrollView } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
class Home extends React.Component {
render() {
return (
<ScrollView>
<View>
<Button
title="Go to About"
onPress={() => this.props.navigation.navigate("Product")}
/>
</View>
</ScrollView>
);
}
}
export default Home;
change onPress in Home.js ProductList to Product which you have defined in App.js