0

I have a container with the following styles for each row

    rowStyle: {
      flex: 1,
      flexDirection: 'row',
      paddingHorizontal: DEVICE_MARGIN,
      justifyContent: 'space-between'
    }

What I am getting currently on the mobile device is a enter image description here What I expect is as followsenter image description here Please note that the images are just for illustration purposes and all boxes in reality are of equal sizes.

Things I have tried include setting a margin for each tile

const marginStyle =
  index % cols !== cols - 1 ? { marginRight: gap } : undefined; and changing

the row styles to following

      rowStyle: {
          flex: 1,
          flexDirection: 'row',
          paddingHorizontal: DEVICE_MARGIN,
          justifyContent: 'flex-start'
        }
Delfin
  • 607
  • 7
  • 18
  • The above link is for actual CSS in the browser so the first two answers (using the `::after` and using `display: grid`) won't work in React Native, however the next answer of using filler elements will work. There are also a few other approaches that might work in React Native as well. – Henry Woody Jul 22 '22 at 00:18
  • @HenryWoody what if the number of items is dynamically returned say 5 or sometimes 6 and also the number of columns is dynamic ie depends on device size – Delfin Jul 22 '22 at 06:51
  • I guess you'll have to get the device dimensions and calculate how many elements you want to a row and then look at how many you have to make the fillers. – Henry Woody Jul 22 '22 at 17:36

0 Answers0