search

Flipkart / recyclerlistview

High performance listview for React Native and web!
Apache License 2.0
5.25k stars 427 forks source link

JavaScript with staggered grid support. #76

Open ckdvivedi opened 6 years ago

ckdvivedi commented 6 years ago

You mentioned in document that "We built RecyclerListView which is a high performance list view written purely in JavaScript with staggered grid support."

Please provide instruction, How can I achieve staggered RecyclerListView .

ckdvivedi commented 6 years ago

Please provide solution, How can I achieve staggered RecyclerListView .

naqvitalha commented 6 years ago

Staggered in one dimension for now. Just return relevant dimensions in layout provider and it'll work. Did you try this?

ckdvivedi commented 6 years ago

I Tried but I want staggered grid as masonry layout. ex. Pinterest. With the changes in layout provider I am not able achieve this.

Please prefer this image https://cdn-images-1.medium.com/max/2000/1*ksTMskNDTgzgt07XpmYh2w.png

naqvitalha commented 6 years ago

Masonry cannot be done with current layout manager. You can however write your own. We will be opening it up soon anyway. Would you like to?

ckdvivedi commented 6 years ago

Sure. Thanks for your reply. I have to move another library project. BTW great library. Please provide support for masonry layout soon.

naqvitalha commented 6 years ago

Great.. We'll try to do that soon.

hovox commented 6 years ago

+1 for this issue. Is there a status update for this? Could you provide steps on how to implement custom layout manager ?

naqvitalha commented 6 years ago

Check this file https://github.com/Flipkart/recyclerlistview/blob/master/src/core/layoutmanager/LayoutManager.ts All the public methods here except getOffsetForIndex need to be implemented by you. If any of you can take it up I can go ahead and start opening up layout managers externally and provide documentation. Masonry will be a good start.

hovox commented 6 years ago

Hey @naqvitalha I have created a pull request , please check and let me know, although I hove not tested it, would be good to have unit tests.

ashokkumar88 commented 5 years ago

@ckdvivedi can u please inform which library you used for masonry?

dwidc commented 4 years ago

Hi, is this already solved? I've checked https://github.com/Flipkart/recyclerlistview/pull/175 hasn't been merged.

Otherwise I'm planning to add masonry layout for RecyclerListView.

raulclaudino commented 4 years ago

Hi, is this already solved? I've checked #175 hasn't been merged.

Otherwise I'm planning to add masonry layout for RecyclerListView.

Could you share with us?

dwidc commented 4 years ago

@raulclaudino It's already in pull request, #526

raulclaudino commented 4 years ago

@raulclaudino It's already in pull request, #526

I tried to implement, but I couldn't. The console says that the /dist folder does not exist. Need to compile this folder? Can you give me any instructions on how to run?

Thank you!

dwidc commented 4 years ago

@raulclaudino It's all on package.json "scripts": section. Just run `npm run clean', and then followed by 'npm run build'. It will build '/dist' folder.

It calls bash script so make sure you're on mac or linux or windows 10 wsl.

If you're on older windows just examine '/scripts/build.sh' and run its windows counterpart. For example : 

npx tslint 'src/**/*.{ts,tsx}'
cd src
npx file-directives REACT-NATIVE,RELEASE
cd..
npx tsc --outDir dist/reactnative

and so on.

usrbowe commented 1 year ago

Would it be easy to apply LayoutManager code from MasonryList in FlashList? @naqvitalha