Markers / shapeSource not showing when offline.

Describe the bug Markers not showing while viewing the map offline

To Reproduce

Run this component, one time connected with featureCollection commented out (so the shapesource / markers won’t be loaded and cached, but the mapstyle is loaded), then uncomment featureCollection and go offline. Relaunch the app, and the shapeSource won’t be rendered. If you now connect, the shapesource will appear and render the markers.

import React, {Component} from 'react';
import {View, Platform} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import {mapScreenStyles as styles} from '../styles';

import pinpaid from '../assets/pinpaid.png';
import pinpoiblue from '../assets/pinpoiblue.png';
import pinpoired from '../assets/pinpoired.png';
import pinpoigrey from '../assets/pinpoigrey.png';

const IS_ANDROID = Platform.OS === 'android';

class MapScreen extends Component {
 render() {
   const featureCollection = {
     type: 'FeatureCollection',
     features: [
       {
         type: 'Feature',
         id: 59242,
         properties: {icon: 'free', place_id: 59242, text: 'P'},
         geometry: {type: 'Point', coordinates: [5.301958, 60.38595]},
       },
       {
         type: 'Feature',
         id: 59405,
         properties: {icon: 'blue', place_id: 59405, text: 'P'},
         geometry: {type: 'Point', coordinates: [5.331669, 60.38566]},
       },
       {
         type: 'Feature',
         id: 8651,
         properties: {icon: 'paid', place_id: 8651, text: 'S'},
         geometry: {type: 'Point', coordinates: [5.358708, 60.35445]},
       },
       {
         type: 'Feature',
         id: 27276,
         properties: {icon: 'paid', place_id: 27276, text: 'S'},
         geometry: {type: 'Point', coordinates: [5.361255, 60.35024]},
       },
     ],
   };

   return (
     <View style={styles.container}>
       <MapboxGL.MapView
         ref={c => (this._map = c)}
         showUserLocation={true}
         style={styles.matchParent}
         regionDidChangeDebounceTime={10}>
         <React.Fragment>
           <MapboxGL.Camera
             animationMode="moveTo"
             animationDuration={1000}
             centerCoordinate={[5.361255, 60.35024]}
             zoomLevel={13}
           />
           <MapboxGL.UserLocation />
           <MapboxGL.Images
             images={{
               free: require('../assets/pinfree.png'),
               paid: require('../assets/pinpaid.png'),
               red: pinpoired,
               grey: pinpoigrey,
               blue: pinpoiblue,
               userPoi_blue: pinpaid,
               nativeAssetImages: [
                 'pinfree',
                 'pinpaid',
                 'pinpoired',
                 'pinpoigrey',
                 'pinpoiblue',
               ],
             }}
           />
           <MapboxGL.ShapeSource
             id="symbolLayerSource"
             shape={featureCollection}
             cluster
             clusterRadius={30}>
             <MapboxGL.SymbolLayer
               minZoomLevel={3}
               id="pointCount"
               style={layerStyles.clusterCount}
             />

             <MapboxGL.CircleLayer
               id="clusteredPoints"
               minZoomLevel={3}
               belowLayerID="pointCount"
               filter={['has', 'point_count']}
               style={layerStyles.clusteredPoints}
             />

             <MapboxGL.SymbolLayer
               sourceLayerID="symbolLayerSource"
               id="symbolLocationSymbols"
               minZoomLevel={3}
               filter={['!has', 'point_count']}
               style={mapStyles.parameterIcon}
             />
           </MapboxGL.ShapeSource>
         </React.Fragment>
       </MapboxGL.MapView>
     </View>
   );
 }
}

const mapStyles = {
 parameterIcon: {
   iconImage: ['get', 'icon'],
   iconSize: IS_ANDROID ? 0.3 : 0.06,
   iconAllowOverlap: true,
   textOffset: [0, -0.4],
   textField: '{text}',
   textSize: 14,
   textPitchAlignment: 'map',
   backgroundColor: 'red',
 },
};

const layerStyles = {
 singlePoint: {
   circleColor: 'green',
   circleOpacity: 0.84,
   circleStrokeWidth: 2,
   circleStrokeColor: 'white',
   circleRadius: 5,
   circlePitchAlignment: 'map',
 },

 clusteredPoints: {
   circlePitchAlignment: 'map',

   circleColor: [
     'step',
     ['get', 'point_count'],
     '#51bbd6',
     10,
     '#f1f075',
     20,
     '#f28cb1',
   ],

   circleRadius: ['step', ['get', 'point_count'], 20, 10, 30, 50, 40],

   circleOpacity: 0.8,
   circleStrokeWidth: 3,
   circleStrokeColor: 'white',
 },

 clusterCount: {
   textField: '{point_count}',
   textSize: 16,
   textPitchAlignment: 'map',
   lineWidth: 2,
 },
};

export default MapScreen;

It doesn’t seem to be a linking problem, any other image asset is showing in the app and the markers don’t show the text either, so somehow the shapeSource need net connection to get rendered. Although the images are locally imported / required it tries to pull them apparently over http (see screenshot).

Expected behavior Markers should be visible online and offline.

Screenshots If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• Platform: Android / iOS

• Device: Pixel 3XL (and any other), iPhone 11x

• Emulator/ Simulator: no

• OS: Android 7 - 10 / iOS 13

• react-native-mapbox-gl Version 7.2.0 / 8.0 rc

• React Native Version 0.60.5

Additional context As soon as I switch on the connection the pins show up without any action. I set up a fresh react-native application, the behaviour is the same. The shapeSource is not being rendered when I’m not connected.

[386sx]

I would really appreciate if you reopened the issue and looked properly at it. What you are describing has nothing to do with the issue reported here.

[ferdicus]

@NathanNovak , @Kayre-Scott-Primon, please open a new ticket while following the issue ticket in order for this to get looked at.
You are commenting underneath a ticket that is marked as known/ won't fix.