Setting Up Table Layout in React Native

Here is a properly structured example using View, Text, and StyleSheet from react-native to create a table where Col 1, Col 2, and Col 3 are merged into a single column.

Here is a properly structured React Native example that dynamically renders a table with a header row and dynamic data rows. We use Flexbox layout to manage column spans.

Explanation:

1. Using React Native Components

• View for layout and structuring the table.
• Text for displaying content inside the table cells.
• StyleSheet for styling.

2. Creating a Table Header Row / Merging Columns (Col 1, Col 2, Col 3)

• Used a single Text component to display merged data.
• The header row includes Col 1, Col 2, and Col 3 merged using flex:3.
• Columns 4 and 5 have individual headers using flex: 1

3. Dynamic Data Rows

• The tableData array contains row-wise data, which is rendered dynamically using .map().
• The first two columns are merged using flex: 3, while other columns remain flex: 1.

4. Using Flexbox for Layout

• flexDirection: “row” ensures that all columns appear in a single line.
• flex values specify how much space each column occupies relative to others.
• borderWidth and borderColor create a visible table structure.

This implementation ensures a flexible and scalable table that can dynamically adjust based on data requirements without using third-party libraries.