[FIXED] How to optimize react native maps performance when using animated marker

Issue

I'm trying to optimize react-native-maps perfomance. This is my customized Marker

export function usePrevious(value) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

function VehicleMarker({CarSetting, car, onOpen}) {
  const [marker, setMarker] = useState(null);
  const [CarIcon, setCarIcon] = useState(Car);
  const [coordinate] = useState(
    new AnimatedRegion({
      latitude: car.Lt,
      longitude: car.Ln,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  );
  const [CarType, setCarType] = useState(0);
  const [tracksViewChanges, setTracksViewChanges] = useState(false);

  const prevCoordinate = usePrevious(coordinate);

  useEffect(() => {
    if (prevCoordinate !== coordinate) {
      setTracksViewChanges(true);
    } else {
      setTracksViewChanges(false);
    }
  }, [coordinate]);

  useEffect(() => {
    animateMarker();
    setCarIcon(getCarImage(CarSetting, car));
    setCarType(
      CarSetting?.find(setting => setting.CarID == car.CarID)?.CarTypeID,
    );
  }, [car]);

  const animateMarker = () => {
    const newCoordinate = {
      latitude: car.Lt,
      longitude: car.Ln,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    };

    if (Platform.OS === 'android') {
      if (marker) {
        marker.animateMarkerToCoordinate(newCoordinate, 5000);
      }
    } else {
      coordinate.timing(newCoordinate).start();
    }
  };

  return (
    <Marker.Animated
      key={car.CarID}
      ref={marker => {
        setMarker(marker);
      }}
      coordinate={coordinate}
      onPress={onOpen}
      anchor={{x: 0.5, y: 0.5}}
      rotation={CarType == 0 ? 360 - car.Angle : 0}
      tracksViewChanges={tracksViewChanges}>
      <Animated.View style={styles.markerWrap}>
        <Animated.Image source={CarIcon} style={styles.marker} />
      </Animated.View>
    </Marker.Animated>
  );
}

I have about 80 vehicles, and half of them are always on the go, I update their coordinate every 15s . And each vehicle have a marker is plates number ( because I don't want it rotates so I clone it into an other component ).

It run smooth with under 30vehicle. But more than 30 it becomes laggy. I can't cluster them because our customer wants to see all of them.

Have any solutions for it?

Solution

my solution is reducing the resolution of the image ( to the size I want, in my case is 30x30 px ) and use icon istead of image.

      <Marker.Animated
        ref={marker => {
          setVehicle(marker);
        }}
        coordinate={coordinate}
        onPress={onOpen}
        anchor={{x: 0.5, y: 0.5}}
        rotation={CarType == 0 ? 360 - car.Angle : 0}
        tracksViewChanges={tracksViewChanges}
        icon={CarIcon}>
        {/* <Animated.View style={styles.markerWrap}>
          <Animated.Image source={CarIcon} style={styles.marker} />
        </Animated.View> */}
      </Marker.Animated>

Answered By - Zuet
Answer Checked By - - Gilberto Lyons (ReactFix Admin)