[Bug]: Using <Images> with native views on iOS causes touch interation to stop working for part of map

[richinfante]

Mapbox Implementation

Mapbox

Mapbox Version

11.0.0

React Native Version

0.74.5

Platform

iOS

@rnmapbox/maps version

10.1.31

Standalone component to reproduce

import React from 'react';
import { View } from 'react-native';
import {
  Images,
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
  Image,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

class BugReportExample extends React.Component {
  state = {
    radius: 20,
  };

  render() {
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

    return (
      <>
        <MapView style={styles.mapView}>
          <Camera
            defaultSettings={{
              centerCoordinate: [-74.00597, 40.71427],
              zoomLevel: 10,
            }}
          />

          <Images>
            {
              // some large amount of image icons, does not matter if used or not:
              ['',2,3,4,5,6,7,8,9,10,11,12].map((i) => (
                <Image key={"example" + i} name={"example" + i}>
              <View style={{ width: 20, height: 20, backgroundColor: 'red' }}/>
            </Image>
              ))
            }
          </Images>

          <ShapeSource id={'shape-source-id-0'} shape={features}>
            <CircleLayer
              id={'circle-layer'}
              style={circleLayerStyle}
              slot={'bottom'}
            />
            <SymbolLayer
              id="symbol-id"
              style={{
                iconImage: ['get', 'icon'],
              }}
              slot={'middle'}
            />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default BugReportExample;

Observed behavior and steps to reproduce

When using larger amounts of react native views in an Image set rendered via <Image>, touch interaction stops working. The region where this occurs on the top of the map is approximately equal to the sum of all the images.

Using the example component, all touches within the top ~260 pixels of the map do not work.

I have observed on iOS, have not tested on android. See below for a workaround I have found.

Expected behavior

Map touch interaction should work regardless of use of <Image> for rendering native views as pins

Notes / preliminary analysis

I have found the following workaround:

We can wrap the <Images> in a zero-height view, to resolve the issue. It appears these native views are being rendered invisible on top of map, with a width of 100% and height approximately equal to the sum of the heights of the images.

<View style={{height: 0}}>
<Images>
{
  ['',2,3,4,5,6,7,8,9,10,11,12].map((i) => (
    <Image key={"example" + i} name={"example" + i}>
      <View style={{ width: 20, height: 20, backgroundColor: 'red' }}/>
    </Image>
  ))
}
</Images>
</View>

Additional links and references

No response