To display an offline pack on a MapView using React Native MapboxGL, you first need to create the offline pack and then add it to the MapView. Offline packs allow you to download and store map data for use when the device is offline or has limited internet connectivity.

Here's a step-by-step guide on how to display an offline pack on a MapView in React Native using MapboxGL:

  1. Install Dependencies: Make sure you have installed the required packages, including @react-native-mapbox-gl/maps and any other dependencies needed for your project.

  2. Configure Mapbox Access Token: Set up your Mapbox access token in your project. You can do this in your AppDelegate.m (iOS) and (Android) files.

  3. Create Offline Pack: Before displaying the offline pack on the MapView, you need to create and download the offline pack. This process involves defining the region you want to download and specifying the map style and other parameters. You can use the MapboxGL.offlineManager.createPack method to create an offline pack.

import MapboxGL from '@react-native-mapbox-gl/maps'; const createOfflinePack = async () => { const region = { bounds: [[minLongitude, minLatitude], [maxLongitude, maxLatitude]], styleURL: 'mapbox://styles/mapbox/streets-v11', minZoom: 10, maxZoom: 15, }; try { const packOptions = { name: 'MyOfflinePack', type: MapboxGL.offlineManager.PackType.Full, region, }; const packId = await MapboxGL.offlineManager.createPack(packOptions); console.log(`Offline pack created with ID: ${packId}`); } catch (error) { console.error('Error creating offline pack:', error); } };
  1. Download the Offline Pack: After creating the offline pack, you can start the download using the MapboxGL.offlineManager.resumePack method.
const downloadOfflinePack = async () => { try { await MapboxGL.offlineManager.resumePack('MyOfflinePack'); console.log('Offline pack download started.'); } catch (error) { console.error('Error downloading offline pack:', error); } };
  1. Display the Offline Pack on the MapView: To display the offline pack on the MapView, set the offlinePacks prop of the MapView to include the pack you created earlier.
import React, { useEffect } from 'react'; import MapboxGL from '@react-native-mapbox-gl/maps'; const OfflineMapView = () => { useEffect(() => { createOfflinePack(); downloadOfflinePack(); }, []); return ( <MapboxGL.MapView style={{ flex: 1 }} logoEnabled={false} attributionEnabled={false} offlinePacks={['MyOfflinePack']} /> ); }; export default OfflineMapView;
  1. Handle Pack Progress and Completion (Optional): If you want to show progress or handle completion events of the pack download, you can use the MapboxGL.offlineManager events.
// Listen for download progress MapboxGL.offlineManager.on(MapboxGL.offlineManager.EVENT_PROGRESS, (pack) => { console.log('Download progress:', pack.progress); }); // Listen for download completion MapboxGL.offlineManager.on(MapboxGL.offlineManager.EVENT_PACK_DOWNLOAD_COMPLETED, (pack) => { console.log('Download completed:',; }); // Listen for download error MapboxGL.offlineManager.on(MapboxGL.offlineManager.EVENT_PACK_DOWNLOAD_ERROR, (error) => { console.error('Download error:', error); });

With these steps, you should be able to create and display an offline pack on the MapView using React Native MapboxGL. The downloaded offline pack will be available for use in offline mode or when the device has limited internet connectivity.

Have questions or queries?
Get in Touch