When number of marker or marker size increases, Custom Markers doesn't render completely in React Native IOS

What I'm trying to do?

I am trying to render custom marker in Android and iOS using react-native-maps library, where the number of markers can range between 16-900.

---

Where am I stuck?

When the number of marker increases(>60) or the marker size is increased, some markers are not rendering completely in iOS. However, if user clicks on that area, marker gets rendered and is visible now.

This works fine in Android though, so my assumption is that there is some rendering issue with iOS.

---

What issue looks like?

---

Markers format:

markers = {
  ["key": 0, "latitude": 34.123, "longitude": 134.123],
  ["key": 1, "latitude": 35.123, "longitude": 135.123],
  ["key": 2, "latitude": 36.123, "longitude": 136.123],
  [],
  []
}

---

Sample code:

Note: Markers are fetched via an API and saved in state

import React from 'react';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

class CustomMap extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      markers: [],
      region: {
        latitude: 34.334653,
        longitude: 134.365288,
        latitudeDelta: 0.45,
        longitudeDelta: 0.45,
      },
    };
   }

   render() {
     const {
       region,
       markers,
     } = this.state;

     return (

      <View style=>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={region}
          region={region}
          ref={ref => (this.map = ref)}>
          {markers &&
            markers.map((marker, index) => (
              <CustomMarker
                marker={marker}
                key={index}
              />
            ))}
          </MapView>
      </View>
    );
   }
  }
 }

Below is the CustomMarker class

import React, {useState} from 'react';
import {Marker} from 'react-native-maps';

const CustomMarker = ({marker}) => {
  const [tracksViewChanges, setTracksViewChanges] = useState(true);

  return (
    <Marker
      key={marker.key}
      coordinate={marker}
    >
      <Image fadeDuration={0} source={getIcon(marker)} />;
    </Marker>
  );
};

const getIcon = marker => {
  switch (marker?.id) {
    case a:
      return require('Assets/Images/img1/a.png');
    case b:
      return require('Assets/Images/img2/b.png');
    case c:
      return require('Assets/Images/img3/c.png');
    default:
  }
};

---

I tried following things:-

1. Tried using icon and image prop of Marker component of react-native-maps library but the issue was same after the number of markers increased from 700.
2. Used svg image instead of Image from react-native library.
3. When used default marker the markers rendered properly in ios as well as android.
4. Used ref in Marker Component to set TrackViewChange to false. Reference

from When number of marker or marker size increases, Custom Markers doesn't render completely in React Native IOS