Cursor rule: Expo screens & state

An auto-attached .mdc rule for screen thinness, typed route params, three-state rendering, and the query/store boundary.

---
description: Expo Router screen and state-management conventions
globs: app/**/*.tsx,components/**/*.tsx,stores/**/*.ts
alwaysApply: false
---

# Screen and state rules

- Screens are thin: data via hooks from `@/hooks/queries`, layout via shared
  components. A screen file over ~150 lines needs extraction.
- Server data = TanStack Query; client-only state = Zustand. Never mirror one
  into the other - it desyncs on refetch.
- Type route params:

```tsx
const { trailId } = useLocalSearchParams<{ trailId: string }>();
const { data, isPending, error } = useTrail(trailId);
if (error) return <ErrorState retry={refetch} />;
```

- Every data-bearing screen renders all three states: pending, error, empty.
  Follow @app/(tabs)/profile.tsx for the pattern.
- Platform forks use `.ios.tsx` / `.android.tsx` files, not `Platform.OS`
  conditionals inside render.

Estos ejemplos se publican bajo CC0: úsalos libremente, sin atribución. Se proveen tal cual, sin garantía de ningún tipo: revísalos y adáptalos a tu proyecto antes de usarlos, ya que eres responsable del resultado de aplicarlos.