diff --git a/assets/images/compass.svg b/assets/images/compass.svg
new file mode 100644
index 000000000000..984c9bc53fec
--- /dev/null
+++ b/assets/images/compass.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 2baa3f70769e..45700c69b9d2 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -5207,6 +5207,8 @@ const CONST = {
WAYPOINT: {width: 40, height: 40},
},
+ MAP_VIEW_COMPASS_SIZE: {width: 44, height: 44},
+
QUICK_REACTIONS: [
{
name: '+1',
@@ -8967,6 +8969,9 @@ const CONST = {
SHARE_DETAIL: {
DISMISS_KEYBOARD_BUTTON: 'ShareDetail-DismissKeyboardButton',
},
+ MAP_VIEW: {
+ COMPASS: 'compass',
+ },
MONEY_REQUEST: {
AMOUNT_NEXT_BUTTON: 'MoneyRequest-AmountNextButton',
AMOUNT_PAY_BUTTON: 'MoneyRequest-AmountPayButton',
diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx
index 2316c66ec1a4..f200d192dd63 100644
--- a/src/components/ConfirmedRoute.tsx
+++ b/src/components/ConfirmedRoute.tsx
@@ -33,9 +33,12 @@ type ConfirmedRouteProps = {
/** Whether the map is interactive or not */
interactive?: boolean;
+
+ /** Whether it should display the compass on the map */
+ shouldDisplayCompass?: boolean;
};
-function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = true, requireRouteToDisplayMap = false, interactive}: ConfirmedRouteProps) {
+function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = true, requireRouteToDisplayMap = false, interactive, shouldDisplayCompass = true}: ConfirmedRouteProps) {
const {isOffline} = useNetwork();
const {route0: route} = transaction?.routes ?? {};
const waypoints = transaction?.comment?.waypoints ?? {};
@@ -92,6 +95,7 @@ function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = tr
styleURL={CONST.MAPBOX.STYLE_URL}
requireRouteToDisplayMap={requireRouteToDisplayMap}
shouldDisplayCurrentLocation={false}
+ shouldDisplayCompass={shouldDisplayCompass}
/>
) : (
(null);
const [isIdle, setIsIdle] = useState(false);
const initialLocation = useMemo(() => initialState && {longitude: initialState.location[0], latitude: initialState.location[1]}, [initialState]);
@@ -194,6 +197,25 @@ function MapView({
onMapReady();
}
};
+
+ const mapHeading = useSharedValue(0);
+
+ const onCameraChanged = (e: MapState) => {
+ mapHeading.set(e.properties.heading ?? 0);
+ };
+
+ // Rotate the compass needle opposite to the map's bearing so it keeps pointing to true north.
+ const compassAnimatedStyle = useAnimatedStyle(() => ({
+ transform: [{rotate: `${-mapHeading.get()}deg`}],
+ }));
+
+ const resetMapToNorth = () => {
+ cameraRef.current?.setCamera({
+ heading: 0,
+ animationDuration: CONST.MAPBOX.ANIMATION_DURATION_ON_CENTER_ME,
+ });
+ };
+
const centerMap = useCallback(() => {
const waypointCoordinates = waypoints?.map((waypoint) => waypoint.coordinate) ?? [];
if (waypointCoordinates.length > 1 || (directionCoordinates ?? []).length > 1) {
@@ -262,14 +284,14 @@ function MapView({
style={{flex: 1}}
styleURL={styleURL}
onMapIdle={setMapIdle}
+ onCameraChanged={onCameraChanged}
onTouchStart={() => setUserInteractedWithMap(true)}
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}}
+ compassEnabled={false}
logoPosition={{...styles.l2, ...styles.b2}}
{...responder.panHandlers}
>
@@ -338,6 +360,24 @@ function MapView({
)}
+ {interactive && shouldDisplayCompass && (
+
+
+
+
+
+
+
+ )}
{interactive && (
);
diff --git a/src/languages/de.ts b/src/languages/de.ts
index 8543459bf21c..2822f6f15204 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: 'Anhang',
attachments: 'Anhänge',
center: 'Zentrieren',
+ resetMapToNorth: 'Karte nach Norden ausrichten',
from: 'Von',
to: 'AnAn',
in: 'In',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 18a934a44b0b..46440b5842a0 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -79,6 +79,7 @@ const translations = {
attachment: 'Attachment',
attachments: 'Attachments',
center: 'Center',
+ resetMapToNorth: 'Reset map to north',
from: 'From',
to: 'To',
in: 'In',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index e991c8214feb..7bf078da5f8e 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -42,6 +42,7 @@ const translations: TranslationDeepObject = {
newFeature: 'Nueva función',
beta: 'Beta',
center: 'Centrar',
+ resetMapToNorth: 'Restablecer el mapa al norte',
search: 'Buscar',
reports: 'Informes',
spend: 'Gastos',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 28f71d3f982e..cb52711b9d2a 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: 'Pièce jointe',
attachments: 'Pièces jointes',
center: 'Centrer',
+ resetMapToNorth: 'Réorienter la carte vers le nord',
from: 'De',
to: 'À',
in: 'Dans',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index ac1e27a861f3..b431fb4eb556 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: 'Allegato',
attachments: 'Allegati',
center: 'Centro',
+ resetMapToNorth: 'Riporta la mappa a nord',
from: 'Da',
to: 'A',
in: 'In',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 59f01def65d3..c89b0e012e83 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: '添付ファイル',
attachments: '添付ファイル',
center: '中央',
+ resetMapToNorth: '地図を北向きに戻す',
from: '差出人',
to: '宛先',
in: '内',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 13ff4c2e8484..46239fd6db35 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: 'Bijlage',
attachments: 'Bijlagen',
center: 'Centreren',
+ resetMapToNorth: 'Kaart op het noorden zetten',
from: 'Van',
to: 'Aan',
in: 'In',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index b28823f85ca6..7947ab1f8f6a 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: 'Załącznik',
attachments: 'Załączniki',
center: 'Środek',
+ resetMapToNorth: 'Ustaw mapę na północ',
from: 'Od',
to: 'Do',
in: 'W',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 0aacc9763885..b058c0207d97 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: 'Anexo',
attachments: 'Anexos',
center: 'Centralizar',
+ resetMapToNorth: 'Redefinir o mapa para o norte',
from: 'De',
to: 'Para',
in: 'Em',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index f99d7d7f7f55..bb63ddacdd27 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -84,6 +84,7 @@ const translations: TranslationDeepObject = {
attachment: '附件',
attachments: '附件',
center: '居中',
+ resetMapToNorth: '将地图重置为正北',
from: '来自',
to: '到',
in: '在',