CODEWITHSUNDEEP
androidiosreact-nativecompatibilityreact-native-maps
TaouBen
TaouBen

Reputation: 1315

How to enable centering Marker on Map in IOS using React native?

I am using Map component from react-native-maps, and I display many markers in it, but whenever click on a Marker on Android the marker clicked is centered automatically, while this behavior does not exist in IOS.

Is there a way to make markers get centered too in IOS, or at least disable it from Android. I want to have the same behavior in both OSs.

Any help or idea would be much appreciated.

Upvotes: 3

Views: 1670

Answers (1)

Marian Beuther
Marian Beuther

Reputation: 76

you could either set

<MapView
moveOnMarkerPress={false}
...
/>

which would disable the android-behavior, or you could handle the MarkerPress on iOS and center the MapView on it, something like this:

 <MapView
    ...
    ref={ref => {
       this.map = ref;
    }}
    >
      {this.state.markers.map(marker => (
        <Marker
          ...
          onSelect=(({coordinate}) =>  this.map.animateCamera({center: coordinate}, { duration: 2000 }))
        />
      ))}
    </MapView>

Upvotes: 2

Related Questions