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

You can do this without any packages. If each row is exactly the same doing the following should solve your problem;

export default class Table extends Component {
    renderRow() {
        return (
            
                 { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
                
                
                
                
            
        );
    }

    render() {
        const data = [1, 2, 3, 4, 5];
        return (
            
            {
                data.map((datum) => { // This will render a row for each data element.
                    return this.renderRow();
                })
            }
            
        );
    }
}