How will i do a pagination or lazy loading?

[arunkrishna39]

[ghost]

Your issue doesn't follow our guidelines. Please fix the following:

• Issue description cannot be empty (?)

Click here for details.

Thank you! :pray: _{This comment was made by GitMagic – Magically enforcing your contribution guidelines.}

[brh55]

Hey @arunkrishna39, Sorry I don't have either functionality implemented, but I do plan on implementing Lazy Loading when my current application development process is at this stage.

[srameshr]

@brh55 Eagerly waiting! Any time estimates?

[srameshr]

@brh55 Now that masonry implements flatlist, we should have this feature with onEndReached and ListFooterComponent right?

[kmcgill88]

@srameshr I believe the answer is no, not yet. @brh55's implementation of FlatList has not been merged yet. See #39

[srameshr]

@kmcgill88 Flatlist has been merged, but the FlatList has been wrapped by a ListView which has been deprecated.

[vvavepacket]

@srameshr do you think that if we add our own implementation in FlatList's onEndReached() and onRefresh(), we could do ininite scroll/pagination out of the box?

[srameshr]

What I am doing right now is, passing refresh component to ListView. Can you do a FlatList rewrite of the ListView implementation under Masonry.js

[brh55]

I've done a FlatList rewrite within the experiment branch -- it works, but not efficiently. Looks to be some sort of delay with the re-render time.

[vvavepacket]

guys, I dig deep into the code, and saw that FlatList is present inside Column.js (master branch). Now, I tried to add methods like onEndReached(). I noticed it is called during rendering when images are loading.. But if I try to manually scroll down, it doesn't get called. Any idea what to do so we can have FlatList's onEndReached() method works to enable pagination?

[vvavepacket]

@brh55 can you confirm that FlatList rewrite is only for 0.3.x version? @srameshr do you mean to create a FlatList rewrite for the master/0.4.x/latest one?

[srameshr]

@brh55 @vvavepacket I am on the master branch and there is a big delay during inital rendering.

There are two things here:

1. These is a ListView inside Masonry.js
2. There WAS list view inside Column.js but now it has been converted to flat list.

I am guessing that the ListView inside Masonry.js is responsible for the terrible rendering time.

[brh55]

If ListView is responsible then it's most likely the dataSource diff function. A quick way to check this is with removing line 19 + 42 in masonry, and replacing rowHasChanged with returning true and seeing if perhaps this is where the issue may lie.

[brh55]

@srameshr Could you give that a try on your app, and see if you notice any improvements?

[srameshr]

@brh55 Nope! Its still the same. It takes 15 seconds to render just one image.

[srameshr]

@brh55 I got it. I think its because of the remote images. If I serve it with static images, it renders in a flash but when the images are remote, it takes 15 seconds at minimum. I'm assuming its because you are calculating the dimensions of the image before rendering. Is it possible to just render the grid with minimumHeight and then insert images after it has been downloaded and the dimensions are calculated?

My bad! My images take 14 seconds to download on a web browser! Crazy! Im on AWS M4 xLarge instance.

[brh55]

What are your image sizes? It's deceiving on the apps and this component because they are resizing, but good role of thumb is 300kb or less. Unless it's high def is important of course.

[srameshr]

2.7 MB 😝 Im using a resizer now!

[brh55]

@srameshr best way to kill my bandwidth 🗡

[srameshr]

@brh55 Sorry for that. Il make sure I cross verify before posting an issue.

[brh55]

@srameshr haha no worries

[vvavepacket]

Were you guys able to implement pagination by using flatlist's onRefresh/onEndReached() methods?

[srameshr]

@vvavepacket Since the Masonry.js file still has ListView, I do something like https://github.com/brh55/react-native-masonry/issues/51. See the last but one comment in that.

[vvavepacket]

@srameshr i see that #51 is for pull to refresh. Did you tried about doing continous loading, like when user reaches bottom of list, the flatlist will continosuly fetch new data and add it?

[srameshr]

No, I have not yet tried that. But hopefully by the time I need it, ListView gets replaced by FlatList under masonry which supports InfinteLoading and Pull to refresh.

[srameshr]

@brh55 I think the elements in the grid that are not downloaded should have an empty placeholder at least with a loading icon. See the demo attached. After I refresh the view, the GIF that is in the second position is not rendered until its completely loaded.

I would suggest just returning the header and footer with the actual image being a <ActivityIndicator /> or any placeholder with a certain height.

[kesha-antonov]

Hello guys! How's it going?

Is it possible now to do loadMoreResults on onEndReached?

[srameshr]

@brh55 so infinite loading is a feature that lot of people are waiting for. FlatList provides it out of the box since it inherits ScrollView props.

So, until the ListView remains in Masonry.js, I dont think there is any way to provide this feature.

[brh55]

@srameshr I feel you, give me some time to think about a good way to implement this. I have two possible ways, but unsure of potential side-effects and can foresee a lot of potential bugs arising

[vvavepacket]

@brh55 let us know if u need to test out your idea :) we are ready testers any time :) , this feature looks promising and is in great need and will make plugin more awesome