got this.props.navigation.navigate error in onpress - react-native

Question

renderItemTop ({item}) {
return (
<TouchableOpacity
onPress={()=>this.props.navigation.navigate('DetailUpMovie')}
>
<Card
containerStyle={stylesTop.ImageCardStyle}
image={{ uri: `${BASE_IMAGE_URL}original${item.poster_path}` }}
imageStyle={{ width: CardWidthTop, height: CardHeightTop }}
imageProps={{ borderRadius: 15, resizeMode:'stretch' }}
/>
</TouchableOpacity>
);
}
render () {
const { data } = this.state;
return (
<View style={stylesTop.ViewTopstyle}>
<View style={stylesTop.InnerViewstyle}>
<Text style={stylesTop.TitleTopStyle}>Top Rated Movie</Text>
<Button
buttonStyle={stylesTop.btnStyle}
title='More'
titleStyle={stylesTop.btnTitleStyle}
type='clear'
/>
</View>
<FlatList
data={data}
renderItem={this.renderItemTop}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
horizontal={true}
marginTop={5}
marginLeft={10}
marginRight={10}
marginBottom={5}
/>
</View>
);
}
this is where i want navigate to other screen in renderitem fuction but when i press on the item to navigate o got error tis.props.navigation.navigate undefined is not an object in another class i make all stack and bottomnavigator
please help

Answer 1

You can pass the navigation prop to your custom component via something like this:
You just need to pass the navigation prop to function to access the navigation action
const MyComponent = props => {
const { item, navigation } = props
return (
<TouchableOpacity
onPress={() => navigation.navigate('DetailUpMovie')}
>
<Card
containerStyle={stylesTop.ImageCardStyle}
image={{ uri: `${BASE_IMAGE_URL}original${item.poster_path}` }}
imageStyle={{ width: CardWidthTop, height: CardHeightTop }}
imageProps={{ borderRadius: 15, resizeMode:'stretch' }}
/>
</TouchableOpacity>
);
}
...
<FlatList
data={data}
renderItem={({item}) => (
<MyComponent item={item} navigation={this.props.navigation} />
)}
keyExtractor={item => item.id}
showsHorizontalScrollIndicator={false}
horizontal={true}
marginTop={5}
marginLeft={10}
marginRight={10}
marginBottom={5}
/>