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.

These examples are released under CC0. Use them freely, no attribution required. They are provided as is, without warranty of any kind: review and adapt them to your project before use, as you are responsible for the outcome of applying them.