I'm working on an Expo React Native project that is using react-native-maps to render a MapView component with a list of Markers. The Markers are custom components that render an Image. When testing using Android and Google Maps everything works perfectly. When testing using an iOS emulator the markers appear but the map runs slowly. When testing using a physical iPhone 7 (and others) the app crashes with no error message. The app always loads correctly until rendering the map, which appears for a second or two before the app crashes. Sometimes the markers will also appear for a split second before the app crashes.
If I set limits on how many items to render the markers will appear as long as the limit is less than five. Similarly I can render each marker if I specify which one to load by id, so I don't think the data is wrong or causing unhandled exceptions. I need all the items in the list to render dynamically, without a limit on how many can be rendered. If I comment out the Image component and the default red pin markers appear on the map without any problems. It seems like the issue has to do with how the markers' Images are rendered dynamically on the Apple map.
I've tried importing the image source, preloading it, requiring it, and using {{uri:url}} format for the Image source parameter. Everything results in the app crashing without an error message. Am I missing something? Is there some way for me to get any kind of error message that can help debug this? Is there a workaround if this is a known issue?
MapView:
<MapView style={styles.map} ref={(map) => { currentMap = map; }} region={region} onRegionChangeComplete={onRegionChange} rotateEnabled={false} loadingEnabled> { eventList.map((marker, index) => { const { location } = marker.location.geometry; if ( location.lat <= (region.latitude + region.latitudeDelta / 2)&& location.lat >= (region.latitude - region.latitudeDelta / 2)&& location.lng <= (region.longitude + region.longitudeDelta / 2)&& location.lng >= (region.longitude - region.longitudeDelta / 2) ) { return (<MapMarker key={index} mapMarker={marker} handlePress={() => moveMapToCoordinate(marker.location)} onSelectEvent={onSelectEvent} /> ); } return null; }) }</MapView>MapMarker:
<Marker coordinate={latLng} title={title} onPress={() => handlePress()}><CustomMapMarker eventType={eventType} isSanctioned={isSanctioned} startDate={startAt} /><Callout style={styles.customCallout} onPress={() => onSelectEvent(_id)}><ViewEventScreenDetailsHeader fullEvent={mapMarker} containerStyle={styles.calloutDetails} /></Callout></Marker>CustomMapMarker:
const img = require('../../assets/icons/SpikeScreen/map-marker-pickup.png');return (<View style={[styles.pickupMarkerContainer, markerContainerStyle]}><Image style={[styles.pickupMarker, markerStyle]} source={img} /><Text style={styles.dayMonthMarkerText}>{formattedStartDate}</Text></View>)