Added `MasonryFlashList` which adds support for rendering masonry layouts #587

naqvitalha · 2022-09-07T16:59:47Z

Description

resolves #455
resolves #575
resolves #589

This PR adds support for Masonry layout rendering also referred to as Staggered Grid View layout.

It's implemented using core FlashList and I didn't plan to make it part of this repo (initially) because it's technically like a derivative. I changed my mind because at the end of the day masonry is a layout and how it's implemented shouldn't matter. Ideally, anything that can be built using FlashList can be kept out. Keeping it lean is a win and should keep the core quality high.

I took the liberty to fix two additional bugs I found while building this otherwise there's no change in core. I've added comments to those changes.

Why use this approach?

It can be implemented using nested lists without any drawbacks and also doesn't require a new layout algorithm on the native side. It's incredibly fast as well.

Performance

It's incredibly well performing. Compared to 2x2 non masonry this is just 2% slower which may very well be a measurement problem.

Known issue

There's a prop type warning being thrown by RLV which I'll address when we upgrade RLV the next time.

Reviewers’ hat-rack 🎩

Open fixture and try the masonry sample

Screenshots or videos (if needed)

Checklist

I have added a changelog entry following the Keep a Changelog guidelines.

src/FlashList.tsx

Nantris · 2022-09-20T22:32:10Z

How are the odds this will be merged?

naqvitalha · 2022-09-21T07:34:04Z

@fortmarek this is good to go IMO. Thoughts?

fortmarek · 2022-09-21T08:21:47Z

documentation/docs/guides/masonry-layout.md

+<img src="https://user-images.githubusercontent.com/7811728/188055598-41f5c961-0dd0-4bb9-bc6e-22d78596a036.png" height="500"/>
+</div>
+
+To get started, import `MasonryFlashList` from `@shopify/flash-list` and use it just like you would use `FlashList`:


Might be worth here just putting a code snippet? I know it will be basically identical with flash-list but imho still a good practice.

documentation/docs/guides/masonry-layout.md

fixture/src/Masonry.tsx

src/MasonryFlashList.tsx

fortmarek · 2022-09-21T08:38:07Z

src/MasonryFlashList.tsx

+        emptyScrollEvent.nativeEvent.doNotPropagate = true;
+        onScrollProxy?.(emptyScrollEvent);
+        emptyScrollEvent.nativeEvent.doNotPropagate = false;
+      }, 32);


32 is two frames which is the minimum I need.

let's also add information about this. The amount of time for two frames also depends on the screen refresh rate but I'm ok with treating 60 Hz as the default.

src/MasonryFlashList.tsx

fortmarek · 2022-09-21T08:50:54Z

I have only a couple of minor comments, mostly about the documentation.

Additionally, as mentioned here, for now I'd mark this component as unstable or alpha before we are more confident in the stability of this feature.

Co-authored-by: Marek Fořt <[email protected]>

naqvitalha · 2022-09-21T14:38:29Z

@fortmarek Addressed the comments! Thanks for the review again.
Regarding stability, it's very stable and ready for prime time. I don't see a need for marking it alpha or beta. The warning that you see is a proptype warning and doesn't impact stability in any way.

fortmarek

Let's goo 🚢 🚢

farhanhaider1 · 2022-12-25T21:18:26Z

This looks really good 👏
I have a couple of comments and questions but overall, I love the idea of having multiple FlashLists ❤️
Additionally, I got this warning when running the Masonry example:

This requires a proptype fix in RLV. I'll get to it later

any update on this?
i am still getting this warning.

naqvitalha · 2022-12-25T21:19:58Z

It should be fixed in v1.4.0

Nantris · 2023-01-22T00:25:47Z

Does overrideItemLayout not work with Masonry layout? If so, is that documented anywhere? We can't get overrideItemLayout working at all.

fortmarek · 2023-01-23T08:32:36Z

Does overrideItemLayout not work with Masonry layout? If so, is that documented anywhere? We can't get overrideItemLayout working at all.

Can you flag an issue for this, please? 🙏 I'm personally not aware that Masonry layout doesn't support overrideItemLayout.

naqvitalha · 2023-01-23T17:46:25Z

Yes, it's not possible to change spans in masonry. We'd appreciate a PR updating the docs!

Nantris · 2023-01-24T20:47:06Z

That's terribly upsetting to hear! We just did hours of work to implement MasonryFlashList. Isn't there some way to allow overrideItemLayout - even if it's imperfect? I'd much rather that to having to roll back hours of work - considering FlashList appears to be the future and I'm confident a good/proper solution will exist in the future even if it doesn't today.

Any chance to simply patch masonry to accept overrideItemLayout? Or some alternative approach? I've searched all afternoon without luck.

Nantris · 2023-01-24T22:23:51Z

@naqvitalha if this is treated as a docs-only issue - at minimum these pages need updating:

https://shopify.github.io/flash-list/docs/guides/section-list
- "but all of them are replaceable with existing props."
- Surely other properties are misleadingly treated as though they would work with masonry
https://shopify.github.io/flash-list/docs/guides/masonry
Does getItemType work in Masonry? If so, what use is it?
ItemSeparatorComponent crashes the list

There are a lot of places that will need updating to specify things that don't work in masonry mode it seems.

Since this is likely to be a high demand feature in the long run, it seems better to focus on adding it in the near to medium-term future - but that's easy for me to say as I'm not a maintainer.

coofzilla · 2023-07-26T00:54:52Z

