Use custom compass on the maps

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',

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}
         />
     ) : (
         <PendingMapView

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -63,6 +63,7 @@ import Coins from '@assets/images/coins.svg';
 import Collapse from '@assets/images/collapse.svg';
 import Columns from '@assets/images/columns.svg';
 import CommentBubbles from '@assets/images/comment-bubbles.svg';
+import Compass from '@assets/images/compass.svg';
 import Concierge from '@assets/images/concierge.svg';
 import Connect from '@assets/images/connect.svg';
 import ConnectionComplete from '@assets/images/connection-complete.svg';
@@ -545,6 +546,7 @@ const Expensicons = {
     LuggageWithLinesPlus,
     TreasureChestGreenWithSparkle,
     UserShield,
+    Compass,
 };
 
 // Create the ExpensifyIcons object from the imported Expensicons

src/components/MapView/MapView.tsx

@@ -3,8 +3,10 @@ import type {MapState} from '@rnmapbox/maps';
 import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps';
 import {memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import Animated, {useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
 import Button from '@components/Button';
 import ImageSVG from '@components/ImageSVG';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useOnyx from '@hooks/useOnyx';
@@ -42,6 +44,7 @@ function MapView({
     unit,
     ref,
     shouldDisplayCurrentLocation = true,
+    shouldDisplayCompass = true,
 }: MapViewProps) {
     const directionCoordinates = !directionCoordinatesProp || utils.isSingleSegmentRoute(directionCoordinatesProp) ? directionCoordinatesProp : directionCoordinatesProp.flat();
 
@@ -51,7 +54,7 @@ function MapView({
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Crosshair', 'MapCurrentLocation']);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Crosshair', 'MapCurrentLocation', 'Compass']);
     const cameraRef = useRef<Mapbox.Camera>(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({
                     </MarkerView>
                 )}
             </Mapbox.MapView>
+            {interactive && shouldDisplayCompass && (
+                <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.l0, {zIndex: 1}]}>
+                    <PressableWithoutFeedback
+                        onPress={resetMapToNorth}
+                        accessibilityLabel={translate('common.resetMapToNorth')}
+                        role={CONST.ROLE.BUTTON}
+                        sentryLabel={CONST.SENTRY_LABEL.MAP_VIEW.COMPASS}
+                    >
+                        <Animated.View style={compassAnimatedStyle}>
+                            <ImageSVG
+                                src={expensifyIcons.Compass}
+                                width={CONST.MAP_VIEW_COMPASS_SIZE.width}
+                                height={CONST.MAP_VIEW_COMPASS_SIZE.height}
+                            />
+                        </Animated.View>
+                    </PressableWithoutFeedback>
+                </View>
+            )}
             {interactive && (
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
                     <Button

src/components/MapView/MapViewTypes.ts

@@ -37,6 +37,9 @@ type MapViewProps = {
 
     // Whether it should display the current user's location on the map
     shouldDisplayCurrentLocation?: boolean;
+
+    // Whether it should display the compass overlay on the map
+    shouldDisplayCompass?: boolean;
 };
 
 type DirectionProps = {

src/components/ReportActionItem/ReportActionItemImage.tsx

@@ -135,6 +135,7 @@ function ReportActionItemImage({
                     shouldHaveBorderRadius={shouldMapHaveBorderRadius}
                     interactive={false}
                     requireRouteToDisplayMap
+                    shouldDisplayCompass={false}
                 />
             </View>
         );

src/languages/de.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: 'Anhang',
         attachments: 'Anhänge',
         center: 'Zentrieren',
+        resetMapToNorth: 'Karte nach Norden ausrichten',
         from: 'Von',
         to: 'AnAn',
         in: 'In',

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',

src/languages/es.ts

@@ -42,6 +42,7 @@ const translations: TranslationDeepObject<typeof en> = {
         newFeature: 'Nueva función',
         beta: 'Beta',
         center: 'Centrar',
+        resetMapToNorth: 'Restablecer el mapa al norte',
         search: 'Buscar',
         reports: 'Informes',
         spend: 'Gastos',

src/languages/fr.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: 'Pièce jointe',
         attachments: 'Pièces jointes',
         center: 'Centrer',
+        resetMapToNorth: 'Réorienter la carte vers le nord',
         from: 'De',
         to: 'À',
         in: 'Dans',

src/languages/it.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: 'Allegato',
         attachments: 'Allegati',
         center: 'Centro',
+        resetMapToNorth: 'Riporta la mappa a nord',
         from: 'Da',
         to: 'A',
         in: 'In',

src/languages/ja.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: '添付ファイル',
         attachments: '添付ファイル',
         center: '中央',
+        resetMapToNorth: '地図を北向きに戻す',
         from: '差出人',
         to: '宛先',
         in: '内',

src/languages/nl.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: 'Bijlage',
         attachments: 'Bijlagen',
         center: 'Centreren',
+        resetMapToNorth: 'Kaart op het noorden zetten',
         from: 'Van',
         to: 'Aan',
         in: 'In',

src/languages/pl.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: 'Załącznik',
         attachments: 'Załączniki',
         center: 'Środek',
+        resetMapToNorth: 'Ustaw mapę na północ',
         from: 'Od',
         to: 'Do',
         in: 'W',

src/languages/pt-BR.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: 'Anexo',
         attachments: 'Anexos',
         center: 'Centralizar',
+        resetMapToNorth: 'Redefinir o mapa para o norte',
         from: 'De',
         to: 'Para',
         in: 'Em',

src/languages/zh-hans.ts

@@ -84,6 +84,7 @@ const translations: TranslationDeepObject<typeof en> = {
         attachment: '附件',
         attachments: '附件',
         center: '居中',
+        resetMapToNorth: '将地图重置为正北',
         from: '来自',
         to: '到',
         in: '在',