padosoft-react-native-conventionslisted

Use this skill when writing or reviewing React Native / Expo code — a screen, a component, a Zustand store, a React Query hook, a FlashList, a Reanimated animation, a navigation change, a tablet layout — and whenever a symptom like these shows up: "Maximum update depth exceeded", a list that jumps or overlaps while scrolling, an animation that starts but leaves the state wrong, a value that is stale right after being set, a colour that is unreadable in dark mode, a translation missing in one language only. It applies the conventions and the recurring mistakes distilled from two production apps. Do not use it for mobile security (padosoft-mobile-security-review), for what goes in a log (padosoft-logging-discipline), or for native module and build configuration.
padosoft/skills · ★ 1 · Web & Frontend · score 80

Install: claude install-skill padosoft/skills

# React Native conventions Rules distilled from the code review history of two production apps, where **90 of them are identical in both**. That is the filter: what survived in two different products, not what sounded right once. The complete catalogue, with stable IDs, is in [`references/rules.md`](references/rules.md). Read it when a check fires and you need the reasoning, or before a review, to scan the area you are touching. --- ## 0. How to use it ```bash git diff --name-only HEAD | grep -E '\.tsx?$' # or --cached, before committing ``` Review by **area touched**, not rule by rule: a change to a list needs §6, one to an animation §7. The areas below carry the rules that are broken most often; the catalogue has the rest. --- ## 1. Components: the design system, never the platform primitive Use the project's shared components — text, button, pressable, icon, image — never the bare React Native ones or a direct icon-library import. They carry theming, accessibility and the press feedback the platform expects, and bypassing one of them re-implements it worse. - `expo-image`, never `Image` from react-native. - Ripple/press feedback comes from the shared component: **never** a manual `active:opacity-*` on top of it. - Prefer a shared component's defaults to a local override; an inconsistent override is a bug in disguise. - **One component per file**, always. No `native/` or `screen/` subfolders inside `screens/` — flat. - No IIFE `(() => {…})()` inside JSX: extra