How to show only downloaded map tiles and not the default Apple/Google maps with MapView library in Expo/React-Native

Question

I am displaying a map view in my react native app like this, using the MapView library.

<View style={styles.container}>
    <MapView region={region} style={styles.map}>
        <UrlTile urlTemplate={dir}></UrlTile>
    </MapView>
</View>

I have open street maps tiles saved locally in the documents directory of the filesystem and I am loading it into the app as a Url tile. The dir variable is defined like this

const dir = FileSystem.documentDirectory + 'public/maps/{z}/{x}/{y}.png'

The issue I am having is that MapView only puts my downloaded tile on top of the default Apple maps and if I zoom out or leave the region in which I have the downloaded tiles it show the default map. Also when I zoom in or out on the downloaded tiles, it flickers and I can briefly see the default map.

What I want do do is to only show the downloaded tiles from open street maps and to restrict the map view to the region in which I have downloaded the tiles for.

I am stuck here and I would appreciate if anyone here know how to approach this issue.

Answer 1

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default function App() {
  const dir = FileSystem.documentDirectory + 'public/maps/{z}/{x}/{y}.png'; // Define the directory for locally stored map tiles

  return (
    <View style={styles.container}>
      <MapView region={region} style={styles.map}>
        <UrlTile
          urlTemplate={dir}
          shouldReplaceMapContent={true}
          maximumZ={MAX_ZOOM_LEVEL}
          minimumZ={MIN_ZOOM_LEVEL}
        />
      </MapView>
    </View>
  );
}