When rerendering many custom polygons with colors and edges, the app freezes the animations on the map

[Mynameisjohndev]

Summary

Well, I'm sometimes working on rerendering many polygons, markers and titles on top of these polygons, but I find that the more I try to rerender on screen, the animations and zooming on the map work a lot.

Reproducible sample code

export function Maps = ({
  navigation,
  isFocused,
  app,
  user,
  partner,
  farm,
  presets,
  fields,
  field,
  mapRegion,
  registries,
  loading,
  idUser,
  idFarm,
  tracksViewChanges,
  requestMon,
  requestSync,
  setField,
}) => {

const renderTargets = () => {
    const {registries} = this.props;
    return registries
      .filter(item => isToday(new Date(item.dateCollect)))
      .map((item, i) => {
        const {latitude, longitude} = item;
        if (latitude !== null && longitude !== null) {
          return (
            <Marker
              tracksViewChanges={false}
              key={`${item.idMd5}`}
              coordinate={{
                latitude: parseFloat(latitude),
                longitude: parseFloat(longitude),
              }}
              zIndex={item.sync ? 10 : 15}>
              <MyLocation
                width={15}
                height={15}
                fill={item.sync ? 'rgba(0, 255, 132, 1)' : colors.white}
              />
              <Callout style={{width: 100}}>
                <Text style={{fontWeight: 'bold', fontSize: 16}}>
                  Registro:
                </Text>
                {item.targets.map(tar =>
                  tar.stages.map(stg => (
                    <Text style={{fontSize: 14}} key={stg.idMd5}>
                      {'•'} {stg.value} {stg.stage}
                    </Text>
                  )),
                )}
              </Callout>
            </Marker>
          );
        }
        return <View key={`${item.idMd5}`} />;
      });
  };

const renderFields = () => {
    const {field, fields, setField} = this.props;
    return fields.map(item => {
      if (item && item.perimeter) {
        return (
          <Polygon
            key={item.id_field}
            tappable
            onPress={() => {
              setField(item);
            }}
            coordinates={item.perimeter}
            strokeWidth={
              field !== null && field.id_field === item.id_field ? 1.1 : 1
            }
            strokeColor={
              field !== null && field.id_field === item.id_field
                ? colors.highLight
                : colors.primary
            }
            fillColor={
              field !== null && field.id_field === item.id_field
                ? colors.pressedField
                : colors.field
            }
            zIndex={-1}
          />
        );
      }
    });
  };

 const renderFieldTitles = () => {
    const {fields, setField} = this.props;

    return fields.map((item, index) => {
      if (item && item.perimeter) {
        return (
          <Marker
            tracksViewChanges={false}
            key={`title-${item.id_field}-${item.name_field}`}
            coordinate={item.centroid}
            style={{alignItems: 'center', justifyContent: 'center'}}
            onPress={() => {
              setField(item);
            }}>
            <FieldName>{item.name_field}</FieldName>
          </Marker>
        );
      }
      return <></>;
    });
  };


  return(
  <SafeAreaView
        style={{
          flex: 1,
          alignItems: 'center',
          backgroundColor: colors.primary,
        }}>
        <MapView
          style={{width, height}}
          provider={PROVIDER_GOOGLE}
          ref={this.getMapRef}
          initialRegion={mapRegion}
          rotateEnabled={false}
          onMapReady={this.onMapReady}
          toolbarEnabled={false}
          mapType="satellite"
          disableDefaultUI="true"
          showsUserLocation
          showsMyLocationButton={false}
          moveOnMarkerPress={false}>
          {!isObjEmpty(farm) && !isObjEmpty(fields) && this.renderFields()}
          {!isObjEmpty(farm) &&
            !isObjEmpty(fields) &&
            showFieldsTitle &&
            this.renderFieldTitles()}

          {!isObjEmpty(farm) && !isObjEmpty(registries) && (
            <RenderTargets
              {...{
                registries,
                tracksViewChanges,
                farm,
              }}
            />
          )}
        </MapView>
        <Menu
          navigate={navigate}
          stateMapCamera={shouldIAnimate}
          mapCamera={this.mapCamera}
          userLocation={this.animateToUser}
          farmLocation={this.navigateToFarm}
          registryFunc={this.goToRegistry}
          syncFunc={requestSync}
          listFunc={() => {
            if (!loading) {
              navigate('list');
            }
          }}
        />
      </SafeAreaView>
  )
}

Steps to reproduce

To reproduce my error, just have a very large array with around 600-700 fields and within them have around 5-25 points to be marked on the map

Expected result

the result I expected was no crashes during zooming or animations within the map taking into account that I need to re-render several points on the screen

Actual result

The current result is when I have a high number of polygons on the screen, the issue of animation and zooming of the map stops a lot, and when I have few, this does not happen

React Native Maps Version

1.8.0

What platforms are you seeing the problem on?

Android, iOS (Google Maps)

React Native Version

0.72.6

What version of Expo are you using?

Not using Expo

Device(s)

Pixel 2(Android 10)

Additional information

[alessandroperetti]

Do you have any news or did you find a workaround?

Could be related to this PR #4481