Upgrade RN

package.json

@@ -1,29 +1,30 @@
 {
   "name": "@protonapp/map-component",
-  "version": "0.5.50",
+  "version": "0.5.70",
   "description": "Map Component for Adalo",
   "main": "index.js",
+  "author": "Adalo",
+  "license": "ISC",
   "scripts": {
     "start": "adalo dev",
     "login": "adalo login",
     "publish": "adalo publish"
   },
-  "author": "Adalo",
-  "license": "ISC",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@adalo/cli": "1.0.2",
+    "@adalo/cli": "1.0.6",
     "react": "18.2.0",
     "react-art": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native-web": "0.19.10"
+    "react-native-web": "^0.19.10"
   },
   "dependencies": {
     "axios": "1.6.7",
-    "google-maps-react-markers": "2.0.10",
-    "react-native-maps": "1.10.3"
+    "google-maps-react-markers": "^2.0.15",
+    "react-native-maps": "1.26.0",
+    "react-native-svg": "^15.15.0"
   }
-}
+}

scripts/installIos.ts

@@ -12,51 +12,52 @@ await backupFile(podfilePath)
 
 let podfileContent = await Deno.readTextFile(podfilePath)
 
-// Add `rn_maps_path = '../node_modules/react-native-maps'` above `config = use_native_modules!`
-
-podfileContent = insertLineAfterString(
-  podfileContent,
-  'config = use_native_modules!',
-  `rn_maps_path = '../node_modules/react-native-maps'`,
-  { insertBefore: true }
-)
-
-// Add `pod 'react-native-google-maps', :path => rn_maps_path` above `config = use_native_modules!`
-podfileContent = insertLineAfterString(
-  podfileContent,
-  'config = use_native_modules!',
-  `pod 'react-native-google-maps', :path => rn_maps_path`,
-  { insertBefore: true }
-)
-
-await Deno.writeTextFile(podfilePath, podfileContent)
-console.log(`Updated Podfile with react-native-google-maps and rn_maps_path`)
-
+// Add Google Maps pods at the target level
+if (!podfileContent.includes('react-native-maps/Google')) {
+  const targetBlockStart = podfileContent.indexOf("target 'AdaloApp' do")
+  if (targetBlockStart !== -1) {
+    const insertionPoint = podfileContent.indexOf('  config = use_native_modules!', targetBlockStart)
+    if (insertionPoint !== -1) {
+      const newContent = [
+        podfileContent.slice(0, insertionPoint),
+        "  # react-native-maps dependencies",
+        "  rn_maps_path = '../node_modules/react-native-maps'",
+        "  pod 'react-native-maps/Google', :path => rn_maps_path",
+        "  ",
+        podfileContent.slice(insertionPoint)
+      ].join('\n')
+
+      await Deno.writeTextFile(podfilePath, newContent)
+      console.log('Successfully updated Podfile with Google Maps dependencies')
+    }
+  }
+}
+
+// 2. Handle AppDelegate modifications
 const appDelegatePath = join(projectPath, `ios/${projectName}/AppDelegate.mm`)
-
 await backupFile(appDelegatePath)
 
 let appDelegateContent = await Deno.readTextFile(appDelegatePath)
 
-// Add `#import <GoogleMaps/GoogleMaps.h>` BEFORE `// MARKER_REACT_NATIVE_IOS_APP_DELEGATE_IMPORTS`
-
-appDelegateContent = insertLineAfterString(
-  appDelegateContent,
-  'MARKER_REACT_NATIVE_IOS_APP_DELEGATE_IMPORTS',
-  `#import <GoogleMaps/GoogleMaps.h>`,
-  { insertBefore: true }
-)
-
-// Add `[GMSServices provideAPIKey:@"GEO_API_KEY"];` AFTER `self.initialProps = @{};`
-
-appDelegateContent = insertLineAfterString(
-  appDelegateContent,
-  'initialProps = @{}',
-  `  [GMSServices provideAPIKey:@"GEO_API_KEY"];`
-)
-
-// Replace `GEO_API_KEY` with the value of `key`
-appDelegateContent = appDelegateContent.replaceAll('GEO_API_KEY', apiKey)
+// Add GoogleMaps import
+if (!appDelegateContent.includes('<GoogleMaps/GoogleMaps.h>')) {
+  appDelegateContent = insertLineAfterString(
+    appDelegateContent,
+    'MARKER_REACT_NATIVE_IOS_APP_DELEGATE_IMPORTS',
+    '#import <GoogleMaps/GoogleMaps.h>',
+    { insertAfter: true }
+  )
+}
+
+// Add API key initialization
+if (!appDelegateContent.includes('GMSServices provideAPIKey')) {
+  appDelegateContent = insertLineAfterString(
+    appDelegateContent,
+    'self.initialProps = @{};',
+    `  [GMSServices provideAPIKey:@"${apiKey}"];`,
+    { insertAfter: true }
+  )
+}
 
 await Deno.writeTextFile(appDelegatePath, appDelegateContent)
