React Native mobile patterns — Expo, navigation, NativeWind, platform code
Project structure, typed functional components, Platform-specific code, Expo Router, React Query hooks, NativeWind styling, safe area/keyboard handling, persisted Zustand auth store, anti-patterns, quick reference
- What
- Project structure, typed functional components, Platform-specific code, Expo Router, React Query hooks, NativeWind styling, safe area/keyboard handling, persisted Zustand auth store, anti-patterns, quick reference
- Cost
- Free
- Needs
- a React Native project (Expo or bare workflow) — the skill is a patterns guide the agent follows, not software
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @gentleman-programming's react-native: a patterns skill for React Native mobile development with Expo and the bare workflow. Covers the project structure (Expo Router groups, components, hooks, services, stores, utils), functional components with TypeScript, platform-specific code via Platform.select or .ios/.android file extensions, Expo Router navigation setup, React Query custom hooks, NativeWind (Tailwind for React Native) styling, safe-area and keyboard handling, and a persisted Zustand auth store. Also documents anti-patterns (inline styles everywhere, TouchableOpacity for everything, missing loading/error states) and a quick-reference table of commands and patterns. Honest caveats: single-file guidance with links to the official Expo/React Native/NativeWind docs rather than bundled references; some code examples are illustrative (e.g. referencing a '@/services/user' that doesn't ship with the skill). The skill's frontmatter states no license; the catalog manifest records MIT — manifest takes precedence. MIT licensed per the manifest. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a React Native project (Expo or bare workflow) — the skill is a patterns guide the agent follows, not software Install "React Native mobile patterns — Expo, navigation, NativeWind, platform code" for me. It gives my agent @gentleman-programming's mobile patterns: recommended project structure, typed functional components, platform-specific code (Platform.select or file extensions), Expo Router navigation, React Query data hooks, NativeWind styling, safe-area and keyboard handling, a persisted Zustand auth store pattern, anti-patterns to avoid, and a quick-reference table. License note: the skill's frontmatter states no license; the catalog manifest records MIT — manifest takes precedence. Repository: https://github.com/gentleman-programming/gentleman-skills/blob/main/community/react-native/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "react-native". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (nothing — it's a patterns guide the agent applies when writing React Native code). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
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.