In React native I am using the react-native-maps and reanimated packages and I am trying to use reanimated to scale a marker when it is pressed, however, when I press the marker, as it's view scales it flickers to the top left corner for 1 frame before going back to the desired position. Sometimes it doesn't even go back and stays in the corner

Animation Progress:

• Initial Marker
• Bugged Marker Position Actively Animating
• Final Marker

Note that if it gets stuck in the corner, performing a gesture on the map does indeed bring the marker back until the next animation occurs. Also note this is being run on an expo development build (ie. prebuild) created using npx expo run:ios.

Here is the test setup I have 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 doesnt use state and just scales directly when pressed

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

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

however, for the full app I will be tracking these state updates. For this variation of the app though the flickering does not occur which leads me to believe it has something to do with the state updating.

I also want to note I tried another setup while animating the color and it worked fine, it appears to only be when transform values (scale, translateX, width, etc.) are updated.

I have already attempted other recommendations such as setting tracksViewChanges={false} on the marker and shouldRasterizeIOS={true} on the animated view. I also tried memoizing the marker and adding it to the mapview as a memoized object, but nothing has worked.

I also tried everything in this related question and the related github

Does anyone know how to solve this issue? Is there something I am missing in my code here?