Estándares de revisión de código para RN

## Lista de verificación de revisión móvil
 
### Evidencia (cambios de UI / gesto / accesibilidad)
- [ ] Captura de pantalla o grabación de iOS adjunta
- [ ] Captura de pantalla o grabación de Android adjunta
- [ ] Se anotó verificación puntual de VoiceOver O TalkBack (qué flujo)
 
### Rendimiento
- [ ] Las listas usan FlashList/FlatList - no ScrollView para feeds largos
- [ ] `renderItem` / `keyExtractor` estable (useCallback o scope del módulo)
- [ ] Sin nuevas importaciones pesadas en `app/_layout.tsx` sin lazy route
 
### Accesibilidad
- [ ] `accessibilityLabel` en controles solo con icono
- [ ] `accessibilityRole` coincide con el comportamiento (button vs link)
- [ ] Tipo dinámico: layout sobrevive a fuente grande (o `maxFontSizeMultiplier` justificado)
 
### Límite nativo
- [ ] Nuevas dependencias añadidas vía `npx expo install <pkg>`
- [ ] Cambios en `app.config.ts` / plugin de configuración llamados en la descripción
- [ ] Clasificado: solo JS (OTA OK) vs requiere `eas build`
- [ ] `npx expo-doctor` verde (enlace CI)
 
### Arquitectura
- [ ] Archivo de ruta delgada - lógica en `features/`
- [ ] Sin importaciones profundas entre límites de feature
- [ ] Estado del servidor en TanStack Query - no duplicado en Zustand
 
### Versión (si toca eas.json, runtimeVersion, channels)
- [ ] Pasos de reversión en ticket / comentario de PR
- [ ] Bump de runtimeVersion justificado

// ❌ El revisor bloquea - ScrollView map de 200 pedidos
export function OrdersScreenBad() {
  const { data } = useOrders();
  return (
    <ScrollView>
      {data?.map((o) => <OrderRow key={o.id} order={o} />)}
    </ScrollView>
  );
}

// ✅ Ruta de aprobación - lista virtualizada + renderItem estable
import { FlashList } from "@shopify/flash-list";
import { useCallback } from "react";
 
export function OrdersScreen() {
  const { data } = useOrders();
  const renderItem = useCallback(
    ({ item }: { item: Order }) => <OrderRow order={item} />,
    []
  );
 
  return (
    <FlashList
      data={data ?? []}
      renderItem={renderItem}
      keyExtractor={(o) => o.id}
      estimatedItemSize={72}
    />
  );
}

// ❌ Bloquear - solo icono, sin nombre, rol incorrecto
<Pressable onPress={onSave}>
  <Icon name="check" />
</Pressable>

// ✅ Aprobar - nombre, rol, estado
<Pressable
  onPress={onSave}
  accessibilityRole="button"
  accessibilityLabel="Save changes"
  accessibilityState={{ disabled: !dirty, busy: saving }}
>
  <Icon name="check" accessible={false} />
</Pressable>

// package.json - el revisor verifica expo install, no npm major sin procesar
+ "expo-camera": "~17.0.10"

// app.config.ts - estrofa de plugin presente
plugins: [
  [
    "expo-camera",
    {
      cameraPermission: "Allow $(PRODUCT_NAME) to scan warehouse barcodes.",
    },
  ],
],

// ❌ Bloquear - fetch + ramificación en ruta app/
// app/(tabs)/orders.tsx
export default function OrdersRoute() {
  const [filter, setFilter] = useState("open");
  const { data } = useQuery({ queryKey: ["orders", filter], queryFn: () => fetchOrders(filter) });
  return <FlatList data={data} ... />;
}

// ✅ Aprobar - ruta delgada
// app/(tabs)/orders.tsx
export { OrdersScreen as default } from "@/features/orders/screens/OrdersScreen";