Skills react-native-architecture
📱

react-native-architecture

Safe 🌐 Network access⚙️ External commands

Design React Native architecture fast

Complex React Native apps can become hard to scale and maintain. This skill provides proven Expo architecture patterns and code examples for building production apps with navigation, offline sync, and native modules.

Supports: Claude Codex Code(CC)
📊 70 Adequate
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "react-native-architecture". Outline an Expo Router structure with auth and tabs

Expected outcome:

  • Group routes into (auth) and (tabs) folders
  • Use a root layout to set shared providers
  • Redirect unauthenticated users to login
  • Define tab screens with consistent icons

Using "react-native-architecture". Show how to persist data offline

Expected outcome:

  • Use React Query with AsyncStorage persister
  • Configure staleTime and gcTime for caching
  • Implement optimistic updates for better UX
  • Sync data when connection is restored

Using "react-native-architecture". What native modules should I use

Expected outcome:

  • expo-secure-store for secure token storage
  • expo-haptics for tactile feedback
  • expo-local-authentication for biometrics
  • expo-notifications for push alerts

Security Audit

Safe
v4 • 1/17/2026

This is a documentation-only skill containing architectural patterns and example code. Static analyzer flagged documentation keywords as security issues, but all findings are false positives. No executable code, file access, or network requests exist. The skill contains only markdown documentation with TypeScript/JavaScript examples for React Native development.

2
Files scanned
849
Lines analyzed
2
findings
4
Total audits

Risk Factors

🌐 Network access (6)
skill-report.json:41 skill-report.json:6 SKILL.md:668 SKILL.md:669 SKILL.md:670 SKILL.md:671
⚙️ External commands (22)
SKILL.md:23-37 SKILL.md:37-51 SKILL.md:51-59 SKILL.md:59-61 SKILL.md:61-80 SKILL.md:80-86 SKILL.md:86-158 SKILL.md:158-162 SKILL.md:162-242 SKILL.md:242-246 SKILL.md:246-329 SKILL.md:329-333 SKILL.md:333-426 SKILL.md:426-430 SKILL.md:430-485 SKILL.md:485-542 SKILL.md:542-546 SKILL.md:546-605 SKILL.md:605-609 SKILL.md:609-634 SKILL.md:634-636 SKILL.md:636-648
Audited by: claude View Audit History →

Quality Score

38
Architecture
100
Maintainability
85
Content
30
Community
100
Security
87
Spec Compliance

What You Can Build

Plan app structure

Define folder layout, routing groups, and providers for a new React Native app.

Add offline sync

Choose React Query persistence and optimistic update patterns for offline usage.

Improve performance

Select list rendering and memoization strategies for large datasets.

Try These Prompts

Start a new app 
Suggest a React Native project structure and Expo Router layout for tabs plus authentication.
Add auth flow 
Provide an AuthProvider pattern with route protection and secure token storage.
Offline first data 
Explain offline caching, optimistic updates, and invalidation with React Query.
Native integrations 
List best practices for haptics, biometrics, and push notifications in Expo.

Best Practices

  • Use Expo Router groups to organize navigation flows
  • Persist queries for offline access and fast startup
  • Test on real devices for platform behavior

Avoid

  • Storing secrets directly in source code
  • Fetching data inside render functions
  • Ignoring iOS and Android UI differences

Frequently Asked Questions

Is this compatible with Expo and bare React Native?
Yes. It focuses on Expo but notes when bare React Native differs.
What are the limits of this skill?
It provides architecture patterns and examples, not full app builds.
Can I integrate this with an existing app?
Yes. The patterns can be adapted to your current structure.
Does it access or store my data?
No. It is documentation only and does not access files or networks.
What if the examples do not match my setup?
Share your constraints and it can tailor the architecture guidance.
How does it compare to generic React Native tips?
It focuses on production architecture, routing, offline sync, and native modules.

Developer Details

Author

wshobson

License

MIT

Repository

https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/react-native-architecture

Ref

main

File structure

📄 SKILL.md