Expo DOM Components — 'use dom'

"use dom";                           // ← directiva obligatoria

import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";

interface CampaignData {
  day: string;
  conversions: number;
  spend: number;
}

interface Props {
  campaignData: CampaignData[];
  onExportCSV: (rows: object[]) => Promise<void>;  // llama Share nativo
  currentUserId: string;
  dom: import("expo/dom").DOMProps;
}

export default function CampaignChart({ campaignData, onExportCSV, currentUserId }: Props) {
  return (
    <div style={{ padding: 20, fontFamily: "system-ui", background: "#0d1117" }}>
      <h3 style={{ color: "#e6edf3", marginBottom: 16 }}>
        Conversiones — {currentUserId}
      </h3>

      <LineChart width={360} height={220} data={campaignData}>
        <CartesianGrid strokeDasharray="3 3" stroke="#30363d" />
        <XAxis dataKey="day" stroke="#8b949e" />
        <YAxis stroke="#8b949e" />
        <Tooltip />
        <Line dataKey="conversions" stroke="#3fb950" strokeWidth={2} />
        <Line dataKey="spend" stroke="#58a6ff" strokeWidth={2} />
      </LineChart>

      <button onClick={() => onExportCSV(campaignData)}>
        Exportar CSV
      </button>
    </div>
  );
}

import { View, Text, Share } from "react-native";
import { useLocalSearchParams } from "expo-router";
import CampaignChart from "@/components/CampaignChart";  // DOM component

const CAMPAIGN_DATA = [
  { day: "Lun", conversions: 42, spend: 180 },
  { day: "Mar", conversions: 67, spend: 220 },
  { day: "Mié", conversions: 55, spend: 195 },
  { day: "Jue", conversions: 89, spend: 310 },
  { day: "Vie", conversions: 112, spend: 380 },
];

export default function AnalyticsScreen() {
  const { userId } = useLocalSearchParams();  // no disponible en DOM, pasar como prop

  return (
    <View style={{ flex: 1, background: "#0d1117" }}>
      <Text>CultivaDash Analytics</Text>

      <CampaignChart
        campaignData={CAMPAIGN_DATA}
        currentUserId={userId as string}
        onExportCSV={async (rows) => {
          await Share.share({ message: JSON.stringify(rows) });
        }}
        dom={{ style: { height: 320 }, scrollEnabled: false }}
      />
    </View>
  );
}