[HOLD for payment 2024-05-16] CRITICAL: [P2P Distance] [$1000] Opens to ocean on first load

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v1.4.62-5 Reproducible in staging?: y Reproducible in production?: N/A If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @quinthar Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1712974090053049

Action Performed:

1. Tap green FAB for the first time on a new device
2. Select track expense
3. Select distance

Expected Result:

Should not show the location in the ocean

Actual Result:

Shows somewhere in the middle of the ocean

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/38435837/b70083c1-9763-497a-ad13-9bdc50d423c7

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b4f219078951c444
• Upwork Job ID: 1780696825171120128
• Last Price Increase: 2024-04-26
• Automatic offers:
• Ollyws | Contributor | 0
• wildan-m | Contributor | 0

Issue Owner

Current Issue Owner: @JmillsExpensify

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot[bot]]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[quinthar]

What is this issue waiting on? It's already been reproduced by me and Applause.

[melvin-bot[bot]]

@JmillsExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[quinthar]

Bump; what are next steps @JmillsExpensify ?

[JmillsExpensify]

Ah missed this. Let me spin up an Android device in Browserstack to test.

[JmillsExpensify]

Hmm, I'm locked out of testing, so I'm going to add the external label so the community might re-produce the same.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01b4f219078951c444

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[quinthar]

@c3024 can you give an ETA please? This is super urgent, thanks!

[mallenexpensify]

@Ollyws , coming from here, you're able to reproduce and would like to be assigned, right? If so, please comment and I'll assign.

[Ollyws]

Yeah go ahead thanks @mallenexpensify

[melvin-bot[bot]]

Upwork job price has been updated to $500

[melvin-bot[bot]]

📣 @Ollyws 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[mallenexpensify]

Done, raised price to $500 since it's critical. Thx @Ollyws

[Ollyws]

This is reproducable for me just by clearing the app data (and thereby removing the location permission), it also seems to happen on any distance request not specifically track expense.

[quinthar]

@Ollyws thanks for taking this on, what's your ETA?

[Ollyws]

Unfortunately we have no proposals yet, but as soon as we get a decent proposal we should have it merged in a day or two. I'll post on slack to try and get some proposals coming in.

[quinthar]

Hm, no luck on proposals so far, what's the next step?

[Ollyws]

Given the urgency perhaps we should up the bounty to see if we can get some proposals coming in.

[melvin-bot[bot]]

Upwork job price has been updated to $1000

[mallenexpensify]

Bumped to $1000. If it doesn't get picked up by early next week we can check with an agency to see if they might be able to help.

[wildan-m]

Proposal

Please re-state the problem that we are trying to solve in this issue.

[P2P Distance] Opens to ocean on first load

What is the root cause of that problem?

There are several factors causing this issue.

1. The main cause remains unknown, but it occurs when the flyTo method is called during the initial app installation. The problem's source is unclear, but I am unable to replicate it in the mapbox-map-android library.

2. Within the rnmapbox setInitialCamera function, the CameraMode and duration are hardcoded, causing defaultSettings.animationDuration and defaultSetting.animationMode to be disregarded during the initial rendering, preventing changes from the react-native side.

What changes do you think we should make in order to solve the problem?

If we want to make changes in the upstream, we can suggest to the rnmapbox team:

Option 1. Eliminate the hardcoded value in setInitialCamera function. This way, Expensify will utilize defaultSetting.animationMode='easeTo' instead of none, and using easeTo works effectively.

Or Option 2. Modify the flyTo in this code to map.setCamera(mCameraUpdate), where the duration is always 0, eliminating the need for animation.

What alternative solutions did you explore? (Optional)

This is workaround:

Updating @rnmapbox/maps to the latest version (10.1.19)

And set the centerCoordinate directly in Mapbox.Camera will resolve the issue

                    <Mapbox.Camera
                        ref={cameraRef}
                        defaultSettings={{
                            centerCoordinate: currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location,
                            zoomLevel: initialState?.zoom,
                        }}
                        centerCoordinate ={currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location}
                    />

[shubham1206agra]

In this case, can we hold on RN upgrade?

[wildan-m]

Proposal Updated

I can confirm bump rnmapbox doesn't solve the issue.

Add workaround to the proposal

[Ollyws]

@wildan-m Thanks for the proposal but your solution of adding centerCoordinate is not fixing the issue for me.

[Ollyws]

The upstream issue seems to have been reported here https://github.com/rnmapbox/maps/issues/3449 but it's been sitting there for two weeks with no activity. Perhaps we could patch it ourselves?

[jjcoffee]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The map opens to the incorrect coordinates on first app load.

What is the root cause of that problem?

We are setting the currentPosition in useCallback hooks, e.g. here:

https://github.com/Expensify/App/blob/d296ef806743f7bdf40d8c8d243d95771996d33d/src/components/MapView/MapView.tsx#L41-L47

We don't have currentPosition as a dependency, which seems to be causing a race condition. If you set the coordinates directly here:

