react-native-map-clustering

react-native-map-clustering copied to clipboard

I have a problem using the MapView imported from 'react-native-map-clustering'. Rendering markers dinamically does not render all markers, showing only some on the maps. It seems that it happens only when using Apple Maps, because when changing the provider to 'google', it works as intended. I am using:

    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "^1.7.1",

The code is as follows:

<MapView
           ref={mapRef}
           clusterColor={Colors.red}
           // provider={PROVIDER_GOOGLE}
           style={{flex: 1}}
           initialRegion={{
             ...initialRegionLocation,
             latitudeDelta: LATITUDE_DELTA,
             longitudeDelta: LONGITUDE_DELTA
           }}
           showsUserLocation={hasLocation}>
           {mapMarkers.map((marker, index) => {
             return (
               <Marker
                 key={marker?.Id}
                 ref={ref => (markersRef.current[marker?.Id] = ref)}
                 coordinate={{
                   latitude: marker.Latitude,
                   longitude: marker.Longitude
                 }}
                 title={marker.Name}
                 description={marker.Address}
                 image={require('../../Images/pin.png')}>
                 <Callout
                   key={index}
                   onPress={() => {
                     navigate(
                       marker.Latitude,
                       marker.Longitude
                     );
                   }}>
                   <View
                     style={{
                       borderRadius: 5,
                       padding: 5,
                       maxWidth: Dimensions.get('window').width / 1.3
                     }}>
                     <Text style={{color: 'black', fontWeight: 'bold'}}>
                       {marker.Name}
                     </Text>
                     <Text style={{color: 'black'}} numberOfLines={2}>
                       {marker.Address}
                     </Text>
                     <View
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'center'
                       }}>
                       <Text style={{color: Colors.blue, marginRight: 5}}>
                         {t('translations:VIEW')}
                       </Text>
                       <Icon
                         style={{flex: 1}}
                         name="compass-outline"
                         size={16}
                         color={Colors.blue}
                       />
                     </View>
                   </View>
                 </Callout>
               </Marker>
             );
           })}
         </MapView>