Modal not displaying in react-native? - view

Question

Hey guys i am trying to show modal on click of map marker but i fail to see any modal on marker click can anybody help me out what is the issue. I am using Modal from https://github.com/maxs15/react-native-modalbox
Here is the code:
import Modal from "react-native-modalbox";
export default class App {
openModal4(id) {
this.refs.modal4.open();
}
render() {
return (
<View style={style.mainContainer}>
<MapView
ref="map"
showUserLocation={true}
region={this.state.region}
onRegionChange={this.onRegionChange}
onRegionChangeComplete={this.onRegionChangeComplete}
style={styles.map}
rotateEnabled={false}
showsCompass={false}
>
{this.state.markers.map(function(marker) {
return (
<MapView.Marker
coordinate={marker.latlng}
key={marker.id}
onPress={this.openModal4}
/>
);
})}
</MapView>
<View
style={{
position: "absolute",
width: windowsWidth,
height: windowsHeight - 100,
alignItems: "center",
justifyContent: "center"
}}
>
<Image source={require("./assets/map-marker.png")} />
</View>
<Modal
style={[styles.modal, styles.modal4]}
position={"bottom"}
ref={"modal4"}
/>
</View>
);
}
}
can anybody help me out? Thanks in advance.

Answer 1

You should make changes, to bind this in callbacks
read this article Don't Use Bind When Passing Props
openModal4 = (id) => {
this.refs.modal4.open();
}

Answer 2

Guys Binding was the issue which gets solved after using arrow function =>
here is the code
openModal4(id){
this.refs.modal4.open();
}
{this.state.markers.map((marker) => {
return(
<MapView.Marker coordinate={marker.latlng} key={marker.id} onPress={this.openModal4} />
);
})}
And you need to bind the function in constructor as it consist of 'this'
this.openModal4 = this.openModal4.bind(this)
hope my struggle would help others