Recyclerlistview: JavaScript with staggered grid support.

[ckdvivedi]

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]

Please provide solution, How can I achieve staggered RecyclerListView .

[naqvitalha]

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

[ckdvivedi]

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]

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]

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

[naqvitalha]

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

[hovox]

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

[naqvitalha]

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]

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]

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

[dwidc]

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]

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]

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

[raulclaudino]

@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]

@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.