marker pin recreate on custom marker when user filter the marker then zoom in /out (Please Go through the below Description)

Question

At first, render everything works fine, but as soon as a user tries to filter marker through rest api after this step user zoom out or zoom in a map default marker pin generate on custom marker

dependence:- react-native-maps

check the recording video:- Video Link

      <MapView
        ref={mapRef}
        rotateEnabled={false}
        shouldRasterizeIOS
        mapType="standard"
        style={styles.map}
        initialRegion={INITIAL_REGION}
        
      >
        {data &&
          data?.map(item => (
            <CustomMarker
              item={item}
              key={item?.id}
              setSelectedMarkerId={(row: any) => {
                mapRef?.current?.animateToRegion(
                  {
                    latitude: Number(row?.lat),
                    longitude: Number(row?.long),
                    latitudeDelta: 0.002,
                    longitudeDelta: 0.002,
                  },
                  1000,
                );
              }}
              coordinate={{
                latitude: Number(item?.lat),
                longitude: Number(item?.long),
              }}
            />
          ))}
      </MapView>

here is my custom Marker Code:-

const CustomMarker = ({ item, setSelectedMarkerId, setIsMarkerDetailShow , coordinate   }) => {
    const [tracksViewChanges, setTracksViewChanges] = useState(true);
 
    
  return (
    <Marker
    tracksViewChanges={tracksViewChanges}
      coordinate={coordinate}
      onPress={() => {
        setSelectedMarkerId(item);
        // setIsMarkerDetailShow(true);
      }}
      >
   <View>
   {item?.abribois ? (
        <Image
          source={require('src/assets/images/greenMarker.png')}
          style={{
            height: 30,
            width: 30,
            resizeMode: 'contain',
          }}
          onLoadEnd={() => setTracksViewChanges(false)}
        />
      ) : (
        <Image
          source={require('src/assets/images/blueMarker.png')}
          style={{
            height: 30,
            width: 30,
            resizeMode: 'contain',
          }}
          onLoadEnd={() => setTracksViewChanges(false)}
        />
      )}
   </View>
    </Marker>
  );
};

export default CustomMarker;

Answer 1

this issue to be connected with react-native-reanimated.

after some research i found this solution and its worked for me

react-native-maps-reanimated-issue-patches

See this Examaple

diff --git a/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm b/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm
index 16ed327..a6afa84 100644
--- a/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm
+++ b/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm
@@ -14,6 +14,9 @@
 #if __has_include(<RNScreens/RNSScreen.h>)
 #import <RNScreens/RNSScreen.h>
 #endif
+#if __has_include("AIRMapMarker.h")
+#import "AIRMapMarker.h"
+#endif
 
 @interface RCTUIManager (REA)
 - (void)_manageChildren:(NSNumber *)containerTag
@@ -125,6 +128,9 @@ - (void)_manageChildren:(NSNumber *)containerTag
       if ([toRemoveChild isKindOfClass:[RCTModalHostView class]]
 #if __has_include(<RNScreens/RNSScreen.h>)
           || ([toRemoveChild isKindOfClass:[RNSScreenView class]])
+#endif
+#if __has_include("AIRMapMarker.h")
+          || ([toRemoveChild isKindOfClass:[AIRMapMarker class]])
 #endif
       ) {
         // we don't want layout animations when removing modals or Screens of native-stack since it brings buggy