Marker on wrong position when using Pressable

[Tim4497]

Describe the bug
MarkerView shifting position if has Pressable as child

To Reproduce
If you use a Pressable in MarkerView the View gets rendered in the wrong position

Example:

const App = () => {

  const coordBerlin = [13.41053, 52.52437]

  const [cameraCoord, setCameraCoord] = useState([10.451526, 51.165691])
  const [cameraZoom, setCameraZoom] = useState(4);

  return (
    <View style={styles.page}>
      <MapboxGL.MapView
        style={styles.map}
      >
        <MapboxGL.Camera
          centerCoordinate={cameraCoord}
          zoomLevel={cameraZoom}
        />
        <MapboxGL.MarkerView
          id='Berlin'
          coordinate={coordBerlin}
        >
          <Pressable
            onPress={() => {
              setCameraCoord(coordBerlin);
              setCameraZoom(10);
            }}
          >
            <Image
              source={require('./assets/pin.png')}
            />
          </Pressable>
        </MapboxGL.MarkerView>
      </MapboxGL.MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  map: {
    flex: 1
  }
});

If it's a build/startup issue please include full steps to reproduce from react-native init ...

Example:

react-native init sample --version [email protected]
cd sample
npm install rnmapbox/maps#main --save
# or released version `npm install @rnmapbox/[email protected] --save`
react-native run-android

Expected behavior
It should render a marker in Berlin

Actual behavior
It renders the marker shifted to the left (happens to every marker)

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• Platform: Android
• Platform OS: API 31
• Device: Pixel emulator
• Emulator/ Simulator: yes
• Dev OS: OSX 12.3.1
• @rnmapbox/maps Version 8
• Mapbox GL version ?
• React Native Version > 60

Additional context
Add any other context about the problem here.

[Tim4497]

I solved it by wrapping the MarkerView inside the Pressable. But could anyone explain why its shifting?

[1mike12]

Have you checked the anchor prop? I had to use it to control the center of a combined pin and label. Mapbox doesn't know that the bottom of the pin is the actual target to center on the lat,long, vs some other arbitrary point of the component without this.

specifies the anchor being set on a particular point of the annotation. The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0], where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner. Note this is only for custom annotations not the default pin view. Defaults to the center of the view.

https://github.com/rnmapbox/maps/blob/main/docs/MarkerView.md

[mfazekas]

Complete component:

import React, { useState } from 'react';
import { Button, Image, Pressable, View, StyleSheet } from 'react-native';
import MapboxGL, {
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
} from '@rnmapbox/maps';

const App = () => {
  const coordBerlin = [13.41053, 52.52437];

  const [cameraCoord, setCameraCoord] = useState([10.451526, 51.165691]);
  const [cameraZoom, setCameraZoom] = useState(4);

  return (
    <View style={styles.page}>
      <MapboxGL.MapView style={styles.map}>
        <MapboxGL.Camera
          centerCoordinate={cameraCoord}
          zoomLevel={cameraZoom}
        />
        <MapboxGL.MarkerView id="Berlin" coordinate={coordBerlin}>
          <Pressable
            onPress={() => {
              setCameraCoord(coordBerlin);
              setCameraZoom(10);
            }}
          >
            <Image source={require('../assets/pin.png')} />
          </Pressable>
        </MapboxGL.MarkerView>
      </MapboxGL.MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default App;