Merge pull request #44752 from Krishna2323/krishna2323/issue/44486

fix: iOS - Distance - Center icon overlaps with compass icon.
Expensify · Jul 17, 2024 · 9c509a0 · 9c509a0
2 parents 1716b81 + 9b5c74d
commit 9c509a0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
@@ -214,6 +214,10 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     pitchEnabled={pitchEnabled}
                     attributionPosition={{...styles.r2, ...styles.b2}}
                     scaleBarEnabled={false}
+                    // We use scaleBarPosition with top: -32 to hide the scale bar on iOS because scaleBarEnabled={false} not work on iOS
+                    scaleBarPosition={{...styles.tn8, left: 0}}
+                    compassEnabled
+                    compassPosition={{...styles.l2, ...styles.t5}}
                     logoPosition={{...styles.l2, ...styles.b2}}
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...responder.panHandlers}

diff --git a/src/styles/utils/positioning.ts b/src/styles/utils/positioning.ts
@@ -22,6 +22,9 @@ export default {
     t0: {
         top: 0,
     },
+    t5: {
+        top: 20,
+    },
     tn4: {
         top: -16,
     },