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

Masonry layout manager and provider #526

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

dwidc
Copy link

@dwidc dwidc commented Jul 15, 2020

Added staggered grid / masonry layout.
I made this as #175 has no follow-ups.

Currently only support vertical orientation, horizontal layout is not yet implemented.

@fzp0723
Copy link

fzp0723 commented Aug 18, 2020

I use it by copy it to my code, but it work little strangely when load more data, it overlap the pre data.

@fzp0723
Copy link

fzp0723 commented Aug 18, 2020

@dwidc I find the reason. When call dataProvider.cloneWithRows method and not set firstModifiedIndex param, your relayoutFromIndex method will go wrong because the startIndex is not zero.

@dwidc
Copy link
Author

dwidc commented Aug 27, 2020

@Paul0523
Can you elaborate more? Maybe with some sample codes?

I never set firstModifiedIndex when calling dataProvider.cloneWithRows(), and relayoutFromIndex() works just fine.
If I remember correctly, relayoutFromIndex() can be called multiple times, and its startIndex param could be > 0.

@mshafex
Copy link

mshafex commented Jan 14, 2021

how to include this pr to my react native project
please help

@Mattesackboy
Copy link

Please merge/add masonry layout to this library! It would be the best thing ever 'cause there are no libraries that support infinite scroll + recycling + masonry!
See also this: #175
@naqvitalha @muskeinsingh

@lclrobert2020
Copy link

lclrobert2020 commented Oct 19, 2021

when using with infinite scroll, picture can't be added?
also, when using this grid, onEndReached will trigger twice?

@lclrobert2020
Copy link

lclrobert2020 commented Oct 19, 2021

when using with infinite scroll, picture can't be added? also, when using this grid, onEndReached will trigger twice?

Bug found,
it seems that the creator forget that array starts from 0, so that the algo can't add new items after the first time,
as it always finding the item with index+1

@chj-damon
Copy link

@dwidc any updates on this PR? also, can you provide us a demo to show How to use this new provider? Thank you very much!

@chj-damon
Copy link

@lclrobert2020 any update?

@lclrobert2020
Copy link

lclrobert2020 commented Jan 13, 2022

@lclrobert2020 any update?

I made it work a few months ago, but I forget where did I put my code,
I will update a working example asap

@chj-damon
Copy link

@lclrobert2020 Thank you so much!

@lclrobert2020
Copy link

lclrobert2020 commented Jan 14, 2022

@lclrobert2020 Thank you so much!

https://snack.expo.dev/@robertli93/grid_example

this is my expo snack

I have uploaded a working masonrylayoutmanager to the npm but I didn't have time to write readme,

this masonrylayoutmanager is a fixed version of other people's work ( sorry i forget who and where is the original)

so credit should also give to them

there are some minor problems with the snack e.g. using UNSAFE_componentWillMount, I will write a better one if I had time

@velidan
Copy link

velidan commented Jan 25, 2022

Thanks for sharing. Btw, does it support the responsive layout? I mean: on the screen-width resize how to change & redraw the item columns?

@mohity777
Copy link

Why is it not merged yet ??

@zyestin
Copy link

zyestin commented Mar 1, 2024

MasonryFlashList will meet your needs

Use High performance mode, have a look at Shopify/flash-list#946 (comment)

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.

10 participants