Allow user to get current location

desktop/main.js

@@ -254,6 +254,7 @@ const mainWindow = () => {
                         preload: `${__dirname}/contextBridge.js`,
                         contextIsolation: true,
                         sandbox: false,
+                        nodeIntegration: true, // required for geolocation https://github.com/electron/electron/blob/main/docs/api/environment-variables.md#google_api_key
                     },
                     titleBarStyle: 'hidden',
                 });

ios/Podfile.lock

@@ -581,6 +581,8 @@ PODS:
     - React-Core
   - react-native-flipper (0.159.0):
     - React-Core
+  - react-native-geolocation (3.0.6):
+    - React-Core
   - react-native-image-manipulator (1.0.5):
     - React
   - react-native-image-picker (5.1.0):
@@ -892,6 +894,7 @@ DEPENDENCIES:
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-flipper (from `../node_modules/react-native-flipper`)
+  - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
   - "react-native-image-manipulator (from `../node_modules/@oguzhnatly/react-native-image-manipulator`)"
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-key-command (from `../node_modules/react-native-key-command`)
@@ -1065,6 +1068,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-document-picker"
   react-native-flipper:
     :path: "../node_modules/react-native-flipper"
+  react-native-geolocation:
+    :path: "../node_modules/@react-native-community/geolocation"
   react-native-image-manipulator:
     :path: "../node_modules/@oguzhnatly/react-native-image-manipulator"
   react-native-image-picker:
@@ -1249,6 +1254,7 @@ SPEC CHECKSUMS:
   react-native-config: 7cd105e71d903104e8919261480858940a6b9c0e
   react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-flipper: dc5290261fbeeb2faec1bdc57ae6dd8d562e1de4
+  react-native-geolocation: 0f7fe8a4c2de477e278b0365cce27d089a8c5903
   react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
   react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
   react-native-key-command: c2645ec01eb1fa664606c09480c05cb4220ef67b

package.json

@@ -64,6 +64,7 @@
     "@react-native-camera-roll/camera-roll": "5.4.0",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/datetimepicker": "^3.5.2",
+    "@react-native-community/geolocation": "^3.0.6",
     "@react-native-community/netinfo": "^9.3.10",
     "@react-native-firebase/analytics": "^12.3.0",
     "@react-native-firebase/app": "^12.3.0",
@@ -146,6 +147,7 @@
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-lottie": "^1.4.4",
     "react-native-webview": "^11.17.2",
+    "react-native-x-geolocation": "^1.0.9",
     "react-native-x-maps": "1.0.10",
     "react-pdf": "^6.2.2",
     "react-plaid-link": "3.3.2",

src/ONYXKEYS.ts

