Can't pass value as function in React Navite Element Button - reactjs

Question

I want to display model with the key value from array, but I can't do it, and I don't understand the problem.
this is react native in Expo and I have used react native elements
import React, {Component} from "react";
import { ScrollView, Text, Linking, View, Modal } from "react-native";
import { Card, Button } from "react-native-elements";
import PriceDetail from "./PriceDetail";
const images = [
{
key: 1,
name: "Nathan Anderson",
image: require("../images/1.jpg"),
url: "https://unsplash.com/photos/C9t94JC4_L8"
},
{
key: 2,
name: "Jamison McAndie",
image: require("../images/2.jpg"),
url: "https://unsplash.com/photos/waZEHLRP98s"
},
{
key: 3,
name: "Alberto Restifo",
image: require("../images/3.jpg"),
url: "https://unsplash.com/photos/cFplR9ZGnAk"
},
{
key: 4,
name: "John Towner",
image: require("../images/4.jpg"),
url: "https://unsplash.com/photos/89PFnHKg8HE"
}
];
class Home extends Component {
state = {
selectedItem : null,
mvisible : false
}
modalClosedHandler = () => {
this.setState({
mvisible: false,
selectedItem: null
});
};
productSelectedHandler = key => {
this.setState(prevState => {
return {
selectedItem: prevState.images.find(image => {
return image.key === key;
})
};
});
console.log(selectedItem);
};
showModal = (key) => {
this.setState({
mvisible: true,
selectedItem: key
});
}
render () {
return (
<View style={{ flex: 1 }}>
<Modal
visible={this.state.mvisible}
onRequestClose={this.modalClosedHandler}>
<View style={{flex : 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Hello this is modal{this.state.selectedItem}</Text>
<Button title="Close" onPress={this.modalClosedHandler}/>
</View>
</Modal>
<ScrollView contentContainerStyle={{ paddingVertical: 20 }}>
{images.map(({ name, image, url, key }) => (
<Card title={`Product ${key}`} image={image} key={key}>
<Text style={{ marginBottom: 10 }}>
Photo by {name}.
</Text>
<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={(key)=>this.showModal(key)}
/>
</Card>
))}
</ScrollView>
</View>
);
}
}
export default Home;
I am new to react native.

Answer 1

You wont get key in the first parameter of button's onPress.
This is wrong:
<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={(key)=>this.showModal(key)}
/>
You already have a key at higher level, so you should use this code:
<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={()=>this.showModal(key)}
/>

Answer 2

I'm not sure to understand well but if you have a problem while calling this.showModal is because you have an extra "key".
Replace
<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={(key)=>this.showModal(key)}
/>
By
<Button
backgroundColor="#03A9F4"
title="VIEW NOW"
onPress={()=>this.showModal(key)}
/>