[Bug]: App freeze on iOS with @rnmapbox/maps + react-native@0.80.0 when adding elements to MapView

[lvothnrv]

Mapbox Implementation

Mapbox

Mapbox Version

11.8.0

React Native Version

0.80.0

Platform

iOS

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

When using @rnmapbox/maps with react-native@0.80.0, the app freezes on iOS as soon as I add any child element (e.g. ShapeSource, Layer) to the MapView.
This happens with any version of @rnmapbox/maps I tried.

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[lvothnrv]

However, I noticed that if I render the MapView, wait about 1 second, and then add the child elements, everything works as expected.
It seems there is a significant issue when adding layers or components immediately after the initial map render.

[spyshower]

@lvothnrv just to clarify, by "add" you mean render, right?

Also, I am not an expert on rnmapbox but try to check and maybe update the underlying mapbox version :)

[lvothnrv]

@lvothnrv just to clarify, by "add" you mean render, right?

Also, I am not an expert on rnmapbox but try to check and maybe update the underlying mapbox version :)

Yes, that's it, when you try to render an element directly inside the parent, it freezes the application.

[LeQuy-123]

I had the same issue and worked around it by adding a flag in onDidFinishLoadingMap to mark completion before loading other elements.

[VishalJ99]

Also running into this - any fix found?

[HarshaZeitview]

hi @mfazekas could you please look into this issue.

[lvothnrv]

I tested @rnmapbox/maps@10.1.40 and it seems like the freezing issue is gone.
However, the Android patch for the error "Only safe (?.) or non-null asserted (!!.) calls are allowed on a nullable receiver of type 'ReadableArray?'" is still missing.
This critical bug — which the community had already addressed with an unofficial patch in 10.1.39 — was completely omitted from 10.1.40.

[HarshaZeitview]

Hi @lvothnrv still i am facing this issue on IOS on version 10.1.40.
is this issue is fixed in the latest version @mfazekas ?

[simon-abbott]

I tested @rnmapbox/maps@10.1.40 and it seems like the freezing issue is gone. However, the Android patch for the error "Only safe (?.) or non-null asserted (!!.) calls are allowed on a nullable receiver of type 'ReadableArray?'" is still missing. This critical bug — which the community had already addressed with an unofficial patch in 10.1.39 — was completely omitted from 10.1.40.

This build issue is tracked in #3753.

[lvothnrv]

Hi @lvothnrv still i am facing this issue on IOS on version 10.1.40. is this issue is fixed in the latest version @mfazekas ?

Hi, for my part I thought it was good but in fact it always freezes but much less 😕

[lvothnrv]

Hi @whiteHatCip , do you know what could be causing these freezes on iOS please ?

[whiteHatCip]

Hi @whiteHatCip , do you know what could be causing these freezes on iOS please ?

Unfortunately I won't be able to check this out until tomorrow night, in two days at most. The app I am developing using rnmapbox is heavily based on layer presentation, and I don't have any problem, but I don't show layers as soon as the map loads, therefore I will need to inspect the behavior of your specific use case.

[whiteHatCip]

Hi @whiteHatCip , do you know what could be causing these freezes on iOS please ?

I just tried to run my app replacing the base App entry-point component in my project (meaning the one placed in the App.tsx file) with the component you used as a "Standalone component to reproduce" the bug. I could NOT reproduce the bug. The application runs smoothly with no freeze. I don't know how to help you, but I must think that the culprit could be something different than the rnmapbox package