How to design a Matrix or Table like designs in react native?

1

I have an array, it contains four important variables such as "row", "column", "length" & "width", Now using this, I need to create and place elements in respective places using “row” & “column”, for example, take a look at the pic below, how to design a UI like this with the given array !:

Capture000

0,1,2,3 are rows and 0 - 9 are columns !

But, what am I getting is a straight line of placements, this is the code am using to iterate through the array:

finalSeat(){
        const { seats = [] } = this.state.selectedSeatLayouts;
        const page = seats.filter((x) => x.zIndex == 0);
        const columnCount = Math.max(...page.map(o => o.row));
        
        return (
            <ScrollView contentContainerStyle={{flex:1}}>
              {page.map((item) => (
                <View key={item.name}
                  style={{
                    borderWidth: 1,
                    borderRadius: 5,
                    width: 35 * item.width,
                    height: 35 * item.length,
                    backgroundColor: item.available === "true" ? '#fff' : 'lightgray',
                    margin: 3,
                  }}>
                  <Text>{item.name}</Text>
                </View>
              ))}
            </ScrollView>
          );

    }

And i have added a snack (Reference Snack) with all the codes and array at the bottom - please do check,

And note:

sqaure ( length = 1 , width =1)
Horizontal rectangle (length =2 , width=1)
Vertical rectangle (length = 1 , width = 2)

We can use the above data to form a layout I believe!

2

You can create tables in React just like you would in HTML - you can use HTML elements, things like CSS Grid, or libraries like Bootstrap, etc. Or you can make your own.

3

Am using React Native ! I believe i cant use that i RN - there are packages for tables but i don’t want to use third-party packages

4

Right. sorry missed that, then you’re going to have to build your own. I would probably use a FlatList, depending on how long this could be. But it’s just going to be some Views and some CSS. How would you approach this if you were building this out of HTML, using divs and spans? Try that out first.

5

On another level, I might have a “rowGroup” of the two rows. So each one would have two chairs and two beds (I’m guessing that’s what those are.) You could still keep your data as it is but use some math to find the right rowGroup and the right row within that.

6

I believe we can use the table structure in HTML to place the elements! I think instead of FlatList, just using a map would be good! As you see, it isn’t a long list - it’s just a seat layout

7

You would normally use FlatList anyway, not really relevant whether it’s a long list or not (even if you build up rows from a set of View components it’s still going to be a list). And anyway with a FlatList you can specify the number of columns, which gives you the table structure immediately

8

Using either flatlist or map, its not creating the expected pic show on the pic ! its simply rendering a long vertical placement ! like which i show in the snack

9

It’s not either or, map’s just a function for mapping over an array (which FlatList already does for you if you use that, but you’d normally map the data so it matches what it needs as a prop anyway). The two options are ScrollList or FlatList. You’re currently using ScrollList, but I can’t see how you’re building the rows here, you seem to be just shoving everything in a single container. As @kevinSmith says, you should be thinking about how you would build a table structure in HTML out of divs/spans – it should be something like

<ScrollList>
  { yourData.map(datum => (
    <View (row)>
      <View (col1)>{ Text or image or whatever }</View>
      <View (col2)>{ Text or image or whatever }</View>
      .......
      <View (colN)>{ Text or image or whatever }</View>
    </View>
  ))}
</ScrollList>