Action Badge: Vertically center deep-linked content instead of bottom-aligning

[MelvinBot]

Problem

When clicking on an action badge to deep link to a specific report action, the linked content appears at the bottom of the visible area. This means there is additional content below the deep-linked message that the user can't see without scrolling, which is disorienting.

Expected Behavior

The deep-linked content should be vertically centered in the visible area, so the user can see context both above and below the linked message.

Context

This is a refinement to the deep linking behavior implemented in #87166. The current bottom-aligned positioning works but doesn't provide the best user experience — centering the content gives users immediate visibility of surrounding context.

Slack thread: https://expensify.slack.com/archives/C07HPDRELLD/p1741658389133729

Issue Owner

Current Issue Owner: @aimane-chnaif

[chrispader]

Experimenting with different approaches enabling this in #51366.

We have a couple of options to achieve this:

• Use FlashList's initialScrollIndex property with a estimated view offset, to center report action based on the window/list height
  • Not ideal, because initially only the single report action is being rendered with whitespace around it.
  • This is the most straightforward approach though, and no special logic around FlashList is needed, since this behavior is implemented in FlashList itself.
  • Pro: The user immediately sees the targeted report action
  • Contra: Initially rendered with whitespace around the targeted report action

Screen.Recording.2026-04-23.at.20.14.28.mov

• Render the actual dataset and then manually scroll to the targeted report action
  • In this case, the approach would be to just render the list as usual and then manually scroll to the report action. In the meantime, we could show a skeleton loader on top of the list, so to the user it would look the same as if the list was sitll loading.
  • Pros:
    • We're able to properly calculate the offset needed to center the report action
    • The list is immediately shown fully, not just one item
  • Contra: Delays TTI until the list items have been measured and the

(without loading skeleton rendered on top)

Screen.Recording.2026-04-23.at.22.46.46.mov

---

Non-attractive solutions:

• Render a sliced dataset around the targeted report action (± estimated number of items before/after).
  • This approach is similar to what we are currently already doing in FlashLists useFlashListScrollKey implementation and what we also implemented for FlatList before in Open reports at first unread action #51366.
  • The problem here is, that we have to know how many report actions are going to be rendered and what their height is, to be able to center the message properly
  • Pro: The list is immediately shown fully, not just one item
  • Contra: It's hard to estimate the number of items around the targeted report action.

[chrispader]

I've made some more progress on the initialScrollIndex approach. Basically instead of showing the initial whitespace around the linked report action, we would just render a loading skeleton like we do right now as well.

The whitespace we are seeing around the linked report action in the beginning is due to the long render time of the individual messages. I've reproduced the same issue in a small repo project locally, where you can clearly see that the issue is when the list items' computation takes too long. This is something where we might want to look into improving performanace next

(The loading skeleton is going to be shown until also the older messages are loaded, this is currently not the case)

Screen.Recording.2026-05-11.at.20.33.31.mov

[quinthar]

Per https://expensify.slack.com/archives/C090P2M6DBL/p1779474538799079?thread_ts=1778545753.334329&cid=C090P2M6DBL, closing for now due to the slowdown on open.