Go to detail page in a React-Native Flatlist - react-native

Question

I made a Flatlist navigate to the detail screen when a row is clicked.
I created 4 files.
file1:
index.js
import React from 'react';
import List from "./list";
import Detail from "./detail";
import { createStackNavigator, createAppContainer } from "react-navigation";
const AppNavigator = createStackNavigator({
ListScreen: {
screen: List,
},
DetailScreen: {
screen: Detail,
},
}, {
initialRouteName: 'ListScreen',
});
export default createAppContainer(AppNavigator);
And detail.js
export default class DetailScreen extends React.PureComponent {
render() {
return (
<View
<Text>Home Details!</Text>
</View>
);
}
}
list.js
import Products from "./products";
export default class ListScreen extends React.PureComponent {
...
renderItem({ item }) {
return <Products product={item}/>
}
render() {
return (
<View style={{margin:5}}>
<FlatList
data={this.state.products}
renderItem={this.renderItem}
keyExtractor={(item,index) => item.id.toString()}
/>
</View>
);
}
And Finally
products.js
export default class ProductsType2 extends React.PureComponent {
_onPress = () => {
this.props.navigation.navigate('DetailScreen', this.props.product.id);
};
render() {
const { product} = this.props;
//const { navigate } = this.props.navigation; //get error w
return (
<Card>
<CardItem cardBody button onPress={this._onPress}>
<Image
style={{height: 140, width: 140, flex: 1}}
source={{uri: product.thumbnail}} />
</CardItem>
</Card>
);
}
}
when I press it I can't get the details screen to show up.
I get this error:
Cannot read property 'navigate' of underfined

Answer 1

use withNavigation (HOC) to access navigation props from products.js. That component not inside of the createStackNavigator, so export your class with withNavigation method and you can access the navigation props.
import { withNavigation } from 'react-navigation';
...
export default withNavigation(ProductsType2)
https://reactnavigation.org/docs/en/connecting-navigation-prop.html