update (un-)mount example

example/src/examples/Map/MapUnMount.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import Mapbox from '@rnmapbox/maps';
+import { Button } from '@rneui/base';
+
+import sheet from '../../styles/sheet';
+import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc
+
+const MapUnMount = () => {
+  const [isMounted, setIsMounted] = useState(true);
+
+  useEffect(() => {
+    Mapbox.locationManager.start();
+
+    return (): void => {
+      Mapbox.locationManager.stop();
+    };
+  }, []);
+
+  return (
+    <>
+      <Button
+        onPress={() => setIsMounted((mounted) => !mounted)}
+        title={isMounted ? 'unmount MapView' : 'mount MapView'}
+      />
+      {isMounted ? (
+        <Mapbox.MapView
+          styleURL={Mapbox.StyleURL.Dark}
+          style={sheet.matchParent}
+          testID={'show-map'}
+        >
+          <Mapbox.Camera followZoomLevel={12} followUserLocation />
+
+          <Mapbox.UserLocation />
+        </Mapbox.MapView>
+      ) : null}
+    </>
+  );
+};
+
+export default MapUnMount;
+
+/* end-example-doc */
+
+const metadata: ExampleWithMetadata['metadata'] = {
+  title: 'Map (un-)mount',
+  tags: [],
+  docs: `
+Showing and hiding the the map should not lead to increased memory consumption, use this example to check it on the profiler.
+`,
+};
+MapUnMount.metadata = metadata;

example/src/examples/Map/ShowMap.tsx

@@ -15,11 +15,9 @@ const ShowMap = () => {
         data: (Mapbox.StyleURL as any)[key], // bad any, because enums
       };
     })
-    .sort(onSortOptions)
-    .concat({ data: 'mount', label: '(un)mount' });
+    .sort(onSortOptions);
 
   const [styleURL, setStyleURL] = useState({ styleURL: _mapOptions[0].data });
-  const [isMounted, setIsMounted] = useState(true);
 
   useEffect(() => {
     Mapbox.locationManager.start();
@@ -44,26 +42,17 @@ const ShowMap = () => {
         selectedIndex={_mapOptions.findIndex(
           (i) => i.data === styleURL.styleURL,
         )}
-        onPress={(index) => {
-          const { data } = _mapOptions[index];
-          if (data === 'mount') {
-            setIsMounted((m) => !m);
-            return;
-          }
-          onMapChange(index, data);
-        }}
+        onPress={(index) => onMapChange(index, _mapOptions[index].data)}
       />
-      {isMounted ? (
-        <Mapbox.MapView
-          styleURL={styleURL.styleURL}
-          style={sheet.matchParent}
-          testID={'show-map'}
-        >
-          <Mapbox.Camera followZoomLevel={12} followUserLocation />
+      <Mapbox.MapView
+        styleURL={styleURL.styleURL}
+        style={sheet.matchParent}
+        testID={'show-map'}
+      >
+        <Mapbox.Camera followZoomLevel={12} followUserLocation />
 
-          <Mapbox.UserLocation onPress={onUserMarkerPress} />
-        </Mapbox.MapView>
-      ) : null}
+        <Mapbox.UserLocation onPress={onUserMarkerPress} />
+      </Mapbox.MapView>
     </>
   );
 };

example/src/examples/Map/index.js

@@ -6,6 +6,7 @@ export { default as PointInMapView } from './PointInMapView';
 export { default as ShowAndHideLayer } from './ShowAndHideLayer';
 export { default as ShowClick } from './ShowClick';
 export { default as ShowMap } from './ShowMap';
+export { default as MapUnMount } from './MapUnMount';
 export { default as ShowMapLocalStyle } from './ShowMapLocalStyle';
 export { default as ShowRegionDidChange } from './ShowRegionDidChange';
 export { default as SourceLayerVisibility } from './SourceLayerVisibility';