@@ -77,6 +77,9 @@ const ONYXKEYS = {
      * It is expected to provide a two-letter country code such as US for United States, and so on. */
     COUNTRY: 'country',
 
+    /** Represents current user's location error code, this error code comes from the geolocation api */
+    LOCATION_ERROR_CODE: 'locationErrorCode',
+
     /** Contains all the users settings for the Settings page and sub pages */
     USER: 'user',
 
@@ -306,6 +309,7 @@ type OnyxValues = {
     [ONYXKEYS.SCREEN_SHARE_REQUEST]: OnyxTypes.ScreenShareRequest;
     [ONYXKEYS.COUNTRY_CODE]: number;
     [ONYXKEYS.COUNTRY]: string;
+    [ONYXKEYS.LOCATION_ERROR_CODE]: string;
     [ONYXKEYS.USER]: OnyxTypes.User;
     [ONYXKEYS.LOGIN_LIST]: OnyxTypes.Login;
     [ONYXKEYS.SESSION]: OnyxTypes.Session;

src/components/LocationErrorMessage.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Linking, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+import TextLink from './TextLink';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import CONST from '../CONST';
+import ONYXKEYS from '../ONYXKEYS';
+import compose from '../libs/compose';
+import getPlatform from '../libs/getPlatform';
+import colors from '../styles/colors';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** The location error code from onyx */
+    locationErrorCode: PropTypes.number,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    locationErrorCode: 0,
+};
+
+function LocationErrorMessage({locationErrorCode, translate}) {
+    if (!locationErrorCode) {
+        return null;
+    }
+
+    const navigateToSettings = () => {
+        const platform = getPlatform();
+        if (platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID) {
+            Linking.openSettings();
+        } else {
+            Linking.openURL(CONST.NEWHELP_URL);
+        }
+    };
+
+    return (
+        <View style={[styles.dotIndicatorMessage, styles.mt4]}>
+            <View style={styles.offlineFeedback.errorDot}>
+                <Icon
+                    src={Expensicons.DotIndicator}
+                    fill={colors.red}
+                />
+            </View>
+            <View style={styles.offlineFeedback.textContainer}>
+                {/* 
+                  Show appropriate error msg on location issues
+                  - errorCode = -1 -> location not supported (web only)
+                  - errorCode = 1 -> location permission is not enabled
+                  - errorCode = 2 -> location is unavailable or there is some connection issue
+                  - errorCode = 3 -> location fetch timeout  
+                */}
+                {locationErrorCode === 1 ? (
+                    <Text style={styles.offlineFeedback.text}>
+                        <Text>{`${translate('location.permissionDenied')} ${translate('common.please')}`}</Text>
+                        <TextLink onPress={navigateToSettings}>{` ${translate('location.allowPermission')} `}</TextLink>
+                        <Text>{translate('location.tryAgain')}</Text>
+                    </Text>
+                ) : (
+                    <Text style={styles.offlineFeedback.text}>{translate('location.notFound')}</Text>
+                )}
+            </View>
+        </View>
+    );
+}
+
+LocationErrorMessage.displayName = 'LocationErrorMessage';
+LocationErrorMessage.propTypes = propTypes;
+LocationErrorMessage.defaultProps = defaultProps;
+export default compose(
+    withOnyx({
+        locationErrorCode: {
+            key: ONYXKEYS.LOCATION_ERROR_CODE,
+        },
+    }),
+    withLocalize,
+)(LocationErrorMessage);

src/components/UserCurrentLocationButton.js

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import React, {useEffect, useRef} from 'react';
+import {Text} from 'react-native';
+import {getCurrentPosition} from 'react-native-x-geolocation';
+import * as User from '../libs/actions/User';
+import styles from '../styles/styles';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import LocationErrorMessage from './LocationErrorMessage';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import colors from '../styles/colors';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+
+const propTypes = {
+    /** Callback that runs when location data is fetched */
+    onLocationFetched: PropTypes.func.isRequired,
+
+    /** Accessibility label for the component */
+    accessibilityLabel: PropTypes.string,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    accessibilityLabel: 'location.useCurrent',
+};
+
+function UserCurrentLocationButton({onLocationFetched, accessibilityLabel, translate}) {
+    const isFetchingLocation = useRef(false);
+
+    /**
+     * handles error when failed to get user's current location
+     * @param {Object} errorData
+     * @param {Number} errorData.code
+     */
+    const onError = (errorData) => {
+        isFetchingLocation.current = false;
+
+        User.setLocationError(errorData.code);
+    };
+
+    /**
+     * handles success after getting user's current location
+     * @param {Object} successData
+     * @param {Object} successData.coords
+     * @param {Number} successData.coords.longitude
+     * @param {Number} successData.coords.latitude
+     * @param {Number} successData.timestamp
+     */
+    const onSuccess = (successData) => {
+        isFetchingLocation.current = false;
+
+        User.clearLocationError();
+
+        onLocationFetched(successData);
+    };
+
+    /** Gets the user's current location and registers success/error callbacks */
+    const useCurrentLocation = () => {
+        if (isFetchingLocation.current) return;
+
+        isFetchingLocation.current = true;
+
+        getCurrentPosition(onSuccess, onError);
+    };
+
+    useEffect(() => {
+        // clear location errors on mount
+        User.clearLocationError();
+    }, []);
+
+    return (
+        <>
+            <PressableWithFeedback
+                style={[styles.flexRow, styles.mt4]}
+                onPress={useCurrentLocation}
+                accessibilityLabel={accessibilityLabel}
+            >
+                <Icon
+                    src={Expensicons.Location}
+                    fill={colors.green}
+                />
+                <Text style={[styles.textLabel, styles.mh2]}>{translate('location.useCurrent')}</Text>
+            </PressableWithFeedback>
+            <LocationErrorMessage />
+        </>
+    );
+}
+
+UserCurrentLocationButton.displayName = 'UserCurrentLocationButton';
+UserCurrentLocationButton.propTypes = propTypes;
+UserCurrentLocationButton.defaultProps = defaultProps;
+export default withLocalize(UserCurrentLocationButton);

src/languages/en.js

@@ -159,6 +159,13 @@ export default {
         receipt: 'Receipt',
         replace: 'Replace',
     },
+    location: {
+        useCurrent: 'Use current location',
+        notFound: 'We were unable to find your location, please try again or enter an address manually',
+        permissionDenied: 'It looks like you have denied permission to your location.',
+        allowPermission: 'allow location permission in settings',
+        tryAgain: 'and then try again.',
+    },
     anonymousReportFooter: {
         logoTagline: 'Join the discussion.',
     },

src/languages/es.js

@@ -158,6 +158,13 @@ export default {
         receipt: 'Recibo',
         replace: 'Sustituir',
     },
+    location: {
+        useCurrent: 'Usar ubicación actual',
+        notFound: 'No pudimos encontrar su ubicación, inténtelo nuevamente o ingrese una dirección manualmente',
+        permissionDenied: 'Parece que has denegado el permiso a tu ubicación.',
+        allowPermission: 'permitir permiso de ubicación en la configuración',
+        tryAgain: 'y luego inténtalo de nuevo.',
+    },
     anonymousReportFooter: {
         logoTagline: 'Únete a la discusión.',
     },

src/libs/actions/User.js

@@ -885,6 +885,29 @@ function clearDraftCustomStatus() {
     Onyx.merge(ONYXKEYS.CUSTOM_STATUS_DRAFT, {text: '', emojiCode: '', clearAfter: ''});
 }
 
+/**
+ * Sets the error code when trying to get user's current location. When
+ * errorCode = -1 -> location not supported (web only)
+ * errorCode 0 = when assume there is no error
+ * errorCode 1 = location permission is not enabled
+ * errorCode 2 = location is unavailable or there is some connection issue
+ * errorCode 3 = location fetch timeout
+ *
+ * @param {Object} errorCode - indicates location error.
+ */
+function setLocationError(errorCode) {
+    Onyx.merge(ONYXKEYS.LOCATION_ERROR_CODE, errorCode);
+}
+
+/**
+ * Clears the error code from location
+ *
+ */
+function clearLocationError() {
+    // when errorCode is 0, we assume no error
+    Onyx.merge(ONYXKEYS.LOCATION_ERROR_CODE, 0);
+}
+
 export {
     closeAccount,
     resendValidateCode,
@@ -914,4 +937,6 @@ export {
     clearCustomStatus,
     updateDraftCustomStatus,
     clearDraftCustomStatus,
+    setLocationError,
+    clearLocationError,
 };

src/pages/iou/WaypointEditor.js

@@ -19,6 +19,8 @@ import ROUTES from '../../ROUTES';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
 import transactionPropTypes from '../../components/transactionPropTypes';
+import * as User from '../../libs/actions/User';
+import UserCurrentLocationButton from '../../components/UserCurrentLocationButton';
 
 const propTypes = {
     /** The transactionID of the IOU */
@@ -103,10 +105,28 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             address: values.address,
         };
 
+        User.clearLocationError();
         Transaction.saveWaypoint(transactionID, waypointIndex, waypoint);
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 
+    /**
+     * sets user current location as a waypoint
+     * @param {Object} geolocationData
+     * @param {Object} geolocationData.coords.latitude
+     * @param {Object} geolocationData.coords.longitude
+     * @param {Object} geolocationData.timestamp
+     */
+    const selectWaypointFromCurrentLocation = (geolocationData) => {
+        const waypoint = {
+            lat: geolocationData.coords.latitude,
+            lng: geolocationData.coords.longitude,
+            address: 'Your Location',
+        };
+
+        selectWaypoint(waypoint);
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -134,7 +154,6 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                     <AddressSearch
                         inputID={`waypoint${waypointIndex}`}
                         ref={(e) => (textInput.current = e)}
-                        hint={!network.isOffline ? translate('distance.errors.selectSuggestedAddress') : ''}
                         containerStyles={[styles.mt4]}
                         label={translate('distance.address')}
                         defaultValue={waypointAddress}
@@ -153,6 +172,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                         }}
                     />
                 </View>
+                <UserCurrentLocationButton onLocationFetched={selectWaypointFromCurrentLocation} />
             </Form>
         </ScreenWrapper>
     );