Marker 깜빡거림 문제

안녕하세요.

map 에서 marker 가 깜빡거리는 문제가 있어서 질문드립니다.

(map home 에서 아무 동작도 하지 않고 있는 상태, marker 가 지속적으로 깜빡거림)

Screenshot 2024-07-13 at 10.21.40 PM.png

Screenshot 2024-07-13 at 10.21.46 PM.png

동영상을 업로드할 수 없어서 동영상 촬영후 깜빡거리기 전후를 캡쳐했습니다.

안드로이드에서만 발생하고, virtual device 와 실제 기기에서 모두 발생하고 있습니다.

혹시 계속해서 마커를 새로 조회해오거나, 제 실수로 리렌더링이 무한히 되는게 아닌가 싶어서, CustomMarker 컴포넌트랑, marker 조회하는 api 에 로그 추가해봤지만 한번 호출되고 그 후에는 함수가 실행되지 않는것으로 확인했습니다.

추가로 이 문제가 아이폰 simulator 에서는 발생하지 않고 있습니다.

혹시 제가 더 확인해 볼만한 포인트가 있을까요,,,?

같은 문제를 겪으신 분이 혹시 계실까요,,

질문 올린 후 조금 더 찾아보면서 해결은 했는데, 깔끔하게 해결했다는 느낌은 안드네요. 그래도 같은 문제를 겪으실 분들을 위해 공유합니다.

해결 방법: Marker 의 tracksViewChanges 옵션을 false 로 설정한다.

const CustomMarker = ({
  coordinate,
  color,
  score = 5,
  ...props
}: CustomMarkerProps) => {
  console.log('custom marker');
  const markerView = (
    <View style={styles.container}>
      <View style={[styles.marker, {backgroundColor: colorHex[color]}]}>
        <View style={[styles.eye, styles.leftEye]} />
        <View style={[styles.eye, styles.rightEye]} />
        {score < 3 && <View style={[styles.mouth, styles.bad]} />}
        {score === 3 && <View style={[styles.soso]} />}
        {score > 3 && <View style={[styles.mouth, styles.good]} />}
      </View>
    </View>
  );

  return coordinate ? (
    <Marker coordinate={coordinate} tracksViewChanges={false} {...props}>
      {markerView}
    </Marker>
  ) : (
    markerView
  );
};

+그냥 false 로 설정하는게 너무 껄끄러워서 조금 더 알아본 정보 입니다.

tracksViewChanges 옵션이란?
만약 기획 요구사항으로 인해 true 로 해야할 경우에는 어떻게 대응?
내 코드에는 리렌더링될 만한 부분이 없는데, 깜빡거리는 이유 (추측)

https://chatgpt.com/share/08d501cb-be8b-4fc8-b69a-ebd09febe412

인프런 커뮤니티 질문&답변