In this lesson, you will learn how to create tabular data structures that gracefully collapse columns to maintain readability on smaller device screens.
When building tables in React Native, we often face a challenge: mobile screens are too narrow to display six columns of data simultaneously without crushing the text. To solve this, we use a "Responsive Collapse" pattern, where we transition from a horizontal grid to a stacked vertical layout based on the available screen width.
The Strategy
Instead of forcing a fixed width, we treat each row as a flex container with flexDirection set to row. We then use a responsive breakpoint—typically detected via the useWindowDimensions hook—to toggle between row and column layouts.
Consider this structural approach:
const TableRow = ({ data, isSmallScreen }) => (
<View style={[
styles.row,
{ flexDirection: isSmallScreen ? 'column' : 'row' }
]}>
<Text style={styles.cell}>{data.name}</Text>
<Text style={styles.cell}>{data.date}</Text>
<Text style={styles.cell}>{data.status}</Text>
</View>
);
Implementing the Collapse
When isSmallScreen is true, the flexDirection: 'column' forces the Text components to stack vertically. To keep the UI clean, you should apply specific styling to the labels in mobile mode. You might hide header titles or prepend labels (e.g., "Status: Active") only when the layout is vertical.
This approach ensures that your data remains accessible regardless of the device width. By treating the row as a flexible container, you avoid the common pitfalls of horizontal scrolling tables, which can be frustrating for users to navigate on mobile devices. Always prioritize a vertical stack for mobile to ensure your Flexbox logic handles the content flow naturally, rather than clipping it off the edge of the screen.
Key Takeaway: Use conditional flexDirection based on screen dimensions to transform wide, horizontal table rows into readable, stacked vertical lists on small displays.