[Due for payment 2025-07-18] [$250] Android - Distance - On switching waypoints, previously selected waypoint is shown briefly

[IuliiaHerets]

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: V9.1.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Money Requests

Action Performed:

1. Launch app
2. Tap fab - create expense - distance
3. Enter start&stop waypoints
4. Try to switch the waypoints

Expected Result:

When switching start&stop waypoints, previously selected waypoint must not be shown briefly.

Actual Result:

When switching start&stop waypoints, previously selected waypoint is shown briefly.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6748743_1740036913640.Screenrecorder-2025-02-20-12-59-33-759.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021892562514996343100
• Upwork Job ID: 1892562514996343100
• Last Price Increase: 2025-04-03
• Automatic offers:
• rohit9625 | Contributor | 107739006

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sonialiap

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[rohit9625]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-01 09:24:07 UTC.

Proposal

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

When switching between waypoint lists on Android, dragged waypoints briefly reappear or flicker at their previous position. This leads to a noticeable visual glitch that affects user experience.

What is the root cause of that problem?

We use NestableDraggableFlatList from the react-native-draggable-flatlist library to handle drag-and-drop interactions. The flicker is an upstream issue discussed here:

• GitHub Issue #434

• Source Code Reference

const animStyle = useAnimatedStyle(() => {
  // When activeKey becomes null at the end of a drag and the list reorders,
  // the animated style may apply before the next paint, causing a flicker.
  // Solution is to hold over the last animated value until the next onLayout.
  // (Not required in web)
  if (translate.value && !isWeb) {
    heldTanslate.value = translate.value;
  }
  const t = activeKey ? translate.value : heldTanslate.value;
  return {
    transform: [horizontalAnim.value ? { translateX: t } : { translateY: t }],
  };
}, [translate, activeKey]);

This tries to preserve the last animated drag offset (heldTranslate.value) to prevent a snap-to-zero when a drag ends. However, during some transitions, translate.value resets to 0 even though activeKey is still set,i.e., not null, which causes the flicker.

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

Since this PR fixing the issue was merged in the upstream and the issue is resolved in the new version(4.0.3) of the react-native-draggable-flatlist library, we should update the library version.

To upgrade this library:

• Remove node_modules
• Upgrade version 4.0.1 ==> 4.0.3 in package.json file
• Remove the outdated react-native-draggable-flatlist+4.0.1+001+initial.patch patch
• Then run npm install to install modules and apply patches
• However, we may encounter some errors while applying the other two patches we have for the library being upgraded
• To resolve errors/warnings, we can update those patches for the new version(4.0.3) by running:

npx patch-package react-native-draggable-flatlist

Note: This new version introduces a minor bug that is explained in this comment. I believe this can be tweaked from our side and should be handled in a separate issue.

Results:

Recent_Repro_After_Upgrade.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None, it's an upstream UI issue.

What alternative solutions did you explore? (Optional)

Alternatively, we can create a patch for react-native-draggable-flatlist, updating the animation logic to fallback correctly based on platform:

const t = isWeb ? translate.value : heldTranslate.value;

This ensures stability on Android by always using heldTranslate.value, which tracks the most recent non-zero position before a drag ends.

Why This Works:

• On Android (non-Web), the animation frame timing can be slightly delayed compared to state updates.

• Relying on heldTranslate.value ensures we use the last known offset even if translate.value becomes 0 prematurely.

• On Web, translate.value is consistent and safe to use directly, so we preserve the default behavior.

[melvin-bot]

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