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

[michalpierzchlewicz]

---

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.

[ferdicus]

hey, thanks for opening a ticket - which mapbox-sdk version are you using?

[badredaha]

🙋‍♂️🙋‍♂️🙋‍♂️ same thing Here :/

[ferdicus]

again, underlying native SDK?
Did you try with another version?

[badredaha]

5.9.0

[ferdicus]

Can you try with 6.3.0 and report back please.
Also, just to be super sure - this is on physical devices, yes?

[DimaDP]

Same thing with markerView on ios 14.6 and no problem on 13. *

[appstart-lt]

Ran into the exact same issue.

Resolved by:

1. Upgrading RN library to 8.2.1.
2. Adding $ReactNativeMapboxGLIOSVersion = '~> 6.3.0' to the Podfile.

[ferdicus]

hey @michalpierzchlewicz, does this still occur?
I assumed this was pretty imported to you and the other people from the company upvoting your initial description?

Did you manage to fix this by upgrading?

Without any feedback we can't look at this/ will close due to inactivity.

Cheers 🍻

[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).

[Pietro-Putelli]

Hi, using the latest version of the library I'm still get the same problem!

[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.