How to make a table like UI in react native to render elements in it?

Question

My array as follows:

Array [
  Array [
    "3",
    "4",
    "9",
    "10",
    "15",
    "16",
    "21",
    "22",
    "27",
    "28",
    "33",
    "34",
  ],
  Array [
    "2",
    "5",
    "8",
    "11",
    "14",
    "17",
    "20",
    "23",
    "26",
    "29",
    "32",
    "35",
  ],
  Array [
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
    "36",
  ],
  Array [
    "1",
    "6",
    "7",
    "12",
    "13",
    "18",
    "19",
    "24",
    "25",
    "30",
    "31",
    "37",
  ],
]

So how to render the above array in react native like a matrix ? for example it has 4 arrays so the length of row will be 4 and inside each arrays there are about 12 elements so 12 columns, So there should be 4 rows and 12 columns - how to display this ?

My function:

seats = () => {
      

        let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) => {
            if (!r[row]) r[row] = [];
            r[row][column] = name;
            return r;
        }, []);
        
          return (
              arr2d.map((o, i) => {
                  return(
                    <View style={{ flexDirection: 'row' }} key={i}>
                    {
                        o.map((e, i) =>{
                            return(
                                <View 
                                style={{flex: 1}}
                                key={i}>
                                    <Text>{e}</Text>
                                </View>
                            )
                        })
                    }
                    </View>
                  )
              })
          );
    }

From the above am getting an output as like:

3
4
9
10
15
16
21
22
27
28
33
34
2
5
8
11
14
17
20
23
26
and so on...

But expected output is as follows,

1          2   3
6          5   4
7          8   9
12         11  10
13         14  15
18         17  16
19         20  21
24         23  22
25         26  27
30         29  28
31         32  33
37   36    35  34

Please guide and help

Answer 1

You can use rotate the array first and use flex.

    // Rotate array
  const rotateArray = arr2d[0].map((val, index) =>
    arr2d.map(row => row[index])
  );

  return (
    <View>
      {rotateArray.map((o, i) => {
        return (
          <View style={{flexDirection: 'row'}} key={i}>
            {o.reverse().map((e, i) => {
              return (
                <View
                  style={{flex: 1}}
                  key={i}
                >
                  <Text>{e}</Text>
                </View>
              );
            })}
          </View>
        );
      })}
    </View>
  );

Demo

Answer 2

Read more about Flexbox: https://reactnative.dev/docs/flexbox

return (
  <View style={{ flexDirection: 'column' }}>
    {arr2d.map((o) => {
        return(
          <View style={{ flexDirection: 'row' }} key={o}>
          {
              o.map((e) =>{
                  return(
                      <Text key={e}>{e}</Text>
                  )
              })
          }
          </View>
        )
    })}
  </View>
);