MarkerView clipping issue on Android

[unendingblue]

trafficstars

Describe and reproduce the Bug

Children that are placed outside of a MarkerView's bounds (via absolute positioning) are clipped on Android. This issue is not present on iOS.

iOS	Android

import React from 'react';
import { View } from 'react-native';
import { MapView, MarkerView } from '@rnmapbox/maps';

const MarkerTestMap = () => {
  return (
    <MapView>
      <MarkerView coordinate={[0, -60]}>
        <View style={{ width: 100, aspectRatio: 1, backgroundColor: 'red' }}>
          <View style={{ position: 'absolute', top: -50, width: 100, height: 25, backgroundColor: 'green' }} />
        </View>
      </MarkerView>
    </MapView>
  );
};

The same bug exists on @rnmapbox/maps, though I honestly think that library will be left unmaintained in the future (it already kind of is).

@maplibre/maplibre-react-native Version

10.0.1

Which platforms does this occur on?

Android Emulator

Which frameworks does this occur on?

Expo

Which architectures does this occur on?

Old Architecture

Environment

-

[KiwiKilian]

I think this is a limitation of how the annotations work on Android. You could try around this by providing a proper sizing of the marker or trying to omit the absolute positioning.

[unendingblue]

Yeah, it can be worked around by setting a margin on the child - this way the margin area is counted into the view's dimension and absolute positioned elements inside it do get drawn.

Omitting the absolute positioning is not always optimal, especially when the markers rely on center anchoring. The added dimensions push the center of the "actual marker" away from the real lat/long coordinates. Think of a variable-height callout that is shown on marker tap.

If there is no easy fix for this issue then I think conditionally adding a margin using Platform.OS === "android" is a reasonable workaround for library users. I had tried the same in @rnmapbox/maps and the added margin affected tap detections when markers were close to each other (with pointerEvents properly configured for each view), but that doesn't seem to be the case with MapLibre.

[KiwiKilian]

@unendingblue did you also apply the patch for RNMapbox that was merged successfully to MapLibre?

[unendingblue]

hey @KiwiKilian, i haven't made a patch for RNML since i'm not actively using it at the moment. iirc the codebase of RNML is quite further behind RNMB so that patch isn't a simple drop-in replacement in this case.