https://github.com/Expensify/App/blob/d296ef806743f7bdf40d8c8d243d95771996d33d/src/components/MapView/MapView.tsx#L164

e.g. using centerCoordinate: initialState?.location, then it loads fine.

What changes do you think we should make in order to solve the problem?

Add currentPosition to the dependency array of both useCallback hooks, here:

https://github.com/Expensify/App/blob/d296ef806743f7bdf40d8c8d243d95771996d33d/src/components/MapView/MapView.tsx#L47

and here:

https://github.com/Expensify/App/blob/d296ef806743f7bdf40d8c8d243d95771996d33d/src/components/MapView/MapView.tsx#L71

[jjcoffee]

@Ollyws I couldn't reproduce the upstream issue locally in the app, e.g. by setting centerCoordinate: initialState?.location here:

https://github.com/Expensify/App/blob/d296ef806743f7bdf40d8c8d243d95771996d33d/src/components/MapView/MapView.tsx#L164

[Ollyws]

e.g. using centerCoordinate: initialState?.location, then it loads fine.

@jjcoffee This works for you? For me it still opens to the ocean:

https://github.com/Expensify/App/assets/11609254/b22fbccd-a180-4ed0-8429-d2a2d31fde29

[jjcoffee]

This works for you? For me it still opens to the ocean

@Ollyws Sorry I should've been more specific there :smile: It works if you reject the location permission request, otherwise there's another useEffect that gets triggered that has the same issue I think (so it's initially set to initialState?.location and then gets set again).

[Ollyws]

Ah I see yeah it seems to work for me with a fixed location suggesting it's not an upstream issue. I think that's enought to be going on with, let's move forward with @jjcoffee's solution.

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[wildan-m]

@Ollyws using @jjcoffee solution, have you tried to clear storage/uninstall the app first? I think that will give different result. I can reproduce it in rnmapbox example

[wildan-m]

@Ollyws

Proposal Updated

My solution will work in combination of bumping the rnmapbox version to 10.1.19

[wildan-m]

@Ollyws

Proposal Updated

The root cause has been found in the upstream Add new main solution Move prev solution to alternative

[melvin-bot[bot]]

@JmillsExpensify @Ollyws @luacmartins this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[Ollyws]

Actually on further investigation it doesn't seem to be loading correctly with a fixed location, let's lay off any assignment while I investigate this further.

[jjcoffee]

Actually on further investigation it doesn't seem to be loading correctly with a fixed location

@Ollyws Hmm interesting, how are you testing that?

[Ollyws]

@jjcoffee Just replacing centerCoordinate: [-122.083922,37.4220936], in the defaultSettings. Those are the coordinates for San Fransico.

[jjcoffee]

@Ollyws It works fine for me if I comment out our additional code, i.e. lines 74-124. This is how it looks after doing that and setting centerCoordinate: [-122.083922,37.4220936] (and deleting app data).

https://github.com/Expensify/App/assets/27287420/ada0ef8a-6753-425b-be28-f2467484de37

[Ollyws]

@jjcoffee Strange, I'm getting different behaviour. Are you testing on an emulator or real device?

[Ollyws]

Updating the mapbox version and adding centerCoordinate ={currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location} as suggested by @wildan-m is working well for me, I'm thinking this may be sufficient until this gets fixed upstream.

[wildan-m]

@jjcoffee try clearing storage (not cache), and select 'Don't allow' when it asks for location permission.

[wildan-m]

@Ollyws My proposal updated.

Previous queue solution isn't working after retesting, but I have another suggestion for a potential upstream fix.

Updating the mapbox version and adding centerCoordinate ={currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location} as suggested by @wildan-m is working well for me, I'm thinking this may be sufficient until this gets fixed upstream.

I agree with this; some of their examples also fulfill both values or only use Camera.centerCoordinate without defaultSettings.centerCoordinate.I'm not sure why, but there might be a reason.

Example 1

        <Camera
          defaultSettings={{ centerCoordinate: basePosition, zoomLevel: 15 }}
          centerCoordinate={basePosition}
          zoomLevel={15}
        />

Example 2

        <Camera
          zoomLevel={zoomUnderTest}
          centerCoordinate={coordinatesUnderTest}
          animationMode="none"
          animationDuration={0}
        />

[jjcoffee]

@jjcoffee try clearing storage (not cache), and select 'Don't allow' when it asks for location permission.

@wildan-m I've tried all location permission options and always clear the storage fully (I can repro the issue itself consistently pre-changes). Not sure what could be causing the inconsistency!

[Ollyws]

Ok thanks for the discussion, I think the best option here is going with @wildan-m's suggestion of updating the mapbox version and adding centerCoordinate = {currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location}, especially as this is the way mapbox is implemented in the official examples.

🎀👀🎀 C+ reviewed

cc: @luacmartins

[melvin-bot[bot]]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot[bot]]

📣 @wildan-m 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[quinthar]

Woohoo! @wildan-m can you please give an ETA for completion? Thanks!