fix(map): markers not displaying correctly (#20)

balloman · Nov 7, 2023 · 5a17b05 · 5a17b05
1 parent 4b8ea97
commit 5a17b05
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/.changeset/many-shirts-beam.md b/.changeset/many-shirts-beam.md
@@ -0,0 +1,5 @@
+---
+"@balloman/expo-google-maps": patch
+---
+
+Fixed markers not displaying correctly if the size wasn't set
diff --git a/example/App.tsx b/example/App.tsx
@@ -6,7 +6,7 @@ import {
 } from "@balloman/expo-google-maps";
 import * as Location from "expo-location";
 import React, { useEffect } from "react";
-import { Button, StyleSheet, View } from "react-native";
+import { Button, StyleSheet, Text, View } from "react-native";
 
 import styleJson from "./style.json";
 
@@ -96,11 +96,11 @@ export default function App() {
           <View
             style={{
               alignItems: "center",
-              backgroundColor: "red",
-              width: 100,
-              height: 100,
+              backgroundColor: "blue",
             }}
-          />
+          >
+            <Text>Hello World</Text>
+          </View>
         </MarkerView>
       </MapView>
       <View style={{ position: "absolute", top: "50%", alignSelf: "center" }}>

diff --git a/ios/Views/MapView.swift b/ios/Views/MapView.swift
@@ -40,6 +40,7 @@ class MapView: ExpoView, GMSMapViewDelegate {
       markerView.setMap(withMap: mapView)
       markers[key] = markerView
     }
+    super.insertReactSubview(subview, at: atIndex)
   }
 
   override func removeReactSubview(_ subview: UIView!) {
@@ -49,6 +50,7 @@ class MapView: ExpoView, GMSMapViewDelegate {
       markerView.gmsMarker.map = nil
       markers.removeValue(forKey: key)
     }
+    super.removeReactSubview(subview)
   }
 
   func animateCamera(to: GMSCameraPosition, animationOptions: AnimateOptions) {

diff --git a/src/MarkerView.tsx b/src/MarkerView.tsx
@@ -1,5 +1,6 @@
 import { requireNativeViewManager } from "expo-modules-core";
 import * as React from "react";
+import { View } from "react-native";
 
 import { Coordinate } from "./ExpoGoogleMaps.types";
 
@@ -27,5 +28,11 @@ const NativeView: React.ComponentType<MarkerViewProps> =
   requireNativeViewManager("ExpoGoogleMapsMarker");
 
 export function MarkerView(props: MarkerViewProps) {
-  return <NativeView {...props} />;
+  return (
+    <NativeView {...props}>
+      {props.children && ( // Due to some weirdness with the native view, we need to wrap the children in an absolute view
+        <View style={{ position: "absolute" }}>{props.children}</View>
+      )}
+    </NativeView>
+  );
 }