Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can it render views instead images? #59

Open
SoldierCorp opened this issue Oct 4, 2017 · 11 comments
Open

Can it render views instead images? #59

SoldierCorp opened this issue Oct 4, 2017 · 11 comments

Comments

@SoldierCorp
Copy link

No description provided.

@SoldierCorp SoldierCorp changed the title Can render views instead images? Can it render views instead images? Oct 4, 2017
@brh55
Copy link
Owner

brh55 commented Oct 5, 2017

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
Copy link

rendering a masonry with just views is relatively easy to implement

So how would you do that?

@brh55
Copy link
Owner

brh55 commented Oct 31, 2017

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

@sandrotonon
Copy link

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

@brh55
Copy link
Owner

brh55 commented Nov 2, 2017

@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
Copy link

@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
Copy link
Owner

brh55 commented Nov 3, 2017

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

@sandrotonon
Copy link

@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
Copy link

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

@brh55
Copy link
Owner

brh55 commented Jan 4, 2018

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
Copy link

Nantris commented Dec 19, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants