CODEWITHSUNDEEP
reactjsreact-nativegoogle-mapsandroid-emulatorreact-native-maps
Yuji
Yuji

Reputation: 441

Google map marker moves wrongly when I holding to press for drag in react native maps

I want to drag a marker in react native mapview.
Drag is ok, but for the first time when I press the marker, it moves a little into above.
I want to fix this unexpected move.
I'm not sure what's the reason is.
You can check the current situations here.
The source code is as follows.

import React, {useState, useEffect} from 'react'
import { View } from 'react-native'
import MapView, {Marker} from 'react-native-maps'

const DEFAULT_DELTA = {latitudeDelta: 0.015, longitudeDelta: 0.0121}

const initialLoc = {
  latitude: 24,
  longitude: 75
}

const App = () => {
  const [location, setLocation] = useState(initialLoc)

  useEffect(() => {    
    navigator.geolocation.watchPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({
          latitude,
          longitude
        })          
      },
      error => { 
        console.error(error)
      }, {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 10000
      }
    );
  }, [])

  const onMarkPress = (e) => {    
    const {coordinate} = e.nativeEvent
    setLocation(coordinate)    
  };

  const onMapPress = (e) => {    
    const {coordinate} = e.nativeEvent
    setLocation(coordinate)    
  };

  return (
    <View style={{flex:1}}>
      {location && (
        <MapView
          style={{flex: 1}}
          initialRegion={{
            latitude: location.latitude,
            longitude: location.longitude,
            ...DEFAULT_DELTA       
          }}
          onPress={onMapPress}
          >
          <Marker draggable
            coordinate={location}
            onDragEnd={onMarkPress}
          />        
        </MapView>
      )}
    </View>
  )
}

export default App

Upvotes: 4

Views: 1509

Answers (1)

evan
evan

Reputation: 5699

This behavior is also displayed in the DraggableMarkers.js example of react-native-maps, so your code implementation is not the issue here.

It may have already been reported on the GitHub repo but I haven't been able to find it so I recommend you file a bug for this here.

Hope this helps!

Upvotes: 2

Related Questions