1---2name: building-react-native-application3description: Guides building Expo/React Native apps with TypeScript using a consistent architecture and library stack (NativeWind, React Navigation static config, TanStack Query, Zustand, Axios, React Native Reusables-style primitives in src/ui). Use when creating a new React Native app or updating architecture, UI, state, API, navigation, or styling to follow these conventions.4---56# React Native application78## Overview910Opinionated ecosystem for building Expo/React Native apps with a consistent architecture, library stack, and UI system (`src/ui`).1112### Tech stack1314| Layer | Choice |15| --- | --- |16| Runtime | Expo |17| Language | TypeScript |18| Styling | NativeWind, Tailwind CSS, class-variance-authority |19| Routing | React Navigation (static config, `src/routes`) |20| Server state | TanStack Query |21| Client global state | Zustand |22| HTTP | Axios |23| Dates | date-fns (`src/libs/date-utils/`) |24| Presentational UI | React Native Reusables-style primitives in `src/ui/` |2526## Agent workflow2728Follow this skill for Expo/React Native work. Match **Entry points** and every applicable **Task types** row; open every linked local reference before coding. For component work, open [creating-component](./references/creating-component.md) and follow its decision tree. Platform docs live in each reference’s **References** section.2930### Entry points3132Use the first matching row; combine when the task spans types.3334| Entry | When | Go to |35| --- | --- | --- |36| Component | Building, moving, or recategorizing any component | [creating-component](./references/creating-component.md) |37| Structure | Folder roles, dependency flow, or where a module belongs | [managing-project-structure](./references/managing-project-structure.md) |38| Task bundle | API, forms, styling, bootstrap, navigation, keyboard, fonts, splash | **Task types** table |39| Lookup | Known doc name or single reference | **Reference index** |4041### Task types4243Match every row that applies. Open every local link in **Docs** before coding.4445| Task type | Docs |46| --- | --- |47| New screen / feature | [managing-project-structure](./references/managing-project-structure.md), [creating-feature](./references/creating-feature.md), [creating-route-component](./references/creating-route-component.md), [creating-screen-component](./references/creating-screen-component.md), [creating-component](./references/creating-component.md) |48| UI primitive (`src/ui/`) | [creating-component](./references/creating-component.md), [creating-ui-component](./references/creating-ui-component.md), [discovering-registry-components](./references/discovering-registry-components.md), [managing-wrapper-components](./references/managing-wrapper-components.md), [add-registry-component.cjs](./scripts/add-registry-component.cjs) |49| Feature component | [creating-component](./references/creating-component.md), [creating-feature-component](./references/creating-feature-component.md), [managing-wrapper-components](./references/managing-wrapper-components.md) |50| Bottom sheet | [creating-component](./references/creating-component.md), [creating-bottom-sheet-component](./references/creating-bottom-sheet-component.md), [managing-wrapper-components](./references/managing-wrapper-components.md) |51| Async / list UI | [creating-component](./references/creating-component.md), [creating-async-component](./references/creating-async-component.md), [creating-api](./references/creating-api.md), [managing-state](./references/managing-state.md) |52| Form (single step) | [creating-form-component](./references/creating-form-component.md), [managing-form-error](./references/managing-form-error.md), [managing-state](./references/managing-state.md), [managing-date](./references/managing-date.md) |53| Multi-step form | [managing-stepper-hook](./references/managing-stepper-hook.md), [managing-stepper-form](./references/managing-stepper-form.md), [creating-form-component](./references/creating-form-component.md), [managing-form-error](./references/managing-form-error.md) |54| API + data hooks | [creating-api](./references/creating-api.md), [setting-up-axios](./references/setting-up-axios.md), [managing-api-error](./references/managing-api-error.md), [managing-state](./references/managing-state.md), [managing-date](./references/managing-date.md) |55| Date / time | [managing-date](./references/managing-date.md) |56| Refactor / move component | [creating-component](./references/creating-component.md) |57| Styling / theme | [setting-up-nativewind](./references/setting-up-nativewind.md), [managing-styling](./references/managing-styling.md), [setting-up-theming](./references/setting-up-theming.md), [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md), [setting-up-navigation-theme](./references/setting-up-navigation-theme.md), [overriding-classname](./references/overriding-classname.md) |58| Navigation components & backgrounds | [creating-navigation-component](./references/creating-navigation-component.md), [setting-up-navigation-theme](./references/setting-up-navigation-theme.md), [managing-screen-background](./references/managing-screen-background.md) |59| Navigation hooks | [creating-route-component](./references/creating-route-component.md), [creating-navigation-component](./references/creating-navigation-component.md) |60| Keyboard | [Keyboard controller — Components](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/components-overview.md) |61| Fonts | [setting-up-theming](./references/setting-up-theming.md), [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md), [Expo — Fonts](https://docs.expo.dev/develop/user-interface/fonts/index.md) |62| Splash screen | [Expo — SplashScreen](https://docs.expo.dev/versions/latest/sdk/splash-screen.md) |63| Scaffold new app | [scaffolding-application](./references/scaffolding-application.md) |64| Project bootstrap | [managing-project-structure](./references/managing-project-structure.md), [managing-environment](./references/managing-environment.md), [managing-linting](./references/managing-linting.md), [managing-package-installs](./references/managing-package-installs.md), [setting-up-nativewind](./references/setting-up-nativewind.md), [setting-up-registry-components](./references/setting-up-registry-components.md) |65| Routing only | [creating-route-component](./references/creating-route-component.md), [creating-navigation-component](./references/creating-navigation-component.md) |6667## Reference index6869| Reference | Entry | Layer | Purpose |70| --- | --- | --- | --- |71| [creating-api](./references/creating-api.md) | | API | HTTP modules under `src/api/` |72| [creating-async-component](./references/creating-async-component.md) | | Component | Loading, error, and list UI wrappers |73| [creating-bottom-sheet-component](./references/creating-bottom-sheet-component.md) | | Component | Bottom sheet UI in `src/ui/BottomSheet/` |74| [creating-component](./references/creating-component.md) | Component | Component | Decision tree for any component work |75| [creating-feature](./references/creating-feature.md) | | Feature | Feature module folders and barrels |76| [creating-feature-component](./references/creating-feature-component.md) | | Component | Domain UI blocks in features |77| [creating-form-component](./references/creating-form-component.md) | | Form | Form fields and form shells |78| [creating-navigation-component](./references/creating-navigation-component.md) | | Route | Reusable headers, tab bars, drawer content |79| [creating-route-component](./references/creating-route-component.md) | | Route | `[Name][NavigatorType]` modules in `src/routes/` |80| [creating-screen-component](./references/creating-screen-component.md) | | Feature | Route-facing `*Screen` in features |81| [creating-ui-component](./references/creating-ui-component.md) | | Component | Shared primitives in `src/ui/` |82| [discovering-registry-components](./references/discovering-registry-components.md) | | Component | Registry lookup by intent and labels |83| [managing-api-error](./references/managing-api-error.md) | | API | API error handling patterns |84| [managing-date](./references/managing-date.md) | | Date | date-fns and `src/libs/date-utils/` |85| [managing-environment](./references/managing-environment.md) | | Setup | Feature `env.ts` and env vars |86| [managing-form-error](./references/managing-form-error.md) | | Form | Form validation and error display |87| [managing-linting](./references/managing-linting.md) | | Setup | ESLint and Prettier setup |88| [managing-package-installs](./references/managing-package-installs.md) | | Setup | Package manager detection and install scripts |89| [managing-project-structure](./references/managing-project-structure.md) | Structure | Architecture | Folder layout and dependency flow |90| [managing-screen-background](./references/managing-screen-background.md) | | Route | Screen background vs navigation theme |91| [managing-state](./references/managing-state.md) | | State | TanStack Query hooks and Zustand stores |92| [managing-stepper-form](./references/managing-stepper-form.md) | | Form | Multi-step form UI |93| [managing-stepper-hook](./references/managing-stepper-hook.md) | | Form | Multi-step form state hook |94| [managing-styling](./references/managing-styling.md) | | Styling | Styling conventions and tokens |95| [managing-wrapper-components](./references/managing-wrapper-components.md) | | Component | Wrapper and composition patterns |96| [overriding-classname](./references/overriding-classname.md) | | Styling | `className` override rules |97| [scaffolding-application](./references/scaffolding-application.md) | | Setup | Expo `blank-typescript` scaffold |98| [setting-up-axios](./references/setting-up-axios.md) | | API | Axios client setup |99| [setting-up-nativewind](./references/setting-up-nativewind.md) | | Styling | NativeWind install; pnpm isolated JSX runtime |100| [setting-up-navigation-theme](./references/setting-up-navigation-theme.md) | | Styling | React Navigation theme objects |101| [setting-up-registry-components](./references/setting-up-registry-components.md) | | Setup | Registry / `src/ui/` bootstrap |102| [setting-up-theming](./references/setting-up-theming.md) | | Styling | Design tokens and theme CSS |103| [setting-up-tailwind-theme](./references/setting-up-tailwind-theme.md) | | Styling | Tailwind / NativeWind theme config |
cedmandocdoc