CRITICAL: [P2P Distance] [$250] Enable immediate slide scrolling without tap

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.62-6 Reproducible in staging?: y Reproducible in production?: 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/p1712975397589869

Action Performed:

1. Tap green FAB button
2. Select 'track expense'
3. Tap distance tab
4. Touch the screen and pause ever so briefly after touching the screen.
5. Touch the screen and immediately move

Expected Result:

Able to move the map with fingers when touching the screen

Actual Result:

I need to "tap and then slide" (where my finger needs to hold still for maybe 100ms before moving) rather than just "slide" (ie, where my finger can move immediately after touching the map, like in Google Maps).

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/1793014e-2d15-49d1-b581-b5fe8ef5594e

https://github.com/Expensify/App/assets/38435837/ebcc67b6-c966-4827-b231-4ed349cd39c5

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013a0e30e9fd5243ce
• Upwork Job ID: 1780282719880835072
• Last Price Increase: 2024-04-23
• Automatic offers:
• ikevin127 | Contributor | 0

[melvin-bot[bot]]

Triggered auto assignment to @zanyrenney (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.

[zanyrenney]

reviewed, assigining external.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~013a0e30e9fd5243ce

[melvin-bot[bot]]

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

[suneox]

Proposal

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

MapView conflict event with another component when scrolling on Android

What is the root cause of that problem?

The PanResponder on MapView sometimes has been terminated by DraggableFlatList and another places using PanResponderCapture event at ScreenWrapper and TabNavigator

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

We will add onMoveShouldSetPanResponderCapture and onStartShouldSetPanResponderCapture to MapView to early prevent conflict event with another component, and separate MapView/index.android.tsx, DraggableList/index.android.tsx to specific platform to avoid regression then update ListFooterComponent to bellow DraggableFlatList

Tested branch

What alternative solutions did you explore? (Optional)

[shahinyan11]

Proposal

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

[P2P Distance] Enable immediate slide scrolling without tap

What is the root cause of that problem?

Рere we are rendering the DistanceRequestFooter ( It contains MapView inside ) as a ListFooterComponent of the DraggableList, which causes the gestures of the MapView and the DraggableList to conflict.

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

1. Add a dragHitSlop prop to the DraggableFlatList, where the bottom key equal to the height of MapView in ListFooterComponent, to disable drag gestures on the MapView area. For that we need to measure the height of MapView in DraggableFlatList component. To achieve this we should update DraggableFlatList component as below.

function DraggableList<T>({renderClone, shouldUsePortal, ListFooterComponent, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
    const styles = useThemeStyles();
    const [mapViewHeight, setMapViewHeight] = useState(0)

    const EnhancedListFooterComponent = ListFooterComponent && React.cloneElement(ListFooterComponent, {
        onLayout: (event) => {
            const { height } = event.nativeEvent.layout;
            setMapViewHeight(height);
        },
    })

    return (
        <DraggableFlatList
            ref={ref}
            containerStyle={styles.flex1}
            contentContainerStyle={styles.flexGrow1}
            ListFooterComponentStyle={styles.flex1}
            dragHitSlop={{top:0,left:0,right:0, bottom:-mapViewHeight}}
            ListFooterComponent={EnhancedListFooterComponent}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...viewProps}
        />
    );
}

4. Step 3 also requires the following changes to work - Add ...props in props of DistanceRequestFooter component and {...props} on container of MapView

function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage, ...props}
...

<View {...props} style={styles.mapViewContainer} >

What alternative solutions did you explore? (Optional)

Or just use ListFooterComponent out of DraggableFlatList

[mollfpr]

@suneox @shahinyan11 Are you able to reproduce the issue in the emulator iOS and Android?

[shahinyan11]

@suneox @shahinyan11 Are you able to reproduce the issue in the emulator iOS and Android?

I tested on a real Android device and reproduced it. I think this is a case that is better tested on a real device.

[suneox]

@suneox @shahinyan11 Are you able to reproduce the issue in the emulator iOS and Android?

I just tested on real device

[zanyrenney]

@mollfpr please can you review the comments above and see if they work wiht the proposals?

[suneox]

Proposal updated

Add alternative solution and Tested branch

[quinthar]

What are the next steps? Are we waiting on @mollfpr to pick a proposal? What's the ETA on that?

[mollfpr]

Sorry for the delay. I just got my phone set up to test the issue.

@shahinyan11 Your solution doesn't look good on the web.

[shahinyan11]

@shahinyan11 Your solution doesn't look good on the web.

@mollfpr Are you about UI or functionality. Are you talking about the user interface or functionality? If you mean the UI, then there is a question of a slight change in styles

[mollfpr]

@suneox I'm testing your branch but the issue is still there.

https://github.com/Expensify/App/assets/25520267/d2283ff6-e6b2-4c54-ba37-44e28e0441bf

@shahinyan11 Could you please update your proposal to make it work on all platforms?

[quinthar]

@shahinyan11 Can you please give an ETA? Thanks!

[suneox]

@suneox I'm testing your branch but the issue is still there.

@mollfpr Are you testing on real device? I have test solution work well on my phone, could you please share about your device test?

[mollfpr]

@suneox Yes, I'm testing it on SG S23 Ultra. You can see the tap in the video in frames 0.11 and 0.15 is moving but the map is not.

[shahinyan11]

@shahinyan11 Can you please give an ETA? Thanks!

I will give updates today

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[shahinyan11]

I have problems with android build. so it can take more time

[shahinyan11]

@mollfpr I have one question. I noticed that my change caused MapView to start capturing navigator gestures. Is it ok ?

[zanyrenney]

bump @mollfpr please get back to @shahinyan11 on their question. Thanks!

[quinthar]

@shahinyan11 can you please elaborate on what these "navigation gestures" are? Do you think it's a good thing?

[shahinyan11]

@quinthar Sometimes navigation between tabs happens when we swipe from left to right on map

[melvin-bot[bot]]

📣 @ikevin127 🎉 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 📖

[neil-marcellini]

Assigning @ikevin127 as C+ from Slack here.

[suneox]

Update Tested branch based on my proposal

[ikevin127]

♻️ Proposals review in progress!

[shahinyan11]

Proposal

Updated