Add CSV Import to an Expo App

npx expo install expo-document-picker expo-file-system
npm install papaparse
npm install --save-dev @types/papaparse

import { useRef, useState } from "react";
import { Button, Text, View } from "react-native";
import * as DocumentPicker from "expo-document-picker";
import { File } from "expo-file-system";
import Papa from "papaparse";

type Contact = { name: string; email: string };
const MAX_BYTES = 1024 * 1024;
const MAX_ROWS = 500;

export function parseContacts(text: string): Contact[] {
  const parsed = Papa.parse<Record<string, string>>(text, {
    header: true,
    skipEmptyLines: "greedy",
    transformHeader: value => value.replace(/^\uFEFF/, "").trim().toLowerCase(),
  });
  if (parsed.errors.length) throw new Error("Fix the CSV formatting before importing.");
  const fields = parsed.meta.fields ?? [];
  if (!fields.includes("name") || !fields.includes("email")) {
    throw new Error("The file needs name and email columns.");
  }
  if (!parsed.data.length || parsed.data.length > MAX_ROWS) {
    throw new Error("Choose a file containing 1 to 500 contacts.");
  }
  const rows = parsed.data.map(row => ({
    name: row.name?.trim() ?? "",
    email: row.email?.trim().toLowerCase() ?? "",
  }));
  if (rows.some(row => !row.name || !row.email)) {
    throw new Error("Every contact needs a name and an email value.");
  }
  if (new Set(rows.map(row => row.email)).size !== rows.length) {
    throw new Error("The file contains duplicate email values.");
  }
  return rows;
}

export default function CsvPreview() {
  const [rows, setRows] = useState<Contact[]>([]);
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);
  const importing = useRef(false);

  async function chooseCsv() {
    if (importing.current) return;
    importing.current = true;
    setBusy(true);
    try {
      const result = await DocumentPicker.getDocumentAsync({
        type: "text/csv", multiple: false, copyToCacheDirectory: true,
      });
      if (result.canceled) return;
      const file = new File(result.assets[0].uri);
      if (file.size > MAX_BYTES) throw new Error("Choose a file smaller than 1 MB.");
      const contacts = parseContacts(await file.text());
      setRows(contacts);
      setMessage(`${contacts.length} contacts ready to review. Nothing saved yet.`);
    } catch (error) {
      setRows([]);
      setMessage(error instanceof Error ? error.message : "Could not read this CSV.");
    } finally {
      importing.current = false;
      setBusy(false);
    }
  }

  return (
    <View style={{ gap: 16, padding: 24 }}>
      <Button title="Import CSV" disabled={busy} onPress={chooseCsv} />
      <Text accessibilityLiveRegion="polite">{message}</Text>
      {rows.slice(0, 3).map(row => (
        <Text key={row.email}>{row.name} — {row.email}</Text>
      ))}
    </View>
  );
}