react-native-mobile

This skill enforces React Native + Expo conventions for the src/mobile/ subtree. It depends_on: [clean-code, frontend-fundamentals, a11y] — universal code quality, three-state async UI, and accessibility checks load transitively. This skill adds ONLY mobile-specific concerns on top.

Anatomy reference: references/anatomy.md. Read that file BEFORE writing any new screen / component / hook.

Pre-Code Checklist

Before writing or modifying any .ts / .tsx file under src/mobile/:

• Read references/anatomy.md — file map and entity recipes.
• If touching a screen: read docs/playbooks/mobile-app.md.
• If touching offline / sync: read docs/engineering/offline-first.md.
• If touching animation: confirm worklet vs JS thread split.
• If touching API calls: read docs/api-contracts/error-format.md.

1. Architecture defaults

• Navigation: React Navigation v7 (stack + tabs). Every route lives under src/mobile/app/(tabs)/<route> or src/mobile/app/<route> if outside the tab bar.
• State: prefer hooks-local state. Cross-screen state goes through src/mobile/store/ (Zustand by default; swap is a stack-wide decision, not per-feature).
• Styling: StyleSheet API for static styles, NativeWind / Tailwind RN for utility-first when configured. NEVER inline style={{ }} for repeated tokens.
• Theming: read tokens from src/shared/contracts/design-tokens.ts — never hard-code colors / spacing.

2. Three-state async UI (mandatory)

Every screen that fetches data MUST handle three states explicitly:

if (loading) return <Skeleton />;
if (error)   return <ErrorView onRetry={retry} message={mapError(error)} />;
if (!data)   return <EmptyState />;
return <Content data={data} />;

If only happy path renders → fail in PR review.

3. Hermes + Reanimated worklet rules

• Functions executed on the UI thread MUST be marked with 'worklet':

  const onScroll = useAnimatedScrollHandler({
    onScroll: (event) => {
      'worklet';
      scrollY.value = event.contentOffset.y;
    },
  });