Create a floor plan with React Native

Question

How can I make something like

in React Native?

I have tried simply with flexDirection: row and then a <View> for every single row.

But I need to define the number of seats in every row and change the horizontal position for every second row. However, some rows don't differ in horizontal position, so I actually have to define whether the row is moved a bit horizontally.

I guess it could be done with

const rows = [
  { numSeats: 10, shifted: true },
  { numSeats: 11, shifted: false },
  { numSeats: 7, shifted: true },
  { numSeats: 10, shifted: true },
]

and then loop through all rows

<View>
  {rows.map((row, i) => (
    <View style={{ flexDirection: 'row' }}>
      {Array(row.numSeats).fill(null).map(_ => (
        <View style={{ width: 20, height: 20 }} />
      )}
    </View>
  )}
}

but I don't know if this is a clever way nor how to shift the seats relative to the other rows.

Answer 1

Rather then shifting all row maybe you can consider using justifyContent: center. Since the number of the seats - I assume - is known you can create fixed sized boxes for each row and centering would get them align as you needed.

On the other hand some seats have different margins in between so I suggest you to have that in your data and but margins according to that data.