Componentes Compuestos

import { createContext, useContext, useState, type ReactNode } from "react";
import { Pressable, Text, View } from "react-native";
 
interface TabsContextValue {
  activeIndex: number;
  setActiveIndex: (index: number) => void;
}
 
const TabsContext = createContext<TabsContextValue | null>(null);
 
function useTabsContext() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error("Tabs.* debe usarse dentro de <Tabs>");
  return ctx;
}
 
function Tabs({ defaultIndex = 0, children }: { defaultIndex?: number; children: ReactNode }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <View>{children}</View>
    </TabsContext.Provider>
  );
}
 
function TabList({ children }: { children: ReactNode }) {
  return <View style={{ flexDirection: "row", gap: 8 }}>{children}</View>;
}
 
function Tab({ index, children }: { index: number; children: ReactNode }) {
  const { activeIndex, setActiveIndex } = useTabsContext();
  const active = activeIndex === index;
  return (
    <Pressable onPress={() => setActiveIndex(index)}>
      <Text style={{ fontWeight: active ? "700" : "400" }}>{children}</Text>
    </Pressable>
  );
}
 
function TabPanel({ index, children }: { index: number; children: ReactNode }) {
  const { activeIndex } = useTabsContext();
  if (activeIndex !== index) return null;
  return <View>{children}</View>;
}
 
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;
 
// Consumidor - reordena, omite o rediseña partes libremente
export function SettingsScreen() {
  return (
    <Tabs defaultIndex={0}>
      <Tabs.List>
        <Tabs.Tab index={0}>Cuenta</Tabs.Tab>
        <Tabs.Tab index={1}>Privacidad</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel index={0}>
        <Text>Configuración de cuenta</Text>
      </Tabs.Panel>
      <Tabs.Panel index={1}>
        <Text>Configuración de privacidad</Text>
      </Tabs.Panel>
    </Tabs>
  );
}

import {
  createContext,
  useCallback,
  useContext,
  useId,
  useMemo,
  useState,
  type ReactNode,
} from "react";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 
interface AccordionContextValue {
  openId: string | null;
  toggle: (id: string) => void;
}
 
const AccordionContext = createContext<AccordionContextValue | null>(null);
 
function useAccordion() {
  const ctx = useContext(AccordionContext);
  if (!ctx) throw new Error("Accordion.* debe usarse dentro de <Accordion>");
  return ctx;
}
 
interface AccordionProps {
  children: ReactNode;
  defaultOpenId?: string | null;
}
 
function Accordion({ children, defaultOpenId = null }: AccordionProps) {
  const [openId, setOpenId] = useState<string | null>(defaultOpenId);
 
  const toggle = useCallback((id: string) => {
    setOpenId((current) => (current === id ? null : id));
  }, []);
 
  const value = useMemo(() => ({ openId, toggle }), [openId, toggle]);
 
  return (
    <AccordionContext.Provider value={value}>
      <View style={styles.accordion}>{children}</View>
    </AccordionContext.Provider>
  );
}
 
interface ItemProps {
  title: string;
  children: ReactNode;
}
 
function AccordionItem({ title, children }: ItemProps) {
  const id = useId();
  const { openId, toggle } = useAccordion();
  const open = openId === id;
 
  return (
    <View style={styles.item}>
      <Pressable
        onPress={() => toggle(id)}
        style={styles.trigger}
        accessibilityRole="button"
        accessibilityState={{ expanded: open }}
      >
        <Text style={styles.triggerText}>{title}</Text>
        <Text style={styles.chevron}>{open ? "▾" : "▸"}</Text>
      </Pressable>
      {open ? <View style={styles.panel}>{children}</View> : null}
    </View>
  );
}
 
interface FieldGroupContextValue {
  error?: string;
}
 
const FieldGroupContext = createContext<FieldGroupContextValue>({});
 
interface FieldGroupProps {
  label: string;
  error?: string;
  children: ReactNode;
}
 
function FieldGroup({ label, error, children }: FieldGroupProps) {
  const value = useMemo(() => ({ error }), [error]);
  return (
    <FieldGroupContext.Provider value={value}>
      <View style={styles.fieldGroup}>
        <Text style={styles.label}>{label}</Text>
        {children}
        {error ? <Text style={styles.error}>{error}</Text> : null}
      </View>
    </FieldGroupContext.Provider>
  );
}
 
function FieldInput(props: React.ComponentProps<typeof TextInput>) {
  const { error } = useContext(FieldGroupContext);
  return (
    <TextInput
      {...props}
      style={[styles.input, error && styles.inputError, props.style]}
      placeholderTextColor="#94a3b8"
    />
  );
}
 
FieldGroup.Input = FieldInput;
 
export default function ProfileFormScreen() {
  const [name, setName] = useState("");
  const nameError = name.length > 0 && name.length < 2 ? "El nombre es muy corto" : undefined;
 
  return (
    <View style={styles.screen}>
      <Text style={styles.heading}>Perfil</Text>
 
      <Accordion defaultOpenId={null}>
        <AccordionItem title="Información personal">
          <FieldGroup label="Nombre mostrado" error={nameError}>
            <FieldGroup.Input
              value={name}
              onChangeText={setName}
              placeholder="Jane Doe"
              autoCapitalize="words"
            />
          </FieldGroup>
        </AccordionItem>
 
        <AccordionItem title="Notificaciones">
          <Text style={styles.body}>
            Las preferencias de push y email viven aquí. El acordeón mantiene la pantalla
            corta en teléfonos pequeños.
          </Text>
        </AccordionItem>
      </Accordion>
    </View>
  );
}
 
Accordion.Item = AccordionItem;
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, backgroundColor: "#f8fafc", gap: 16 },
  heading: { fontSize: 24, fontWeight: "700", color: "#0f172a" },
  accordion: { gap: 8 },
  item: { backgroundColor: "#fff", borderRadius: 12, overflow: "hidden" },
  trigger: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 16,
  },
  triggerText: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  chevron: { fontSize: 14, color: "#64748b" },
  panel: { paddingHorizontal: 16, paddingBottom: 16, gap: 12 },
  fieldGroup: { gap: 6 },
  label: { fontSize: 14, fontWeight: "600", color: "#334155" },
  input: {
    borderWidth: 1,
    borderColor: "#cbd5e1",
    borderRadius: 10,
    padding: 12,
    fontSize: 16,
    backgroundColor: "#fff",
    color: "#0f172a",
  },
  inputError: { borderColor: "#dc2626" },
  error: { fontSize: 13, color: "#dc2626" },
  body: { fontSize: 15, color: "#475569", lineHeight: 22 },
});

// Inestable - nuevo objeto cada render re-renderiza todos los consumidores
<TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
 
// Estable - memoriza; estabiliza setters con useCallback en la raíz
const value = useMemo(
  () => ({ activeIndex, setActiveIndex }),
  [activeIndex, setActiveIndex]
);

import type { ReactNode } from "react";
 
// Tipado de namespace con partes estáticas
type TabsComponent = ((props: TabsProps) => JSX.Element) & {
  List: typeof TabList;
  Tab: typeof Tab;
  Panel: typeof TabPanel;
};
 
const Tabs = RootTabs as TabsComponent;
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;
 
// Props discriminadas en elementos - combos inválidos fallan en tiempo de compilación
type FormFieldProps =
  | { kind: "text"; value: string; onChangeText: (t: string) => void }
  | { kind: "switch"; value: boolean; onValueChange: (v: boolean) => void };