How to drag my current location marker in react native maps?

I have implemented a google map with react native map npm. And map view is showing but the current location marker is not visible in the device but in the simulator, markers is showing.

Now trying to achieve drag the current location marker to get lat long val. But I am not able drag the marker of current location marker and marker is not visible in mapView.

here is the code I tried so far:

 <MapBG> <MapView showsUserLocation ref={map => { this.map = map }} data={markers} initialRegion={initialRegion} renderMarker={renderMarker} onMapReady={this.onMapReady} showsMyLocationButton={true} showsUserLocation={true} onRegionChange={this.onRegionChange} onPress={this.onMapPress} onRegionChangeComplete={this.onRegionChange} style={StyleSheet.absoluteFill} textStyle={{ color: '#bc8b00' }} containerStyle={{ backgroundColor: 'white', borderColor: '#BC8B00' }} > <Marker // coordinate={{ latitude: 51.5078788, longitude: -0.0877321 }} onPress={() => this.setState({ visible: true }) + setTimeout(() => alert(this.state.visible), 200)} coordinate={this.onRegionChange.latitude, this.onRegionChange.longitude} pinColor="green" // zIndex="9" // image={require("../../assets/icons/marker.png")} draggable={true} ><MarkerSvg /></Marker> </MapView> </MapBG> 

Any help much appreciated pls...

1 Answer

You can not directly put static coordinate and do drag and drop. You have to manage state so that when you drag your marker to another then according to its longitude and latitude change.

const Map = () => { const [pin, setPin] = useState({ latitude: 37.78825, longitude: -122.4324, }); return ( <MapView .......... <Marker draggable coordinate={pin} onDragEnd={e => { setPin(e.nativeEvent.coordinate); }} /> </MapView> ); };