Setting up a table layout in React Native - 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. I've played around with the react-native-tableview-simple package, but I can't specify the span of a cell. I've also tried the react-native-flexbox-grid package, which I'm able to set up columns, but I'm still not able to set the span-width of a specific cell. I wonder if there's anything I can use.
For reference, I would like my table to look something along the lines like this:
|Col 1|Col 2|Col 3|Col 4|Col 5|
|------------------------------
Row 1| Text | Yes | No |
|------------------------------
Row 2| Text | Yes | No |
|------------------------------
Row 3| Text | Dropdown |

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 (
<View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
<View style={{ flex: 1, alignSelf: 'stretch' }} /> { /* Edit these as they are your cells. You may even take parameters to display different data / react elements etc. */}
<View style={{ flex: 1, alignSelf: 'stretch' }} />
<View style={{ flex: 1, alignSelf: 'stretch' }} />
<View style={{ flex: 1, alignSelf: 'stretch' }} />
<View style={{ flex: 1, alignSelf: 'stretch' }} />
</View>
);
}
render() {
const data = [1, 2, 3, 4, 5];
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{
data.map((datum) => { // This will render a row for each data element.
return this.renderRow();
})
}
</View>
);
}
}

Answer 2

After looking here for answers I discovered a really great library that behaves much like Bootstrap tables. I have found layout with React Native very challenging but this library delivers predictable layout results.
React Native Easy Grid
I agree that basic flex tables should be built in to React Native but until they are this library worked great for me.

Answer 3

Though it is an old post but I was looking for something similar asked in the question,
I have brainstormed and havoked the internet for the solution and the best solution I got was to import the react-native-table-component package to my project and prepare a decent table layout for my application to display data. There might be many more souls figuring out a way to do this and may I recommend this link to all your answers:This link is the npm package installer link which have explanation to all the code and have examples

Answer 4

Using functional components:
(Specify the number of rows and columns in the array)
Create a Row component
function Row({ column }) {
return (
<View style={styles.rowStyle}>
{column.map((data) => (
<Cell data={data} />
))}
</View>
);
}
Create a Cell component
function Cell({ data }) {
return (
<View style={styles.cellStyle}>
<Text>{data}</Text>
</View>
);
}
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 (
<View style={styles.gridContainer}>
{data.map((column) => (
<Row column={column} />
))}
</View>
);
}
Style the components:
const styles = StyleSheet.create({
gridContainer: {
width: 220,
},
rowStyle: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
},
cellStyle: {
flex: 1,
margin: 10,
},
});