ListView Grid/Custom Layouts

[yelled3]

I was looking into ListView docs and wanted to learn how to render different kind of layouts (aside from a simple table rows layout)
this seems like a fairly common use case for native apps.

I'm aware of https://github.com/lucholaf/react-native-grid-view but I think this is not the way to go and it still bounds you to a row layout (with more cells per row)

the only other reference I found was:
http://stackoverflow.com/questions/29394297/listview-grid-in-react-native/29395686#29395686

which looks like a good starting point.
I was thinking maybe there's a way to implement an equivalent to UICollectionViewFlowLayout
or a custom UICollectionViewLayout which will allow for more flexible layouts, such as Pinterest-like layouts.

i'm not 100% about a good interface for this, perhaps something like:

var listViewLayout = GridLayout(cellSize, cellSpacing)
<ListView layout=listViewLayout   .../>

or maybe just subclass ListView with GridListView which does about the same internally.

thoughts?

[syousif94]

I know this isn't a complete replacement for ListView, but to make a Pinterest like grid (or any grid), you just render a bunch of items in a ScrollView with the style properties flexWrap set to wrap and flexDirection set to row. ScrollView has an onScroll prop that you can use to emulate most of the features of ListView if you need them.

[rxb]

What are you looking for that styling a ListView in the way described in that StackOverflow doesn't handle?

[sahrens]

You could also fork ListView and rendering rows by appending to two different columns (assuming you need the perf and other features of ListView, otherwise just use a ScrollView).

[yelled3]

@syousif94 @rxb thank you for your answer;
I was trying to suggest that we extend the ListView component to support a fairly common use case - by easily allowing you to config it.

obviously the StackOverflow example is a valid solution if the intention is to leave the ListView component as minimal as possible.

that being said, the example is very not trivial, as you can see in the example description

You need to use a combination of flexbox, and the knowledge that ListView wraps ScrollView and so takes on its properties. With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.

IMO, most new comers to the project would find it difficult to implement a grid view, without any changes to the interface or the official docs.

@sahrens
perhaps adding a similar example to the docs, would help to clarify the issue.

[brentvatne]

@yelled3 - If you'd like to add an example to the docs that would be awesome! Layout is an interesting idea but ListView already needs some other work related to perf so this would be lower priority. A community module for this would be so fantastic though! Ping me on irc or twitter @notbrent if you need a hand with it

[yelled3]

@brentvatne thanks - will do :-)

[yelled3]

If you'd like to add an example to the docs that would be awesome!

@brentvatne I created an example repo:
https://github.com/yelled3/react-native-grid-example

where should I include this? in the ListView docs? add as a subfolder to /Examples/ ?

[brentvatne]

@yelled3 - you could add it as an additional example in the UIExplorer 😄

[sahrens]

@yelled3 Cool stuff - note that A) this would be much harder to do if ListView was backed by UITableView, and B) Pinterest layouts (re @syousif94) are a bit more complex since the elements are different heights, so you can't just use flex wrap.

[yelled3]

@brentvatne take a look: #1668

A) this would be much harder to do if ListView was backed by UITableView

@shayne then perhaps it should be backed by UICollectionView - this way it can support custom layouts (like Pinterest layout)

also, is wrapping UITableView on the project's roadmap?
it was my understanding that it would be very non-trivial to implement...

[outaTiME]

+1