iOS: Adding PointAnnotation with custom child causes map performance to drop

---

Describe the bug
On iOS device, when I add a PointAnnotation component with custom children (works well with default marker - i.e. no children or when using Callout component), when I start moving the map or zooming in and out, the framerate drops down significantly

To Reproduce
Create a MapView with a single PointAnnotation component, with children (e.g. View component). Then start zooming in and out and moving the map around. You will see a significant drop in framerate.

Example:

import React from 'react';
import {
  MapView,
  PointAnnotation,
  Camera,
} from '@react-native-mapbox-gl/maps';

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-122.452652, 37.762963]} zoomLevel={14} />
        <PointAnnotation
          id='idPointAnnotation'
          coordinate={[-122.452652, 37.762963]}
        >
          <View
            style={{
              width: 40,
              height: 40,
              backgroundColor: 'red',
            }}
          />
        </PointAnnotation>
      </MapView>
    );
  }
}

Expected behavior
The framerate should not drop.

Actual behavior
Framerate drops when moving or zooming the map.

Screenshots If you look at the performance monitor, you will see a significant drop in framerate.

Versions (please complete the following information):

• Platform: iOS
• Platform OS: iOS 14.4
• Device: iPhone X
• Emulator/ Simulator: no
• Dev OS: macOS 10.15.1
• react-native-mapbox-gl Version 8.2.0-beta1
• React Native Version 0.63.3

Additional context
Works well if remove the View component from inside the PointAnnotation component.

[sdacunha]

Hi @ferdicus,

Facing the same issue unfortunately. Using the Expo managed workflow + the expo plugin with 8.3.0. Unfortunately, on iOS, adding a child to the PointAnnotation component causes rendering issues whenever I move (fitBounds, setCamera, etc) the camera - seems mostly tied to zooms since panning doesn’t cause noticeable drops .

For now for the static pins I can use a ShapeSource + SymbolLayer, but I feel like this will become a blocker when I need dynamic content to be rendered.

FWIW, the same code does not experience frame drops on Android.

EDIT: Just got some more context potentially that may be helpful:

I ended up forking the project and hacking around the podspec + expo plugin to support the metal pre-release of MapLibre (5.13.0-pre.1) and the issue seems to have disappeared, so it could possibly be an upstream issue with the version of MapBox (5.9.0) used (seems that above it works with 6.3.0, but I am unable to test since I do not use MapBox tileservers anymore).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.