Can it render views instead images?

[SoldierCorp]

[brh55]

Technically no, the only reason is because rendering a masonry with just views is relatively easy to implement. This repository, however, includes additional code to handle and manage the images to ensure they fit perfectly, which isn't too easy to do.

That's not to say if this a particular use case that is desired, it does fall along the scope

[sandrotonon]

rendering a masonry with just views is relatively easy to implement

So how would you do that?

[brh55]

As long as it's columns without images, you would just use flexbox (justifyContent: 'space-between' + fixed widths for columns) as intended @glur4k

[sandrotonon]

Thanks for your reply but unfortunately its still not working...

My Code looks like this:

<View style={{
  borderWidth: 1,
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'space-between'
}}>
  {this.props.data.map((entry, index) => (
    <Card
      additionalStyles={{ width: 176 }}
      key={entry.description}
      date={entry.date}
      description={entry.description}
    />
  ))}
</View>

whereas it renders like this:

which is obviously not masonry-ish (the order is correct tho)?

[brh55]

@glur4k Right on track, the last thing you need is each column needs to be it's own view (set to it's respectable width) containing the list of cards. This avoids the limitations on heights being stretched out to match it's accommodating row. Hopefully that makes sense

[sandrotonon]

@brh55 Yeah but this would require a measurement of the cards height to determine in which column it should render. But since the height of a card is dynamic, I wound have to render all cards to determine their height with the onLayout function. And when this is done, everything would have to be re-rendered in the correct column.

Is this correct?

[brh55]

@glur4k Yes if you are trying to have even looking columns. Unless order matters then you wouldn't need to do this.

[sandrotonon]

@brh55 I don't exacly know what you mean. Could you provide a code example showing how to achieve what you mean? I would really appreciate this!

[Chaimae123]

did you find a solution to your problem ? I am facing the same issue !

[brh55]

I'm trying to split the core column logic into it's own for more general use cases such as video and custom views. It will be a bit of time as I figure out how to integrate it back into this as well.

[Nantris]

@brh55 this project looks amazing. Thanks very much for sharing it.

Is there any update on use with non-images? I'd also like to render just plain views.