Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: recycling and re-rendering issues with Masonry #360

Merged
merged 3 commits into from
Aug 10, 2023

Conversation

gkartalis
Copy link
Contributor

@gkartalis gkartalis commented Aug 4, 2023

Description

When adding the lines for calling loadMore onEndReached of MasonryFlashlist we get this weird behavior in the example where the list flashes and returns to the top.

This PR fixes that but it requires exporting recyclerlistviewUnsafe from MasonryFlashListRef.

This is happening due to us relying on the recyclerlistviewUnsafe while it not existsing on the MasonryFlashListRef interface.

Opened a PR in flash-list about that in order to solve the re-rendering issues. and we need to merge this PR after the related flashlist pr gets merged and we bump the version here. turns out we don't need the other PR! Realised it after cleaning up the patch!

⚠️ I have patched the shopify library on this PR just to make sure that this solution works and will clean everything up before merging this.

Follow ups:

  • remove patch-package and clean patch
  • bump flashlist version for example
  • merge flashlist related pr before merging this one - actually I think we can merge this as it is since it has the @ts-expect-error above the actual recyclerlistview_unsafe line that protects it from crashing but at the same time might not work without patching the library / using a fork to make it actually work if shopify doesn't review / reject the PR.
Before After
before.mp4
after.mp4

@gkartalis gkartalis changed the title fix: recycling and re-rendering issues fix: recycling and re-rendering issues with Masonry Aug 4, 2023
@gkartalis gkartalis marked this pull request as ready for review August 6, 2023 10:29
// https://github.com/Shopify/flash-list/blob/2d31530ed447a314ec5429754c7ce88dad8fd087/src/FlashList.tsx#L829
// We are not accessing the right element or view of the Flashlist (recyclerlistview). So we need to give
// this ref the access to it
;(recyclerRef as any)(value?.recyclerlistview_unsafe)
Copy link
Contributor Author

@gkartalis gkartalis Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was not working properly before but like this it fixes the rendering issue! 🔥

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this and the recyclerRef + useEffect recyclerRef additions

@gkartalis
Copy link
Contributor Author

@andreialecu let me know if you have any suggestions on how to proceed! Would love to see this merged because it solves many issues for us at Artsy!

Turns out we don't explicitly need the shopify PR to get merged for this to work so they can be merged independently! 🎉

@andreialecu
Copy link
Collaborator

Alright. Going to merge this now.

@andreialecu andreialecu merged commit e6a53b3 into PedroBern:main Aug 10, 2023
1 check passed
@andreialecu
Copy link
Collaborator

Released as 6.2.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants