How to create a table with React Native

Cynthia

React Native doesn't have a built-in table component like HTML does, but you can create a table-like layout using other components such as View, Text, and StyleSheet. Here's an example of how you can create a simple table-like layout in React Native:

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const TableRow = ({ data }) => (
  <View style={styles.row}>
    <Text style={styles.cell}>{data.name}</Text>
    <Text style={styles.cell}>{data.age}</Text>
    <Text style={styles.cell}>{data.location}</Text>
  </View>
);

const TableHeader = () => (
  <View style={styles.row}>
    <Text style={styles.headerCell}>Name</Text>
    <Text style={styles.headerCell}>Age</Text>
    <Text style={styles.headerCell}>Location</Text>
  </View>
);

const App = () => {
  const tableData = [
    { name: "John", age: 25, location: "New York" },
    { name: "Jane", age: 30, location: "Los Angeles" },
    { name: "Mike", age: 28, location: "Chicago" },
  ];

  return (
    <View style={styles.container}>
      <TableHeader />
      {tableData.map((item, index) => (
        <TableRow key={index} data={item} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    paddingHorizontal: 10,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderColor: "#ccc",
    paddingVertical: 10,
  },
  cell: {
    flex: 1,
    textAlign: "center",
  },
  headerCell: {
    flex: 1,
    fontWeight: "bold",
    textAlign: "center",
  },
});

export default App;

In this example, the TableRow component represents a row of data, and the TableHeader component represents the header row. The tableData array holds the data that you want to display in the table. The styling is done using the StyleSheet component.

Remember that this is a basic example, and you can enhance it further by adding more styling, handling interactions, and customizing the layout to match your requirements. If you need more complex table functionality, you might consider using third-party libraries specifically designed for creating tables in React Native.