Create a floor plan with React Native

Question

How can i do something like

in React Native?

I tried just with flexDirection: rowand then a <View>for each individual line.

But I need to determine the number of seats in each row and change the horizontal position for every second row. However, some lines do not differ horizontally, so I need to determine if the line moves a little horizontally.

I think it can be done with

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

and then scroll through all the lines

<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 smart way and how to move places relative to other rows.

Answer 1

, , , justifyContent: center. - - , , .

, , , .

Answer 2

justifyContent: 'center' and alignItems: 'center' to view, .

import React, { Component } from 'react';
import { View } from 'react-native';

export default class App extends Component {
  render() {
      const rows = [
      { numSeats: 10, shifted: true },
      { numSeats: 11, shifted: false },
      { numSeats: 7, shifted: true },
      { numSeats: 10, shifted: true },
    ];
    return (
      <View style={{ padding: 50 }}>
          {rows.map((row) => {
              return (
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    {Array(row.numSeats).fill(null).map(() => {
                        return <View style={{ width: 20, height: 20, backgroundColor: 'orange', margin: 5 }} />;
                    }
                )}
            </View>     
         );
          })
         }
      </View>
      );
    }
  }

Answer 3

: , , ? , "VIP", "", , "" ( ), . :

// 1:ordered 2:VIP 3:normal 4:unreal(for 15th row gaps)
const seatMap = [
  [2,2,2,2,2,2,2,1,1,1,1,1,2,2,2,2,2,2,2], // 1st row
  [2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,2,2,2], // 2st row
  ...,
  [3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3], // 15th
  [3,3,3,3,3,2,3,3,3,3,3,3,3,3,2,3,3,3,3,3], // 16th
  [3,3,3,3,3,2,3,3,3,3,3,3,3,3,3,2,3,3,3,3,3]  // 17th
]

render(){
  return (
    <View>
      {
        seatMap.map(
          (row,rowIndex) => <View>
            {
              row.map(
                (type,colIndex)=><SeatBlock 
                                    type={ type } 
                                    row={ rowIndex } 
                                    col={ colIndex }/>
              )
            }
          </View>
        )
      }
    </View>
  )
}

pay attention to type 4, it’s not really a “seat type”, it’s a gap, we make it like a gap instead of a seat, and you can define 5 or 6 for a larger or smaller gap. Flexibility.

You can check the full code below.

<div data-snack-id="rJnoL_Xn-" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="dark" style="overflow:hidden;background:#212733;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Run codeHide result

Answer 4

You can use a similar approach:

seatsPerRow.map((numSeats, index) => {
  return (
    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
      <Text>{index}</Text>
      <View style={{flexDirection: 'row'}}>
      {
        Array(numSeats).fill(null).map(_ => {
         return <SeatSquare />
        })            
      }     
      </View>
      <Text>{index}</Text>
    </View>  
  )
});

Basically, setting justifyContent to a space should contain line indices aside and center the line containing the spaces.