From b2b0b02c514a20c9d8c7525c65adcc90e7f21c57 Mon Sep 17 00:00:00 2001
From: g4rb4g3 <g4rb4g3@gmail.com>
Date: Wed, 1 Nov 2023 14:25:28 +0100
Subject: [PATCH 1/2] fix: images not shown

---
 ios/RNMBX/RNMBXImages.swift | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ios/RNMBX/RNMBXImages.swift b/ios/RNMBX/RNMBXImages.swift
index e4957aefc..c4ee5f942 100644
--- a/ios/RNMBX/RNMBXImages.swift
+++ b/ios/RNMBX/RNMBXImages.swift
@@ -116,7 +116,7 @@ open class RNMBXImages : UIView, RNMBXMapComponent {
         if !sameImage(oldValue: oldImages[name], newValue: images[name]) {
           missingImages[name] = images[name]
         } else {
-          if hasImage(style: style, name: name) {
+          if !hasImage(style: style, name: name) {
             logged("RNMBXImages.addImagePlaceholder") {
               try style.addImage(placeholderImage, id: name, stretchX: [], stretchY: [])
               missingImages[name] = images[name]
@@ -243,7 +243,7 @@ open class RNMBXImages : UIView, RNMBXMapComponent {
   func addNativeImages(style: Style, nativeImages: [NativeImageInfo]) {
     for imageInfo in nativeImages {
       let imageName = imageInfo.name
-      if  hasImage(style: style, name:imageName) {
+      if  !hasImage(style: style, name: imageName) {
         if let image = UIImage(named: imageName) {
           logged("RNMBXImage.addNativeImage: \(imageName)") {
             try style.addImage(image, id: imageName, sdf: imageInfo.sdf,

From 6c98c88bd0bbdcac70423188ab360d5a78fe599a Mon Sep 17 00:00:00 2001
From: g4rb4g3 <g4rb4g3@gmail.com>
Date: Wed, 1 Nov 2023 14:26:54 +0100
Subject: [PATCH 2/2] add example for custom icon with native asset

---
 .../CustomIconNativeAsset.tsx                 | 99 +++++++++++++++++++
 .../src/examples/SymbolCircleLayer/index.js   |  1 +
 2 files changed, 100 insertions(+)
 create mode 100644 example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx

diff --git a/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx b/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx
new file mode 100644
index 000000000..992f646d8
--- /dev/null
+++ b/example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx
@@ -0,0 +1,99 @@
+import React, { useRef, memo, useState } from 'react';
+import { Text } from 'react-native';
+import MapboxGL, {
+  MapView,
+  Camera,
+  ShapeSource,
+  SymbolLayer,
+  Images,
+} from '@rnmapbox/maps';
+import { featureCollection, feature, point } from '@turf/helpers';
+
+import Bubble from '../common/Bubble';
+import type { ExampleWithMetadata } from '../common/ExampleMetadata';
+
+const styles = {
+  icon: {
+    iconImage: 'pin',
+    iconAllowOverlap: true,
+  },
+};
+
+const CustomIconNativeAsset = memo(() => {
+  const cameraRef = useRef<Camera>(null);
+  const [stateFeatureCollection, setStateFeatureCollection] =
+    useState<GeoJSON.FeatureCollection>(
+      featureCollection([point([-73.970895, 40.723279])]),
+    );
+
+  const onPress = (e: GeoJSON.Feature) => {
+    const aFeature = feature(e.geometry);
+    aFeature.id = `${Date.now()}`;
+
+    setStateFeatureCollection(
+      featureCollection([...stateFeatureCollection.features, aFeature]),
+    );
+  };
+
+  const onSourceLayerPress = (e: any) => {
+    console.log(
+      'You pressed a layer here are your features:',
+      e.features,
+      e.coordinates,
+      e.point,
+    );
+  };
+
+  return (
+    <>
+      <MapView
+        style={{ flex: 1 }}
+        styleURL={MapboxGL.StyleURL.Light}
+        onPress={onPress}
+      >
+        <Camera
+          ref={cameraRef}
+          defaultSettings={{
+            zoomLevel: 9,
+            centerCoordinate: [-73.970895, 40.723279],
+          }}
+        />
+        <ShapeSource
+          id="symbolLocationSource"
+          hitbox={{ width: 20, height: 20 }}
+          onPress={(e) => onSourceLayerPress(e)}
+          shape={stateFeatureCollection}
+        >
+          <SymbolLayer
+            id="symbolLocationSymbols"
+            minZoomLevel={1}
+            style={styles.icon}
+          />
+          <Images nativeAssetImages={['pin']} />
+        </ShapeSource>
+      </MapView>
+      <Bubble>
+        <Text>Tap on Map to add an icon</Text>
+      </Bubble>
+    </>
+  );
+});
+
+export default CustomIconNativeAsset;
+/* end-example-doc */
+
+const metadata: ExampleWithMetadata['metadata'] = {
+  title: 'Custom Icon Native Asset',
+  tags: [
+    'ShapeSource',
+    'ShapeSource#onPress',
+    'SymbolLayer',
+    'Images',
+    'SymbolLayer#iconImage',
+  ],
+  docs: `
+Renders a symbol layer with custom icon (native asset) defined using the Images component. Clicking a location on a map add a new icon.
+`,
+};
+
+(CustomIconNativeAsset as unknown as ExampleWithMetadata).metadata = metadata;
diff --git a/example/src/examples/SymbolCircleLayer/index.js b/example/src/examples/SymbolCircleLayer/index.js
index 6d16e0b81..c9c062bd3 100644
--- a/example/src/examples/SymbolCircleLayer/index.js
+++ b/example/src/examples/SymbolCircleLayer/index.js
@@ -1,4 +1,5 @@
 export { default as CustomIcon } from './CustomIcon';
+export { default as CustomIconNativeAsset } from './CustomIconNativeAsset';
 export { default as DataDrivenCircleColors } from './DataDrivenCircleColors';
 export { default as Earthquakes } from './Earthquakes';
 export { default as ImageScaleTests } from './ImageScaleTests';