Implement bidirectional scrolling in ecash

[jboniface]

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

---

Problem

We're trying to enable comment linking in Cash, and while developing the solution, we've hit a snag : in short, we're unsure how to load the specific report comment. At the moment, because of pagination when the fetchReportActions we’re just fetching 50 results. So if the report had 300 comments and we want the comment link to go to comment sequence number 100 it gets tricky because we have two options.

1. Have fetch report actions load actions 50 to 100 than 250 to 300. Or,
2. Load 100 to 300 actions.

If we go with option 2 it would be extremely slow since we load bottom to top so it would be a bad user experience to load the desired comment action last.

Option 1 sounds like the better user experience but then our current FlatList only loads more comments if you scroll up. This means the user can scroll up to load report comments between 1-50 but they will never be able to scroll down to load report comments between 100 - 150.

Solution ?

Create a PR to build bidirectional scrolling so that we can load comments onStart or onEnd and then we continue with comment linking. This way even if the comment is pretty old the user will be able to scroll up and down to load additional comments using pagination.

Discussion

As per above, we're exploring whether we want to build our own FlatList component to support bidirectional scrolling, but we need to plot out the actual approach for implementation to determine if it would be feasible.

Ultimately, the question is, does it make sense to build the features we want into FlatList, or should we build our own component?

cc @chiragsalian

I've posted a job for the research side of this discussion, you can view it here https://www.upwork.com/jobs/~01b0e6a74cd4c83a19

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[roryabraham]

cc @marcaaron I know you showed me a gist or draft PR a while back with an outline of an implementation. Do you still have that?

[kidroca]

Do you know the total size of chat items before or when the chat loads?
E.g. do you know you have a million messages in a chat or it's unknown until you fetch all of them

but they will never be able to scroll down to load report comments between 100 - 150.

What's the problem with starting in the middle and then append/prepend to the FlatList - you can (fetch and) insert more items to the bottom when you start to reach the bottom or insert more items to the top when you start to reach the top

[roryabraham]

Do you know the total size of chat items before or when the chat loads?

I'm 95% sure we could easily provide this information from the API.

[marcaaron]

Yes, we already know since the entire reportActionList gets downloaded when the app inits 🙃
(but the pagination and storage of messages happen in Report_GetHistory)

[marcaaron]

What's the problem with starting in the middle and then append/prepend to the FlatList

append works fine since there is an onEndReached method and we already use it for the one direction

prepend not so much for a couple of reasons:

1. There is no onStartReached - make could create our own by wrapping FlatList and looking at the scroll metrics to detect when the ScrollView has reached the "top" (or bottom rather in the inverted style)
2. When prepending items the content shifts. We might be able to solve this if we knew the total height of all items that we are prepending and could offset the scroll position. Perhaps there is a simpler way or something I'm missing.

[marcaaron]

This is something new I just noticed in the past few months that looks interesting

https://github.com/GetStream/react-native-bidirectional-infinite-scroll

Have no idea if it supports web They are working on web support - but I think we are basically trying to achieve the same thing as this package.

[kidroca]

This library seems to support everything you need at the moment

• onStartReached
• onEndReached
• virtualization
• maintain correct scroll position
• potentially fix the a11y and content being copied in reverse if you don't use the inverted version

It also supports the same virtualization props as the FlatList

This package is a wrapper around react-native's FlatList. So it accepts all the props from FlatList

Is it possible to create a new ChatList component based on that library and use it for Android and iOS, while desktop and web continue to use the existing FlatList (ReportActionsView) implementation.
When web support is added - the old FlatList can be dropped altogether

The point is if you try to create your own solution you'll basically create the same thing and have the same problems e.g. make it work for web

[marcaaron]

I can't speak for everyone, but I'm not sure if we would commit to using a library on the mobile side with only the hope that the web side would work out for us eventually (maybe if we can also test the web PR in progress and deem that it's heading in the right direction).

In any case, the first step would be to evaluate if such a library exists and can actually work for us (cross platform or not).

The point is if you try to create your own solution you'll basically create the same thing and have the same problems e.g. make it work for web

An alternative way to frame this is that if we create our own solution, we might have the same problems, but nothing can stop us from solving them.

[MelvinBot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.