agentsclimarketplace
Sign in

React native architecture

Skill Amey-Thakur/AI-SKILLS/skills/mobile/react-native-architecture

Structure React Native apps around clear native-module boundaries and decide honestly when RN fits. Use when starting or auditing a React Native codebase, or weighing RN against fully native development.From its SKILL.md

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill react-native-architecture

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.7 KB, 547 tokens by cl100k_base, as published. Nobody here has run it

React Native architecture

React Native earns its keep when one product team ships two platforms with mostly shared UI logic. The architecture question is always the same: what lives in JavaScript, what lives native, and how thin is the bridge between them.

Method

  1. Decide fit before structure. RN fits content- and form-driven apps with shared business logic. It fights you on heavy real-time graphics, background-centric apps (tracking, audio), and deep OS integration on day one. If the roadmap is 30%+ platform-specific capability, budget for native engineers regardless.
  2. Keep the JS/native boundary explicit and small. Wrap every native capability in one typed TypeScript module (src/native/), with its TurboModule or Nitro module behind it. UI code imports the wrapper, never the module directly; when implementations change, one file changes.
  3. Choose libraries by maintenance reality. Navigation: react navigation (JS-driven) unless you need native stack behavior everywhere. Lists: FlashList over FlatList for anything long. Animations: reanimated, which runs on the UI thread. Every native dependency you add is a build-breakage subscription; prefer JS-only where performance allows.
  4. Isolate platform divergence. Component.ios.tsx / Component.android.tsx for small forks; a platform/ capability layer when behavior differs structurally (permissions, files, notifications). Scattered Platform.OS === "ios" conditionals are the smell to refactor.
  5. Respect the threading model. JS runs on one thread: no JSON parsing of megabyte payloads or sync storage reads during interaction. Push heavy work behind InteractionManager, into reanimated worklets, or into a native module that does the work off-thread.
  6. Wire the escape hatches early. Crash reporting that symbolicates both JS and native stacks, and an over-the-air update service for JS-only fixes, with the store-policy limits understood. Retrofitting either after the first incident is twice the work.

Boundaries

  • RN does not remove the need to understand iOS and Android; it changes how often you touch them.
  • Brownfield embedding (RN screens inside an existing native app) is a different architecture with its own lifecycle bridging; do not apply this layout blindly there.
  • Expo's managed workflow accelerates the first year; audit its native module coverage against your roadmap before committing.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most architecture codebase skills give in 547 tokens

Counted across 858 of the 1,304 authors here whose files we hold, read 2026-09-06

  • Apply the deletion test to identify shallow modulesin 32 of 858, across 31 files
  • Read domain glossary and ADRs before exploringin 22 of 858, across 19 files
  • Use Tailwind and Mermaid via CDN for reportsin 21 of 858, across 18 files
  • Document architecture decision recordsin 20 of 858, across 12 files
  • Offer to record ADRs for rejected candidatesin 17 of 858, across 14 files
  • Limit primary navigation to four to seven itemsin 17 of 858, across 7 files
  • Write HTML report to the system temp directoryin 17 of 858, across 14 files
  • Read product marketing context before asking questionsin 16 of 858, across 6 files
  • Use Mermaid graph TD for visual sitemapsin 15 of 858, across 5 files
  • Ensure every page has at least one internal linkin 15 of 858, across 5 files
  • Use ASCII tree format for page hierarchy draftsin 15 of 858, across 5 files
  • Enforce lowercase URLs with hyphensin 15 of 858, across 5 files

Said here and by no other author read

  • Assess React Native fit before structuring
  • Wrap native capabilities in typed TypeScript modules
  • Import native wrappers instead of modules directly
  • Prefer JS-only libraries over native dependencies
  • Isolate platform divergence in separate files
  • Refactor scattered platform conditionals

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.