How to create list of images with different sizes

[jon-moreira]

How to create list of images some like that

with images with different sizes?

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

[peacechen]

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]

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.