React Native Patterns
Production React Native and Expo for Muse: Expo Router navigation, state separation, TanStack Query + Zod, virtualized lists, NativeWind styling, and secure token storage.
- What
- Production React Native and Expo for Muse: Expo Router navigation, state separation, TanStack Query + Zod, virtualized lists, NativeWind styling, and secure token storage.
- Cost
- Free
- Needs
- Use "React Native Patterns" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: practical patterns for building production React Native apps with Expo, so Muse writes mobile code that respects the platform instead of porting web habits. Assumes the managed Expo workflow (Expo Router, EAS, expo modules) on the New Architecture. Covers file-based routing under app/ with thin route files that validate deep-link params with Zod before use, state separation by concern (server state in TanStack Query or SWR, client UI state in Zustand or Jotai, route state in router params, form state in a form library, secrets in expo-secure-store, never AsyncStorage for tokens), data fetching with a server-cache library plus Zod validation at the boundary with explicit loading, error and empty states, list virtualization (FlatList, FlashList for large lists, memoized renderItem, stable keyExtractor, never map a big array inside a ScrollView), one consistent styling system (NativeWind or StyleSheet.create, never inline style objects on hot paths), and native APIs wrapped in use* hooks with cleanup (location, camera, notifications). Includes a catalog of mobile anti-patterns (duplicating server data into a client store, trusting deep-link params, shipping real secrets in the bundle) and best practices (thin routes, validate every external input, reanimated for UI-thread animation, safe areas and accessibility from the start). Library names are illustrative, the patterns matter more than the package. Use when building or editing Expo screens, components, navigation, or data layers, or reviewing RN code for mobile-specific issues. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: assumes managed Expo workflow and New Architecture, not bare React Native; named libraries are common options, any equivalent works; the skill guides, you still test on real devices. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseThe install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Use "React Native Patterns" with your Muse. Prerequisites: none to install. Pure guidance; an Expo / React Native project helps. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/react-native-patterns/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Build (or review) this screen following production React Native patterns: [paste code or describe the screen]." 3. Ask it to check state separation, list virtualization, Zod validation of route params and API responses, and secure token storage. Tip: paste an existing screen and ask "what mobile-specific issues do you see, and how would you fix them?" Safety: a skill is plain-text instructions; it runs nothing by itself. Review generated code before merging, and test on a real device.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.