any update on overrideItemLayout? I just tried implementing to adjust the spans but I guess its still not supported?

Nantris · 2023-07-26T19:09:26Z

The docs were never updated as far as I know. It sure would be nice if this was supported.

naqvitalha and others added 25 commits August 29, 2022 14:00

Added support for masonry

6a4a4f1

Fixed index calculations

000bd08

simplified on end reached

c0bdbf2

Fix refs

d0f9489

Fix viewability events

33229fa

Added masonry sample

c6bc61b

Empty list added

55a5662

unused items removed

9c48478

fix display name

88d3d00

Fixed viewability precision

c58bf39

Added some comments

f708be7

Fix header unmount

4c3f57f

Initial doc

d9bb88a

fix link

3cb9678

Fixed docs

96e54f0

Update masonry-layout.md

8660504

Improve docs

93bf355

Remove unused variables

2e75055

Added key extractor support

e40104b

Improve data set compute

7ad5dee

set horizontal to false

e76c89f

log removed

043fa0f

Added tests

32cd4b1

Added e2e test

95a2a80

Merge branch 'main' into masonry

67fdc2a

naqvitalha changed the title ~~Masonry~~ Added MasonryFlashList which adds support for rendering masonry layouts Sep 7, 2022

Add changelog

9147296

naqvitalha commented Sep 7, 2022

View reviewed changes

src/FlashList.tsx Show resolved Hide resolved

naqvitalha commented Sep 7, 2022

View reviewed changes

src/FlashList.tsx Show resolved Hide resolved

test fixes

b4fa940

naqvitalha and others added 3 commits September 16, 2022 13:19

Ignore lint

e1c85eb

Added some more comments

5227f35

Merge branch 'main' into masonry

fff9773

fortmarek reviewed Sep 21, 2022

View reviewed changes

naqvitalha and others added 9 commits September 21, 2022 07:22

Update documentation/docs/guides/masonry-layout.md

0ab98ca

Co-authored-by: Marek Fořt <[email protected]>

Update documentation/docs/guides/masonry-layout.md

1a233c8

Co-authored-by: Marek Fořt <[email protected]>

Update documentation/docs/guides/masonry-layout.md

024fe6d

Co-authored-by: Marek Fořt <[email protected]>

Update documentation/docs/guides/masonry-layout.md

7944889

Co-authored-by: Marek Fořt <[email protected]>

Update documentation/docs/guides/masonry-layout.md

225b714

Co-authored-by: Marek Fořt <[email protected]>

Update documentation/docs/guides/masonry-layout.md

a00fefb

Co-authored-by: Marek Fořt <[email protected]>

Update documentation/docs/guides/masonry-layout.md

47dce69

Co-authored-by: Marek Fořt <[email protected]>

Address some more review comments

72cbbfe

Added code sample

b3efcd0

fortmarek approved these changes Sep 21, 2022

View reviewed changes

naqvitalha merged commit b58b5a6 into main Sep 21, 2022

naqvitalha deleted the masonry branch September 21, 2022 17:03

fortmarek mentioned this pull request Jan 24, 2023

overrideItemLayout is not adjusting item span across columns #741

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added `MasonryFlashList` which adds support for rendering masonry layouts #587

Added `MasonryFlashList` which adds support for rendering masonry layouts #587

naqvitalha commented Sep 7, 2022 •

edited

Loading

Nantris commented Sep 20, 2022

naqvitalha commented Sep 21, 2022

fortmarek Sep 21, 2022

fortmarek Sep 21, 2022

fortmarek commented Sep 21, 2022

naqvitalha commented Sep 21, 2022

fortmarek left a comment

farhanhaider1 commented Dec 25, 2022

naqvitalha commented Dec 25, 2022

Nantris commented Jan 22, 2023

fortmarek commented Jan 23, 2023

naqvitalha commented Jan 23, 2023

Nantris commented Jan 24, 2023 •

edited

Loading

Nantris commented Jan 24, 2023 •

edited

Loading

coofzilla commented Jul 26, 2023

Nantris commented Jul 26, 2023

Added MasonryFlashList which adds support for rendering masonry layouts #587

Added MasonryFlashList which adds support for rendering masonry layouts #587

Conversation

naqvitalha commented Sep 7, 2022 • edited Loading

Description

Why use this approach?

Performance

Known issue

Reviewers’ hat-rack 🎩

Screenshots or videos (if needed)

Checklist

Nantris commented Sep 20, 2022

naqvitalha commented Sep 21, 2022

fortmarek Sep 21, 2022

Choose a reason for hiding this comment

fortmarek Sep 21, 2022

Choose a reason for hiding this comment

fortmarek commented Sep 21, 2022

naqvitalha commented Sep 21, 2022

fortmarek left a comment

Choose a reason for hiding this comment

farhanhaider1 commented Dec 25, 2022

naqvitalha commented Dec 25, 2022

Nantris commented Jan 22, 2023

fortmarek commented Jan 23, 2023

naqvitalha commented Jan 23, 2023

Nantris commented Jan 24, 2023 • edited Loading

Nantris commented Jan 24, 2023 • edited Loading

coofzilla commented Jul 26, 2023

Nantris commented Jul 26, 2023

Added `MasonryFlashList` which adds support for rendering masonry layouts #587

Added `MasonryFlashList` which adds support for rendering masonry layouts #587

naqvitalha commented Sep 7, 2022 •

edited

Loading

Nantris commented Jan 24, 2023 •

edited

Loading

Nantris commented Jan 24, 2023 •

edited

Loading