rnmapbox.github.io/docs/examples/CacheManagement.html at main · rnmapbox/rnmapbox.github.io · GitHub

21 lines (18 loc) · 90.3 KB

<!doctype html>

<head>

<title data-rh="true">CacheManagement | @rnmapbox/maps</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://rnmapbox.github.io/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://rnmapbox.github.io/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://rnmapbox.github.io/docs/examples/CacheManagement"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="CacheManagement | @rnmapbox/maps"><meta data-rh="true" name="description" content="Manages map cache."><meta data-rh="true" property="og:description" content="Manages map cache."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://rnmapbox.github.io/docs/examples/CacheManagement"><link data-rh="true" rel="alternate" href="https://rnmapbox.github.io/docs/examples/CacheManagement" hreflang="en"><link data-rh="true" rel="alternate" href="https://rnmapbox.github.io/docs/examples/CacheManagement" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://DSWU223Y1Q-dsn.algolia.net" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="@rnmapbox/maps RSS Feed">

</head>

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.

<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#FFFFFF;--prism-background-color:#282C34"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#FFFFFF;background-color:#282C34"><code class="codeBlockLines_e6Vv">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; </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div>

}</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-tags-row"><div class="col">Tags:<ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/cache">Cache</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/cache-management">Cache Management</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/offline-manager">Offline Manager</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/offline-packs">Offline Packs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/validate-cache">Validate Cache</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/invalidate-cache">Invalidate Cache</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/get-cache-size">Get Cache Size</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/docs/tags/set-max-cache-size">Set Max Cache Size</a></li></ul></div></div><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/rnmapbox/maps/tree/master/example/src/examples/CacheManagement/CacheManagement.tsx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/examples/Annotations/ShowPointAnnotation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Show Point Annotations</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/examples/CacheOffline/CacheManagement"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">CacheManagement</div></a></nav></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/examples">Examples</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native+mapbox" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://discord.com/channels/1004826913229000704/1092426983696248893" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/docusaurus" target="_blank" rel="noopener noreferrer" class="footer__link-item">Gitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/rnmapbox/maps" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div></div></footer></div>

</body>

</html>

rnmapbox.github.io/docs/examples/CacheManagement.html at main · rnmapbox/rnmapbox.github.io · GitHub

Uh oh!

Expand file tree

Breadcrumbs

CacheManagement.html

Latest commit

History

Breadcrumbs

CacheManagement.html

File metadata and controls