Creating a Table in React Native

React Native has no <table> equivalent – you build tabular data yourself with nested Views and flexbox, usually combined with FlatList for the rows.

1. Description

A table consists of a header row (fixed column titles) and several data rows – each row is a horizontal View (flexDirection: 'row') with several Text "cells", whose widths are proportional to each other via flex values.

2. Short example

<View style={{ flexDirection: 'row' }}>
  <Text style={{ flex: 2 }}>Name</Text>
  <Text style={{ flex: 1 }}>Price</Text>
</View>

3. Complete project: a product table

npx create-expo-app table-demo
cd table-demo

App.js

import { View, Text, FlatList, StyleSheet } from 'react-native';

const PRODUCTS = [
  { id: '1', name: 'Hiking Boots', category: 'Shoes', price: 89.99 },
  { id: '2', name: 'Backpack 30L', category: 'Bags', price: 59.5 },
  { id: '3', name: 'Rain Jacket', category: 'Jackets', price: 74.0 },
];

export default function App() {
  return (
    <View style={styles.container}>
      <View style={[styles.row, styles.headerRow]}>
        <Text style={[styles.cell, styles.headerText, { flex: 2 }]}>Name</Text>
        <Text style={[styles.cell, styles.headerText, { flex: 1.5 }]}>Category</Text>
        <Text style={[styles.cell, styles.headerText, { flex: 1, textAlign: 'right' }]}>Price</Text>
      </View>
      <FlatList
        data={PRODUCTS}
        keyExtractor={(item) => item.id}
        renderItem={({ item, index }) => (
          <View style={[styles.row, index % 2 === 1 && styles.rowEven]}>
            <Text style={[styles.cell, { flex: 2 }]}>{item.name}</Text>
            <Text style={[styles.cell, { flex: 1.5 }]}>{item.category}</Text>
            <Text style={[styles.cell, { flex: 1, textAlign: 'right' }]}>
              ${item.price.toFixed(2)}
            </Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  row: { flexDirection: 'row', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  headerRow: { borderBottomWidth: 2, borderBottomColor: '#111827' },
  headerText: { fontWeight: 'bold' },
  rowEven: { backgroundColor: '#f9fafb' },
  cell: { fontSize: 14 },
});

4. Explanation

flex: 2 vs. flex: 1.5 vs. flex: 1 – determines each column's relative width to the others (Name is twice as wide as Price, Category 1.5 times as wide).
The header row and data rows use EXACTLY the same flex values per column – only that keeps columns visually aligned.
index % 2 === 1 && styles.rowEven – alternating row colors ("zebra striping"), a common pattern for better readability of long tables.
textAlign: 'right' on the price cell – numeric values are conventionally right-aligned.

5. Outputs

Ausgabe

A table with a bold header row ("Name", "Category", "Price") and three data rows, alternating white/light gray backgrounds, prices right-aligned ("$89.99", "$59.50", "$74.00").