[Bug]: Possible memory leak with Map

Mapbox Implementation

Mapbox

Mapbox Version

10.9.0

Platform

iOS

@rnmapbox/maps version

10.0.0-beta.54

Standalone component to reproduce

import MapboxGL from '@react-native-mapbox-gl/maps'
import * as React from 'react'
import { View } from 'react-native'
import { Footer } from '../components'

export default function MapStripped() {
  return (
    <View style={{ flex: 1 }}>
      <MapboxGL.MapView styleURL="mapbox://styles/mapbox/streets-v11" style={{ flex: 1 }} />
      <Footer />
    </View>
  )
}

Observed behavior and steps to reproduce

Note: Footer in example code is simply a tab bar to navigate between screens

The map is not cleaning up its memory usage when unmounted (like on a screen switch) and subsequent loads of the map screen adds to the memory consumption until eventually the app crashes for OOM. Our app is using react-navigation with a drawer navigator where the screens are unmounted on blur.

Here is the memory graph switching back and forth between the barebones map screen provided and our Home screen:

Here is the memory graph for the switching back and forth between the same Home screen and another one of our screens that has a lot of images on it. The initial spike at the beginning of the graph is the map screen.

Expected behavior

Map should properly clean up its memory consumption when unmounted

Notes / preliminary analysis

No response

Additional links and references

No response

[mfazekas]

@mysport12 thanks much for the report!

Using memory graph in Xcode ( ) and filtering for RCTMGLMapView it’s easy to see that it’s indeed a leak, caused by retain cycles. Added a fix for it in #2372

[mysport12]

Noted. Happy to make any changes you propose