search

idibidiart / react-native-responsive-grid

Bringing the Web's Responsive Design to React Native
Other
379 stars 42 forks source link

How to create list of images with different sizes #34

Closed jon-moreira closed 6 years ago

jon-moreira commented 6 years ago

How to create list of images some like that wz49u with images with different sizes?

my example: (https://snack.expo.io/BJBx0g0NX)

peacechen commented 6 years ago

My first thought is to use a simple grid of Rows with 3 Columns each. Each cell has a fixed width, but a variable height. One row would look like:

<Row>
   <Col size={33}>
      <Image ...>
   </Col>
   <Col size={33}>
      <Image ...>
   </Col>
   <Col size={33}>
      <Image ...>
   </Col>
</Row>

Set the <Image> resize mode to contain https://facebook.github.io/react-native/docs/image#resizemode

idibidiart commented 6 years ago

Assume the above closes it?

The Pinterest like layout in the Readme leave no gaps between the images. I think it's visually preferred but it requires dynamic (JS based) layout, not just Flex styles. It would be straight forward with display:grid but RN doesn't offer out-of-the-box support for display:grid.