react-native-masonry icon indicating copy to clipboard operation
react-native-masonry copied to clipboard

Can it render views instead images?

Open SoldierCorp opened this issue 8 years ago • 11 comments

SoldierCorp avatar Oct 04 '17 23:10 SoldierCorp

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

brh55 avatar Oct 05 '17 17:10 brh55

rendering a masonry with just views is relatively easy to implement

So how would you do that?

sandrotonon avatar Oct 31 '17 14:10 sandrotonon

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

brh55 avatar Oct 31 '17 17:10 brh55

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: masonry

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

sandrotonon avatar Nov 01 '17 22:11 sandrotonon

@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

brh55 avatar Nov 02 '17 21:11 brh55

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

sandrotonon avatar Nov 03 '17 10:11 sandrotonon

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

brh55 avatar Nov 03 '17 19:11 brh55

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

sandrotonon avatar Nov 03 '17 19:11 sandrotonon

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

Chaimae123 avatar Jan 04 '18 13:01 Chaimae123

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.

brh55 avatar Jan 04 '18 18:01 brh55

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

Nantris avatar Dec 19 '18 21:12 Nantris