Fixing unmounting of layers during runtime (v10, iOS)

[rastapasta]

Description

In the new swift implementation, the MapView's removeReactSubview is never called by the RTCManager, resulting in removed React Components not being unmounted from the map.

To solve this, the corresponding super methods are called resulting in the removeReactSubview method being called and layers removed from the map.

Checklist

• I have tested this on a device/simulator for each compatible OS
• I formatted JS and TS files with running yarn lint:fix in the root folder
• I updated the documentation with running yarn generate in the root folder
• I mentioned this change in CHANGELOG.md
• I updated the typings files (index.d.ts)
• I added/ updated a sample (/example)

Example code

const App = () => {
  const [visible, setVisible] = useState(false)

  return (
    <MapView
      onPress={() => setVisible(!visible)}
      style={{flex: 1}}>

      {visible && <RasterSource
        id="source"
        tileUrlTemplates={['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg']}>

        <RasterLayer
          id="raster"
          style={{rasterOpacity: 0.5}}
        />
      </RasterSource>}
    </MapView>
  )
}

[mfazekas]

@rastapasta can you add a short sample code, where the issue occurs.
I assume something like this, and when setting visible to false the component still rendered on the map?!

<MapView>
   {visible && <ShapeSource>
       <CircleLayer .../>
     </ShapeSource>
   }
</MapView>

[mfazekas]

Interesting that we haven't called insertReactSubview in prev implementation but we did overwrote reactSubviews.

Not sure if it worth the trouble to not do the pre v10 implementation, calling super.insertReactSubview sounds simpler.

See

maps/ios/RCTMGL/RCTMGLMapView.m

Lines 217 to 220 in f42cacc

	- (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex {
	[self addToMap:subview];
	[_reactSubviews insertObject:(UIView *)subview atIndex:(NSUInteger) atIndex];
	}

[rastapasta]

Found that interesting as well when digging through the code to explain its behavior, though found no advantage of re-implementing the reactSubviews as done previously.

[rastapasta]

@mfazekas your guess was spot on! added an example to the PR description.

[mfazekas]

The only difference I can think of is that views were not added, to MapView before.

So this

<MapVIew>
  <View style={{backgroundColor: 'red', width: 100, height: 100}} />
</MapView>

will now add a view into MapView, not sure if that's works on android.

Let's go with this implementation for now, we can revisit later.