Fix/ios marker render (#9)

* fix: ios marker rerender

* fix: marker rerender compare

* build: version 4.8.6

android/src/main/java/ru/vvdev/mappable/view/MappableMarker.kt

@@ -80,6 +80,35 @@ class MappableMarker(context: Context?) : ReactViewGroup(context), MapObjectTapL
         updateMarker()
     }
 
+//    private fun createCustomMarker(): Bitmap {
+//        val markerView: View = LayoutInflater.from(context).inflate(R.layout.custom_marker_layout, null)
+//        val markerTextLayout = markerView.findViewById<FrameLayout>(R.id.marker_text_layout);
+//        markerTextLayout.visibility = View.GONE
+////        val markerText = markerView.findViewById<TextView>(R.id.marker_text);
+////        markerText.setText("МаркерТекст1")
+////        val markerSubText = markerView.findViewById<TextView>(R.id.marker_sub_text);
+////        markerSubText.setText("МаркерСубТекст1")
+//        val markerIconLayout = markerView.findViewById<FrameLayout>(R.id.marker_icon_layout);
+//        val markerIcon = markerView.findViewById<FrameLayout>(R.id.marker_icon);
+//        markerIconLayout.backgroundTintList = ColorStateList(arrayOf(intArrayOf(Color.RED)), intArrayOf(Color.CYAN));
+//        markerIcon.setBackgroundResource(R.drawable.restaurants_24)
+//        markerIcon.backgroundTintList = ColorStateList(arrayOf(intArrayOf(Color.WHITE)), intArrayOf(Color.WHITE));
+////        markerIconLayout.background = ColorStateList(arrayOf(intArrayOf(Color.RED)), intArrayOf(Color.CYAN));
+//
+//        // Convert the view to a bitmap
+//        markerView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED)
+//        markerView.layout(0, 0, markerView.measuredWidth, markerView.measuredHeight)
+//        val bitmap = Bitmap.createBitmap(
+//            markerView.measuredWidth,
+//            markerView.measuredHeight,
+//            Bitmap.Config.ARGB_8888
+//        )
+//        val canvas = Canvas(bitmap)
+//        markerView.draw(canvas)
+//
+//        return bitmap
+//    }
+
     private fun updateMarker() {
         if (rnMapObject != null && rnMapObject!!.isValid) {
             val iconStyle = IconStyle()

build/index.d.ts

@@ -3,7 +3,6 @@ export * from './components/Marker';
 export * from './components/Polygon';
 export * from './components/Polyline';
 export * from './components/Circle';
-export * from './components/MarkerImage';
 export * from './components/ClusteredMappable';
 export * from './interfaces';
 export * from './Suggest';

ios/View/MappableMarkerView.m

@@ -101,8 +101,11 @@ - (void)updateClusterMarker {
                     }
                 }];
             }
+        } else {
+            dispatch_async(dispatch_get_main_queue(), ^{
+                [self setChildView];
+            });
         }
-        [mapObject setIconStyleWithStyle:iconStyle];
     }
 }
 
@@ -174,7 +177,7 @@ - (void)setMapObject:(MMKPlacemarkMapObject *)_mapObject {
 - (void)setClusterMapObject:(MMKPlacemarkMapObject *)_mapObject {
     mapObject = _mapObject;
     [mapObject addTapListenerWithTapListener:self];
-    [self updateClusterMarker];
+    [self updateMarker];
 }
 
 - (void)setHandled:(BOOL)_handled {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mappable",
-  "version": "4.8.4",
+  "version": "4.8.6",
   "description": "Mappable Kit for react-native",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/components/Marker.tsx

@@ -24,6 +24,42 @@ interface State {
   children: any;
 }
 
+const deepCompareChildren = (nextChildren?: React.ReactElement, prevChildren?: React.ReactElement): boolean => {
+  try {
+    if (!nextChildren || !prevChildren) {
+      return nextChildren === prevChildren;
+    }
+    if (Array.isArray(nextChildren) && Array.isArray(prevChildren)) {
+      if (nextChildren.length !== prevChildren.length) {
+        return false;
+      }
+      return nextChildren.every((child, index) =>
+        deepCompareChildren(child, prevChildren[index])
+      );
+    }
+
+    if (React.isValidElement(nextChildren) && React.isValidElement(prevChildren)) {
+      if (nextChildren.type !== prevChildren.type) {
+        return false;
+      }
+
+      if (nextChildren.key !== prevChildren.key) {
+        return false;
+      }
+      const nextChildrenProps = Object.fromEntries(Object.entries(nextChildren).filter(([key]) => key !== 'children'));
+      const prevChildrenProps = Object.fromEntries(Object.entries(prevChildren).filter(([key]) => key !== 'children'));
+      // @ts-ignore
+      return (deepCompareChildren(nextChildren.props.children, prevChildren.props.children) &&
+      !(Object.keys(nextChildrenProps).find(key => nextChildrenProps[key] != prevChildrenProps[key]) && Object.keys(prevChildrenProps).find(key => nextChildrenProps[key] != prevChildrenProps[key])));
+    }
+
+    return false;
+  } catch (e) {
+    return false;
+  }
+};
+
+
 export class Marker extends React.Component<MarkerProps, State> {
   static defaultProps = {
     rotated: false,
@@ -43,13 +79,16 @@ export class Marker extends React.Component<MarkerProps, State> {
   }
 
   static getDerivedStateFromProps(nextProps: MarkerProps, prevState: State): Partial<State> {
+    if (!deepCompareChildren(nextProps.children, prevState.children)) {
       return {
         children: nextProps.children,
-        recreateKey:
-          nextProps.children === prevState.children
-            ? prevState.recreateKey
-            : !prevState.recreateKey,
+        recreateKey: !prevState.recreateKey,
       };
+    }
+    return {
+      ...prevState,
+      children: nextProps.children,
+    }
   }
 
   private resolveImageUri(img?: ImageSourcePropType) {
@@ -81,24 +120,12 @@ export class Marker extends React.Component<MarkerProps, State> {
   }
 
   render() {
-    if (Platform.OS === 'ios') {
-      return (
-        <NativeMarkerComponent
-          {...this.getProps()}
-          key={String(this.state.recreateKey)}
-          pointerEvents="none"
-        >
-          {this.state.children}
-        </NativeMarkerComponent>
-      );
-    }
-
     return (
       <NativeMarkerComponent
         {...this.getProps()}
         pointerEvents="none"
       >
-        <View key={String(this.state.recreateKey)}>
+        <View style={{position: 'absolute', zIndex: 10}} key={String(this.state.recreateKey)}>
           {this.props.children}
         </View>
       </NativeMarkerComponent>

src/index.ts

@@ -3,7 +3,6 @@ export * from './components/Marker';
 export * from './components/Polygon';
 export * from './components/Polyline';
 export * from './components/Circle';
-export * from './components/MarkerImage';
 export * from './components/ClusteredMappable';
 export * from './interfaces';
 export * from './Suggest';