React-native-calendars: Use FlatList instead of ListView

[sibelius]

did you consider using FlatList instead of ListView?

[tautvilas]

Yes, as I understand this would be a worthy refactor (just there was no FlatList when we started the project). What do you think about it? You think refactor would be easy?

[sibelius]

I'll try to do this refactor, based on https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b

[tautvilas]

I see that FlatList does not have rowHasChanged prop, or am I missing something? I'm afraid that without rowHasChanged optimizations performance could be affected. What do you think @sibelius ?

[sibelius]

FlatList docs (https://facebook.github.io/react-native/docs/flatlist.html) uses PureComponent to handle optimization and avoid wasteful re-render

We can refactor in another branch, and compare both approaches

[tautvilas]

Sounds good. Also I did a hack for Android in ListView implementation because onChangeVisibleRows did not work on droid. So I implemented visible items change algo in onScroll. onViewableItemsChanged of FlatList is supposedly supported by both platforms so android specific onScroll implementation will not be needed anymore.:

https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.js#L173
https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.js#L136

https://react-native.canny.io/feature-requests/p/listview-onchangevisiblerows-android-support

[sibelius]

this would simplify a lot the code for sure

[shawngustaw]

I was curious about implementing having the agenda scroll infinitely in both directions and I think FlatList might make that a lot easier. I think one of the open PR's attempted to implement this as well so maybe something to look into:

https://github.com/facebook/react-native/blob/a3457486e39dc752799b1103ebe606224a8e8d32/Libraries/Experimental/FlatList.js#L152

[jkomyno]

So @sibelius, are you currently working to propose this pull request with FlatList instead of ListView?

[sibelius]

Not yet, feel free to send a PR

[tautvilas]

I did an initial refactor of CalendarList to FlatList. You can check out my progress in this branch:
https://github.com/wix/react-native-calendars/tree/flat-list

Basic functionality works, but it needs some polish. Currently there is an issue that on initial load only 1 month is visible.

Not sure if performance is better, but code now looks cleaner since I refactored CalendarItem to separate component and also don't need anymore the onScroll hack for android

[tautvilas]

@jkomyno you worked only on agenda flat-list right? because I am working on converting calendard-list in the branch

[tautvilas]

I'm glad to announce that CalendarList has been migrated to FlatList in v1.6.0. This simplified code considerably. Performance seems similar so far. Now we only need to migrate reservation-list to FlatList. this should be pretty straightforward.

[tautvilas]

Reservation list has been converted to flat list in 1.6.1. This concludes the FlatList effort :)