Setting up a table layout in React Native

Question

I\'m transitioning a React project into React Native and need help setting up a grid layout in React Native. I want to set up a 5-col by x-row (number of rows may vary) view

Answer 1

Using functional components:

(Specify the number of rows and columns in the array)

Create a Row component

function Row({ column }) {  
  return (
    
      {column.map((data) => (
        
      ))}
    
 );
}

Create a Cell component

function Cell({ data }) {
  return (
    
      {data}
    
  );
}

Create a Grid component

function Grid() {
  const data = [
    [15, 14, 13, 12],
    [11, 10, 9, 8],
    [7, 6, 5, 4],
    [0, 1, 2, 3],
  ];
  return (
    
      {data.map((column) => (
        
      ))}
    
  );
}

Style the components:

const styles = StyleSheet.create({
  gridContainer: {
      width: 220,
  },
  rowStyle: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around",
  },
  cellStyle: {
    flex: 1,
    margin: 10,
  },
});