How to use google maps offline in react native

Question

I\'m trying to enable users to use maps offline in my react native App, I\'m using react-native-maps

I want to provide the offline mode just for a predefined area (l

Answer 1

At this time the only offline react-native module that supports offline mapping is react-native-mapbox-gl.

<MapView>
<LocalTile
pathTemplate="../pathToLocalStoredTile.png"
tileSize={126}
/>
</MapView>

This might give you some support.

As Google Maps SDK does not have this implemented, the only offline possibility is to use custom tiles.

Answer 2

If you want do download tales you can use React-native MapBox's SnapShotManager.

Refer to the SnapShotManager docs: https://github.com/react-native-mapbox-gl/maps/blob/master/docs/snapshotManager.md

// creates a temp file png of base map
const uri = await MapboxGL.snapshotManager.takeSnap({
  centerCoordinate: [-74.126410, 40.797968],
  width: width,
  height: height,
  zoomLevel: 12,
  pitch: 30,
  heading: 20,
  styleURL: MapboxGL.StyleURL.Dark,
  writeToDisk: true, // Create a temporary file
});

// creates base64 png of base map without logo
const uri = await MapboxGL.snapshotManager.takeSnap({
  centerCoordinate: [-74.126410, 40.797968],
  width: width,
  height: height,
  zoomLevel: 12,
  pitch: 30,
  heading: 20,
  styleURL: MapboxGL.StyleURL.Dark,
  withLogo: false, // Disable Mapbox logo (Android only)
});

// creates snapshot with bounds
const uri = await MapboxGL.snapshotManager.takeSnap({
  bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
  width: width,
  height: height,
  styleURL: MapboxGL.StyleURL.Dark,
});