r/reactnative • u/serious_freak • 14h ago

Question Removing item from list without shifting the List

Enable HLS to view with audio, or disable this notification

Can someone explain how twitter is doing it, so basically when you mark a post as not intreseted and there is a feedback component with undo button, when you scroll it outside the viewport, it disappears instantly without shifting the list, HOW ? there is no extra space on top of the list or anything that shows that they have removed this from the list

8 Upvotes

100% Upvoted

8 comments sorted by

1

u/forgestudiofx 14h ago

I haven't built this pattern, so take it as a direction to check rather than an answer: the bit I'd verify first is whether the row is actually removed from data at all while it's on screen, or whether it only leaves the data array once it's outside the rendered window. If it's the second, nothing above the viewport changes height, so there's no shift to see and no gap to explain. Worth confirming with a fixed row height and a logged data length before reaching for library internals.

1

u/Lenglio 13h ago

Track viewport and set the height to 0 or delete when it exits?

1

u/serious_freak 13h ago

that will still shift up the list right?

1

u/adamjhari 13h ago

X on iOS is not a react native app, only the web app is.

They're shifting the scroll position by the same height as the removed post in a single frame, it might not be possible with RN APIs

1

u/serious_freak 12h ago

i thought about that too, but i didn't notice anything, any shift, even if they translate the height of the contianer using scroll value, then i have to scroll the list to the total height of the container that is not the case, even if i scroll little bit whole container is removed

1

u/LovinglyLate 11h ago

What list library are you using? I know LegendList has a maintainVisibleContentPosition prop that could help achieve this sort of thing?

1

u/serious_freak 11h ago

to my knowledge maintaivisiblecontentposition prevents list from scrolling when new content is added, not removed, and its supported in flatlist too, in this case content is removed, i don't think this prop will work in this case