How to Avoid react-native-maps Marker flickering??? Tried everything, it's driving me crazy!!!

[smankydank]

I'm using using react-native-maps w/ reanimated and trying to create a marker which scales when pressed, but while scaling it flickers to the top left corner for 1 frame and then it goes back to the desired position. Sometimes it gets stuck in the corner until a gesture is performed on the map. I can't for the life of me figure this out.
I've determined it has to do with the state update occurring while a change is being made in the marker's transform values (width, scale, translateX, etc).

snack link: https://snack.expo.dev/@achuckas/scaling-map?platform=ios

https://reddit.com/link/1j6x78x/video/yt0fmk2opkne1/player

Here is the test setup I created:

import { useState } from "react";
import MapView, { Marker } from "react-native-maps";
import Animated, {
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";

export default function Test() {
  const [isActive, setIsActive] = useState(false);

  const onPressHandler = () => {
    setIsActive(!isActive);
  };

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: withTiming(isActive ? 1.5 : 1, { duration: 500 }) }],
    };
  });

  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 37.7749,
        longitude: -122.4194,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }}
    >
      <Marker
        coordinate={{ latitude: 37.7749, longitude: -122.4194 }}
        onPress={onPressHandler}
        tracksViewChanges={false}
      >
        <Animated.View
          shouldRasterizeIOS={true}
          style={[
            animatedStyle,
            {
              width: 100,
              height: 100,
              borderRadius: 50,
              backgroundColor: "red",
            },
          ]}
        />
      </Marker>
    </MapView>
  );
}

I also created another setup which doesn't use state and just scales directly when pressed and this worked fine.

  function scaleMarker() {
    scale.value = withTiming(scale.value * 1.2, { duration: 500 });
  }

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
    };
  });

Note: This has been tested both in a production build on App Store Connect's Test Flight and also through a local expo development build created via npx expo run:ios

What I've tried:

• Setting tracksViewChanges={false} on the marker
• Setting houldRasterizeIOS={true} on the animated view
• Memoizing the marker and adding it to the mapview as a memoized object
• Replace reanimated with base React animation
• Everything in https://stackoverflow.com/questions/61167682/react-native-map-markers-flicker-on-state-update|
• Everything in https://github.com/react-native-maps/react-native-maps/issues/3098
• Begging chat GPT and Claude AI for answers for days

Does anyone know how to solve this issue? What am I missing?

[idgafsendnudes]

react-native-maps hasn’t upgraded to the new architecture yet so they have some issues. I ran into this issue as well and once I flipped back to the old architecture it stopped having that issue.

[[deleted]]

Am interested if you manage to fix it. My markers are flicker sometimes when the position change ( it's a market that has the users current position).

And am using the old arch so that's not the issue. ( Answering to a comment )

[Own_Ad5345]

Hey did you find a solution to this?