-console.log(`Updated AppDelegate.mm with GoogleMaps import and API key`)
+console.log('Successfully updated AppDelegate.mm with Google Maps configuration')

src/Map/MapWrapper.js

@@ -1,10 +1,37 @@
 import { useRef } from 'react'
 import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps'
-import { Image, Dimensions, Platform } from 'react-native'
+import { Dimensions, Platform, View } from 'react-native'
 import { defaultZoom } from './config'
+import { Image as SvgImage, Svg } from 'react-native-svg'
 
 const { height, width } = Dimensions.get('window')
 
+const getMarkerSize = (style) => {
+  const originalWidth = style?.width || 40
+  const originalHeight = style?.height || 40
+
+  const size = Math.max(originalWidth, originalHeight)
+
+  return { width: size, height: size }
+}
+
+const pickNearestImageByStyles = (images, style) => {
+  if (!images) return null
+
+  if (!Array.isArray(images)) return images
+
+  const targetWidth = style.width || style.minWidth || 24
+  const targetHeight = style.height || style.minHeight || 24
+
+  const nearest = images.reduce((prev, curr) => {
+    const prevDiff = Math.abs(prev.width - targetWidth) + Math.abs(prev.height - targetHeight)
+    const currDiff = Math.abs(curr.width - targetWidth) + Math.abs(curr.height - targetHeight)
+    return currDiff < prevDiff ? curr : prev
+  })
+
+  return nearest
+}
+
 const MapWrapper = ({
   options,
   styles,
@@ -19,6 +46,7 @@ const MapWrapper = ({
   const LONGITUDE_DELTA = LATITUDE_DELTA * (width / height)
 
   const mapRef = useRef(null)
+  const markerSize = getMarkerSize(styles.markerImage)
 
   return (
     <MapView
@@ -47,10 +75,10 @@ const MapWrapper = ({
             setTimeout(() => {
               mapRef.current.fitToElements(true)
             }, 50)
-            
+
             return
           }
-          
+
           mapRef.current.fitToElements(true)
         }
       }}
@@ -66,11 +94,18 @@ const MapWrapper = ({
             key={marker.key}
             onPress={marker.onPress}
           >
-            <Image
-              resizeMode="contain"
-              source={marker && marker.image}
-              style={styles.markerImage}
-            />
+            <View style={{ ...styles.markerImage, ...markerSize }}>
+              <Svg width="100%" height="100%" viewBox="0 0 24 24">
+                <SvgImage
+                  x={0}
+                  y={0}
+                  width="100%"
+                  height="100%"
+                  href={pickNearestImageByStyles(marker.image, styles.markerImage)}
+                  preserveAspectRatio="xMidYMid meet"
+                />
+              </Svg>
+            </View>
           </Marker>
         ))}
     </MapView>

src/Map/index.js

@@ -102,7 +102,7 @@ export default class Map extends Component {
       // "un-render" the map so that it can be re-rendered with new data
       this.setState({ isDataAddressesLoaded: false })
     }
-    
+
     // generate an array of geocoded addresses
     if (!isDataAddressesLoaded) {
       this.loadDataAddresses()
@@ -217,7 +217,7 @@ export default class Map extends Component {
     this.setState({
       isDataAddressesLoading: true
     })
-    
+
     const coordinates = []
     const addresses = []