Skip to content

[HOLD for payment 2023-12-06] [DISTANCE] [$500] HIGH: Automatically pan initial map based on current location #22704

Description

@neil-marcellini

Please follow the plan in the design doc. I have pasted the plan below for external viewers so some of the links might not work. Also, please note that contrary to the original plan below, we have already implemented the "Use current location" button, so please try to reuse as much of that code as possible.

Automatic user location access

The first time a user opens this page we will prompt them to enable location services and then show a map centered on their current location. We’re not going to get the location using the mapping libraries because rnmapbox/maps doesn’t provide a way to access the location permissions. For web, react-map-gl and the underlying Mapbox gl js library don’t provide a way to request the user’s location without forcing them to press a button.

To handle geolocation we will need to platform specific files because react-native-geolocation doesn’t support web. We will create a location folder with platform specific implementations for all the functions handling the user location. At the moment we only need getCurrentPosition.

On native at the top of the file we will set up the configuration via Geolocation.setRNConfiguration. In the config we’ll set skipPermissionRequests: false since we’ll be using this function to request permission, authorizationLevel: ‘whenInUse’ because we only need the location when the app is open, and locationProvider: ‘auto’.

getCurrentPosition(success, error, config) will call Geolocation.getCurrentPosition passing the callbacks config through. From the App side we’ll set up a default config with the timeout and the maximumAge set to one minute because it seems like a reasonable maximum time to wait for your location and it’s unlikely that a cached location will be out of date within one minute.

On web getCurrentPosition(success, error, config) will first check if navigator.geolocation exists. If not then we will call the error call back with a GeolocationPositionError object with code 2, POSITION_UNAVAILABLE. Otherwise, we’ll call navigator.geolocation.getCurrentPosition passing through the params.

After calling getCurrentPosition in the ExpensifyMap, in the success callback we will center the map on the user’s location. The error callback will do nothing for this location request, because if we fail to get the user’s location we’ll continue displaying the default map area of San Francisco. We can prompt the user to enable location permission when they ask for it more explicitly on the waypoint editor page.

On native to center the map we’ll use camera.flyTo([lon, lat]); on the Camera ref. The Camera component will be a child of the MapView as shown in this example.

On web we will call map.flyTo({center: [lon, lat]}); where the map comes from the useMap hook.

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~01b6a985f453bad073
  • Upwork Job ID: 1711808933186453504
  • Last Price Increase: 2023-10-24

Activity

  1. melvin-bot commented on Jul 17, 2023

    @melvin-bot

    Eep! 4 days overdue now. Issues have feelings too...

  2. melvin-bot commented on Jul 19, 2023

    @melvin-bot

    6 days overdue. This is scarier than being forced to listen to Vogon poetry!

  3. self-assigned this
    on Aug 2, 2023
  4. melvin-bot commented on Aug 21, 2023

    @melvin-bot

    This issue has not been updated in over 15 days. eroding to Monthly issue.

    P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

  5. luacmartins commented on Aug 21, 2023

    @luacmartins
    Contributor

    On hold

  6. changed the title [-][HOLD 22703] Automatic user location access for distance requests[/-] [+]Automatic user location access for distance requests[/+] on Aug 21, 2023
  7. 66 remaining items

  8. stephanieelliott commented on Dec 8, 2023

    @stephanieelliott
    Contributor

    Summarizing payment on this issue:

    • Contributor: @MaciejSWM, no payment required
    • Contributor+: $500 - HOLD on BZ checklist, @mananjadhav can you please complete?
      Upwork job is here
  9. mananjadhav commented on Dec 8, 2023

    @mananjadhav
    Collaborator

    @stephanieelliott This was more of a feature request than a bug.

    But I think we should add a regression test. The test steps from the PR are good to be added the regression tests.

  10. JmillsExpensify commented on Dec 11, 2023

    @JmillsExpensify
    Contributor

    $500 payment approved for @mananjadhav based on summary above.

  11. JmillsExpensify commented on Dec 11, 2023

    @JmillsExpensify
    Contributor

    @mananjadhav can you please paste the regression/TestRail steps as a comment in this issue?

  12. thienlnam commented on Dec 12, 2023

    @thienlnam
    Contributor

    Pending regression steps from C+

  13. mananjadhav commented on Dec 12, 2023

    @mananjadhav
    Collaborator

    We have three scenarios for the regression test steps. @JmillsExpensify @stephanieelliott @thienlnam We can use the following scenarios to add to Testrail.

    Regression Test Steps

    Location Permission is not set

    1. Have the location access reset before you access the app.
    2. Login to the app
    3. Click on FAB -> Request Money -> Distance.
    4. Browser should ask if you want to grant location access. Map should stay in pending state until you choose something.
    5. Grant the permission. Map should navigate straight to your current location within 1-2 seconds.
    6. Repeat steps 1 to 4, but this time, block the location access. The map should redirect you to default San Francisco location.

    Location Permission is enabled

    1. Load the application with the location access enabled.
    2. Start the request money flow by clicking FAB -> Request Money -> Distance.
    3. It should take you directly to your current location.
    4. Update the location in the Dev console by setting:
    Onyx.set(ONYXKEYS.USER_LOCATION, { longitude: 12, latitude: 12 })
    
    1. Repeat the steps 1 and 2. It should change the map location to your current location.
    2. Repeat steps 4 and 5, and before it can change to your current location, drag the map. This should keep you at [12, 12] coords and should stop the map from auto-panning to your current location.

    Location Permission is disabled

    1. Load the application with the location access enabled.
    2. Start the request money flow by clicking FAB -> Request Money -> Distance.
    3. The map should redirect you to default San Francisco location.
    4. Refresh the page. You should land straight in the San Francisco location.
    5. Enable the location and refresh the page to cache the current location in ONYX.
    6. Then disable the location and refresh the page.
    7. You should land in this cached location instead of the default San Francisco location.
  14. stephanieelliott commented on Dec 13, 2023

    @stephanieelliott
    Contributor

    Thank you -- issue for regression test here: https://github.com/Expensify/Expensify/issues/349072

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionDailyKSv2DistanceWave5-free-submittersEngineeringExternalAdded to denote the issue can be worked on by a contributorNewFeatureSomething to build that is a new item.

Type

No type

Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions