Agent skill

React Native Dev

by aiskillstore in aiskillstore/marketplace

React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and…

MITAuto-check passedMobile

Install React Native Dev

skills CLI
$ npx skills add aiskillstore/marketplace --skill react-native-dev -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install aiskillstore/marketplace react-native-dev --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/minimax-ai/react-native-dev .claude/skills/react-native-dev && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-native-dev
GitHub stars
430
Used in
1 other repo
Token cost
~1.8k tokens
SKILL.md length
609 words
Files
13 (incl. references)
Skills in repo
1,085
Repo updated
First seen
Licence
MIT

At a glance

React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and…

  • Works in 6 steps: Set entry point in package.json: "main":… → Add scheme in app.json: "scheme": "my-app" → Delete App.tsx and index.ts → …
  • : building React Native
  • SKILL.md covers References, Quick Reference, New Project Init and Core Principles, plus 1 more section
  • Calls npx and eas

What it does

React Native Dev is an agent skill from aiskillstore/marketplace. React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including reference files (for example `references/animations.md`, `references/components.md` and `references/engineering.md`).

It sits in Mobile, covering Cross-platform mobile apps, App store release and State management. It works with React Native, Expo, Tailwind CSS and MiniMax. The repository describes itself as: Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified. The licence is MIT.

When your agent uses it

  • : building React Native
  • Implementing animations
  • Optimizing performance
  • Deploying to App Store/Play Store

Example prompts

  • “/react-native-dev”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Set entry point in package.json: "main": "expo-router/entry"
  2. Add scheme in app.json: "scheme": "my-app"
  3. Delete App.tsx and index.ts
  4. Create app/_layout.tsx as root Stack layout
  5. Create app/(tabs)/_layout.tsx for tab navigation
  6. Create route files in app/(tabs)/ (see navigation.md)

What it can do on your machine

Read from SKILL.md and the folder at commit 4ac52da. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • eas

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Native Dev loads about 1.8k tokens when it runs, and up to ~21k if it reads all its reference files. Until then it costs about 134 tokens; SKILL.md has 609 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~134
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~21k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from aiskillstore/marketplace at commit 4ac52da, republished under its MIT licence (© aiskillstore). 609 words, ~1,810 tokens.

Download SKILL.mdSave it as .claude/skills/react-native-dev/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
react-native-dev
description
React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configuring Tailwind/NativeWind.
license
MIT
metadata.version
1.0.0
metadata.category
mobile
metadata.sources
expo/skills by Expo (https://github.com/expo/skills) — Native UI, navigation, and animation patterns, Expo documentation (docs.expo.dev), React Native…

React Native & Expo Development Guide

A practical guide for building production-ready React Native and Expo applications. Covers UI, animations, state, testing, performance, and deployment.

References

Consult these resources as needed:

Quick Reference

Component Preferences
PurposeUseInstead of
ListsFlashList (@shopify/flash-list) + memo itemsFlatList (no view recycling)
Imagesexpo-imageRN <Image> (no cache, no WebP)
PressPressableTouchableOpacity (legacy)
Audioexpo-audioexpo-av (deprecated)
Videoexpo-videoexpo-av (deprecated)
AnimationsReanimated 3RN Animated API (limited)
GesturesGesture HandlerPanResponder (legacy)
Platform checkprocess.env.EXPO_OSPlatform.OS
ContextReact.use()React.useContext() (React 18)
Safe area scrollcontentInsetAdjustmentBehavior="automatic"<SafeAreaView>
SF Symbolsexpo-image with source="sf:name"expo-symbols
Scaling Up
SituationConsider
Long lists with scroll jankVirtualized list libraries (e.g. FlashList)
Want Tailwind-style classesNativeWind v4
High-frequency storage readsSync-based storage (e.g. MMKV)
New project with ExpoExpo Router over bare React Navigation
State Management
State TypeSolution
Local UI stateuseState / useReducer
Shared app stateZustand or Jotai
Server / async dataReact Query
Form stateReact Hook Form + Zod
Performance Priorities
PriorityIssueFix
CRITICALLong list jankFlashList + memoized items
CRITICALLarge bundleAvoid barrel imports, enable R8
HIGHToo many re-rendersZustand selectors, React Compiler
HIGHSlow startupDisable bundle compression, native nav
MEDIUMAnimation dropsOnly animate transform/opacity

New Project Init

bash
# 1. Create project
npx create-expo-app@latest my-app --template blank-typescript
cd my-app

# 2. Install Expo Router + core deps
npx expo install expo-router react-native-safe-area-context react-native-screens

# 3. (Optional) Common extras
npx expo install expo-image react-native-reanimated react-native-gesture-handler

Then configure:

  1. Set entry point in package.json: "main": "expo-router/entry"
  2. Add scheme in app.json: "scheme": "my-app"
  3. Delete App.tsx and index.ts
  4. Create app/_layout.tsx as root Stack layout
  5. Create app/(tabs)/_layout.tsx for tab navigation
  6. Create route files in app/(tabs)/ (see navigation.md)

For web support, also install: npx expo install react-native-web react-dom @expo/metro-runtime

Show full SKILL.md (230 more words)Show less

Core Principles

Consult references before writing: when implementing navigation, lists, networking, or project setup, read the matching reference file above for patterns and pitfalls.

Try Expo Go first (npx expo start). Custom builds (eas build) only needed when using local Expo modules, Apple targets, or third-party native modules not in Expo Go.

Conditional rendering: use {count > 0 && <Text />} not {count && <Text />} (renders "0").

Animation rule: only animate transform and opacity — GPU-composited, no layout thrash.

Imports: always import directly from source, not barrel files — avoids bundle bloat.

Lists and images: before using FlatList or RN Image, check the Component Preferences table above — FlashList and expo-image are almost always the right choice.

Route files: always use kebab-case, never co-locate components/types/utils in app/.

Checklist

New Project Setup
  • tsconfig.json path aliases configured
  • EXPO_PUBLIC_API_URL env var set per environment
  • Root layout has GestureHandlerRootView (if using gestures)
  • contentInsetAdjustmentBehavior="automatic" on all scroll views
  • FlashList instead of FlatList for lists > 20 items
Before Shipping
  • Profile in --profile mode, fix frames > 16ms
  • Bundle analyzed (source-map-explorer), no barrel imports
  • R8 enabled for Android
  • Unit + component tests for critical paths
  • E2E flows for login, core feature, checkout

Flutter development → see flutter-dev skill. iOS native (UIKit/SwiftUI) → see ios-application-dev skill. Android native (Kotlin/Compose) → see android-native-dev skill.

React Native is a trademark of Meta Platforms, Inc. Expo is a trademark of 650 Industries, Inc. All other product names are trademarks of their respective owners.

© aiskillstore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (references) in skills/minimax-ai/react-native-dev of aiskillstore/marketplace.

  • SKILL.md
  • references/animations.md
  • references/components.md
  • references/engineering.md
  • references/forms.md
  • references/native-capabilities.md
  • references/navigation.md
  • references/networking.md
  • references/performance.md
  • references/state-management.md
  • references/styling.md
  • references/testing.md
  • skill-report.json

Open the folder on GitHubat commit 4ac52da

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in aiskillstore/marketplace, which our catalogue first saw on October 7, 2026.

Compare with similar skills

React Native Dev next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Native Dev compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Native Dev this skillaiskillstore/marketplace4301 repos~1.8kAutomated safety check: PassMIT
React NativeEliasOulkadi/shokunin114—~3kAutomated safety check: PassMIT
App Store Reviewsafaiyeh/app-store-review-skill3611 repos~3.4kAutomated safety check: PassMIT
Expo Tailwind SetupCherryHQ/cherry-studio-app4k8 repos~3kAutomated safety check: PassMIT
Weapp Tailwindcss React Nativeweapp-tailwindcss/weapp-tailwindcss1.9k—~403Automated safety check: PassMIT
Iapkit E2E Martiehyodotdev/openiap154—~5.4kAutomated safety check: NotesMIT

Similar skills

  • React Native

    EliasOulkadi/shokunin

    Build production React Native apps with Expo SDK 53+, Expo Router (file-based navigation), New Architecture (Fabric + TurboModules), FlashList, Reanimated 4, Zustand for state, Hermes, EAS Build…

    114 GitHub stars~3k tokensUpdated 2 days ago
    MobileAuto-check passed
  • App Store Review

    safaiyeh/app-store-review-skill

    Evaluates code against Apple's App Store Review Guidelines. An agent skill from safaiyeh/app-store-review-skill.

    361 GitHub starsUsed in 1 repo~3.4k tokens
    MobileAuto-check passed
  • Expo Tailwind Setup

    CherryHQ/cherry-studio-app

    Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

    4k GitHub starsUsed in 8 repos~3k tokens
    MobileAuto-check passed
  • Weapp Tailwindcss React Native

    weapp-tailwindcss/weapp-tailwindcss

    为 Expo/React Native 配置 @weapp-tailwindcss/react-native 0.2.5 的 Tailwind CSS 4 编译器、Metro virtual module、Babel JSX transform、style manifest、tw runtime、dark/ios/android/native variants。Use for Expo SDK…

    1.9k GitHub stars~403 tokensUpdated today
    MobileAuto-check passed
  • Iapkit E2E Martie

    hyodotdev/openiap

    Run IAPKit local receipt-validation E2E with the dev.hyo.martie React Native or Expo examples, the compiled packages/kit server, real Convex, and Apple or Google sandbox purchases.

    154 GitHub stars~5.4k tokensUpdated yesterday
    MobileAuto-check: notes
  • Uniwind

    CherryHQ/cherry-studio-app

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from CherryHQ/cherry-studio-app.

    4k GitHub stars~20k tokensUpdated 4 days ago
    MobileAuto-check: warnings

More from aiskillstore/marketplace

All 1,085 skills in this repo
  • Code Stats

    aiskillstore/marketplace

    Analyze codebase with tokei (fast line counts by language) and difft (semantic AST-aware diffs).

    430 GitHub starsUsed in 2 repos~697 tokens
    Auto-check: notes
  • Data Processing

    aiskillstore/marketplace

    Process JSON with jq and YAML/TOML with yq. An agent skill from aiskillstore/marketplace.

    430 GitHub starsUsed in 1 repo~720 tokens
    Auto-check: notes
  • Doc Scanner

    aiskillstore/marketplace

    Scans for project documentation files (AGENTS.md, CLAUDE.md, GEMINI.md, COPILOT.md, CURSOR.md, WARP.md, and 15+ other formats) and synthesizes guidance.

    430 GitHub starsUsed in 1 repo~644 tokens
    Auto-check: notes
  • File Search

    aiskillstore/marketplace

    Modern file and content search using fd, ripgrep (rg), and fzf.

    430 GitHub starsUsed in 1 repo~598 tokens
    Auto-check: notes
  • Find Replace

    aiskillstore/marketplace

    Modern find-and-replace using sd (simpler than sed) and batch replacement patterns.

    430 GitHub starsUsed in 1 repo~527 tokens
    Auto-check: notes
  • Investigating Codebases

    aiskillstore/marketplace

    Automatically activated when user asks how something works, wants to understand unfamiliar code, needs to explore a new codebase, or asks questions like "where is X implemented?", "how does Y…

    430 GitHub starsUsed in 1 repo~2.7k tokens
    Auto-check: notes

Categories

Questions about React Native Dev

What does React Native Dev do?

React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and…. React Native Dev is an agent skill from aiskillstore/marketplace. React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD).

When should I use React Native Dev?

React Native Dev fits situations like: : building React Native; implementing animations; optimizing performance; deploying to App Store/Play Store.

How do I install React Native Dev in Claude Code?

Run `npx skills add aiskillstore/marketplace --skill react-native-dev -a claude-code`. Or copy the skill folder (skills/minimax-ai/react-native-dev in aiskillstore/marketplace) into .claude/skills/react-native-dev in your project. Claude Code loads it when a task matches its description.

How do I install React Native Dev in Codex?

Run `npx skills add aiskillstore/marketplace --skill react-native-dev -a codex`. Or copy the skill folder (skills/minimax-ai/react-native-dev in aiskillstore/marketplace) into .agents/skills/react-native-dev in your project. Codex loads it when a task matches its description.

Can I use React Native Dev in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aiskillstore/marketplace --skill react-native-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-native-dev, .gemini/skills/react-native-dev, .github/skills/react-native-dev and .opencode/skills/react-native-dev in your project.

What does React Native Dev need to run?

Going by SKILL.md and its folder, React Native Dev needs the command-line tools its instructions call (npx and eas). Our summary lists: Node.js.

Does React Native Dev access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is React Native Dev safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Native Dev use?

React Native Dev is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Native Dev use?

About 1.8k tokens (SKILL.md is roughly 7.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 20k tokens, read only when the agent opens those files.

What are the alternatives to React Native Dev?

Skills that share tags, products or a category with React Native Dev: React Native (EliasOulkadi/shokunin, 114 stars), App Store Review (safaiyeh/app-store-review-skill, 361 stars), Expo Tailwind Setup (CherryHQ/cherry-studio-app, 4k stars) and Weapp Tailwindcss React Native (weapp-tailwindcss/weapp-tailwindcss, 1.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Native Dev?

aiskillstore (a GitHub organization) maintains it in aiskillstore/marketplace, which has 430 GitHub stars. The repository holds 1,085 skills in this directory. The repository was last updated on October 7, 2026.

Source: aiskillstore/marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.