how to create a overlay marker on map which stays is center of the screen in react-native

Question

hey i am trying to add overlay marker which stays in center of the screen like this even if we scroll or zoom the screen

i tried moving marker from its initial position but it lags behind when we move screen fast. so i want to set marker image in the center of the screen

here is the code what i have done to move marker:

componentDidMount: function() {
    this.fetchData();
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }
        });
      },
    );
    this.watchID = navigator.geolocation.watchPosition((position) => {
      const newRegion = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      }

      this.onRegionChange(newRegion);
    });

  },

  componentWillUnmount: function() {
    navigator.geolocation.clearWatch(this.watchID);
  },

  onRegionChange(region) {
    this.setState({ region });
  },

so how can i overlay a marker image?

Answer 1

I see two options to solve this issue:

The MapView way

Just add a MapView.Marker with the position of your region variable:

  <MapView
    style={styles.map}
    region={this.state.region}
    onRegionChange={this.onRegionChange.bind(this)}>
    <MapView.Marker
      coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}
    />
  </MapView>

In my opinion this is the "correct" way, though I face the issue, that the Marker updates its position with a small delay: As I move the map, it stays on its position in respect to the map and a after a few hundred milliseconds it jumps back to the center of the map (suggestions on how to debug or fix this issue are very welcome).

The second option overcomes this issue

The Icon way

Put your MapView inside a View, that fills the whole space. Inside the View add a centered Icon and your map:

<View style={StyleSheet.absoluteFillObject}>
  <Icon name="map-marker" 
    style={{    
      zIndex: 3,
      position: 'absolute',
      marginTop: -37,
      marginLeft: -11,
      left: '50%',
      top: '50%'}} 
    size={40}
    color="#f00" />
  <MapView
    style={StyleSheet.absoluteFillObject}
    region={this.state.region}
    onRegionChange={this.onRegionChange.bind(this)}>
  </MapView>
</View>

Note the use of zIndex to overlay it in front of the MapView and marginTop/marginLeft which can be used to place the needletip of the marker on the center.