Update docs from maps rnmapbox/maps@81844b9

Author: github-actions[bot]

docs/examples/Annotations/CustomCallout.png

@@ -0,0 +1,164 @@
+---
+title: CacheManagement
+tags: [Cache, Cache Management, Offline Manager, Offline Packs, Validate Cache, Invalidate Cache, Get Cache Size, Set Max Cache Size]
+custom_props:
+  example_rel_path: CacheManagement/CacheManagement.tsx
+custom_edit_url: https://github.com/rnmapbox/maps/tree/master/example/src/examples/CacheManagement/CacheManagement.tsx
+---
+
+Manages map cache.
+
+Uses the offline manager to manage the cache and the local storage in general. Shows how to invalidate cache to remove outdated tiles, how to clear the entire local storage from tiles and offline packs and to visualize the local storage usage amount.
+
+
+```jsx
+import React, { useState, useCallback } from 'react';
+import MapboxGL, { MapView, Camera } from '@rnmapbox/maps';
+import {
+  Alert,
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+
+import sheet from '../../styles/sheet';
+import { DEFAULT_CENTER_COORDINATE } from '../../utils';
+import BaseExamplePropTypes, {
+  BaseExampleProps,
+} from '../common/BaseExamplePropTypes';
+import { ExampleWithMetadata } from '../common/ExampleMetadata';
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    borderRadius: 3,
+    justifyContent: 'center',
+    padding: 8,
+    width: '100%',
+  },
+  buttonTxt: {
+    color: 'white',
+    textAlign: 'center',
+  },
+  control: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 16,
+    padding: 8,
+    width: '40%',
+  },
+  controlsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  textInput: {
+    borderBottomColor: 'grey',
+    borderBottomWidth: 1,
+    marginBottom: 8,
+    padding: 8,
+    width: '100%',
+  },
+});
+
+const CacheManagement: React.FC<Partial<BaseExampleProps>> = () => {
+  const [cacheSize, setCacheSize] = useState('');
+
+  const invalidateAmbientCache = useCallback(async () => {
+    await MapboxGL.offlineManager.invalidateAmbientCache();
+    Alert.alert('Ambient cache successfully invalidated');
+  }, []);
+
+  const resetDatabase = useCallback(async () => {
+    await MapboxGL.offlineManager.resetDatabase();
+    Alert.alert('Database successfully reset');
+  }, []);
+
+  const clearAmbientCache = useCallback(async () => {
+    await MapboxGL.offlineManager.clearAmbientCache();
+    Alert.alert('Ambient cache successfully cleared');
+  }, []);
+
+  const setMaximumAmbientCacheSize = useCallback(async () => {
+    const newMaxSize = parseInt(cacheSize, 10);
+    await MapboxGL.offlineManager.setMaximumAmbientCacheSize(newMaxSize);
+    Alert.alert(`Max cache size successfully set to ${newMaxSize} bytes`);
+  }, [cacheSize]);
+
+  const validateCacheInputValue = useCallback(
+    (value: string) => !isNaN(parseInt(value, 10)),
+    [],
+  );
+
+  const onChangeCacheSize = useCallback(
+    (value: string) => setCacheSize(value),
+    [],
+  );
+
+  const validSizeValue = validateCacheInputValue(cacheSize);
+  const buttonStyles = validSizeValue
+    ? styles.button
+    : [styles.button, { backgroundColor: 'grey' }];
+
+  return (
+    <>
+      <MapView style={sheet.matchParent}>
+        <Camera zoomLevel={16} centerCoordinate={DEFAULT_CENTER_COORDINATE} />
+      </MapView>
+
+      <View style={styles.controlsContainer}>
+        <View style={styles.control}>
+          <TouchableOpacity
+            onPress={invalidateAmbientCache}
+            style={styles.button}
+          >
+            <Text style={styles.buttonTxt}>Invalidate cache</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.control}>
+          <TouchableOpacity onPress={resetDatabase} style={styles.button}>
+            <Text style={styles.buttonTxt}>Reset database</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.control}>
+          <TextInput
+            onChangeText={onChangeCacheSize}
+            value={cacheSize}
+            placeholder="New max"
+            keyboardType="numeric"
+            style={styles.textInput}
+          />
+          <TouchableOpacity
+            onPress={setMaximumAmbientCacheSize}
+            style={buttonStyles}
+            disabled={!validSizeValue}
+          >
+            <Text style={styles.buttonTxt}>Set ambient max cache</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.control}>
+          <TouchableOpacity onPress={clearAmbientCache} style={styles.button}>
+            <Text style={styles.buttonTxt}>Clear ambient cache</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </>
+  );
+};
+
+CacheManagement.propTypes = {
+  ...BaseExamplePropTypes,
+};
+
+export default CacheManagement;
+
+
+```
+
+}
+

docs/examples/Annotations/Heatmap.png

@@ -15,7 +15,6 @@ import sheet from '../../styles/sheet';
 import gridPattern from '../../assets/grid_pattern.png';
 import smileyFaceGeoJSON from '../../assets/smiley_face.json';
 import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
-import Page from '../common/Page';
 
 const layerStyles = {
   background: {
@@ -35,7 +34,7 @@ class GeoJSONSource extends React.Component {
 
   render() {
     return (
-      <Page {...this.props}>
+      <>
         <MapboxGL.MapView
           ref={(ref) => (this.map = ref)}
           style={sheet.matchParent}
@@ -60,7 +59,7 @@ class GeoJSONSource extends React.Component {
             />
           </MapboxGL.ShapeSource>
         </MapboxGL.MapView>
-      </Page>
+      </>
     );
   }
 }