Skills react-native-dev
📱

react-native-dev

Safe ⚙️ External commands

Build React Native and Expo apps

Building mobile apps with React Native requires navigating complex choices in components, state management, animations, and deployment. This skill provides a structured development guide with proven patterns, recommended libraries, and production-ready examples for Expo and React Native projects.

Supports: Claude Codex Code(CC)
🥉 76 Bronze
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-dev". Create a tab navigation layout with Home, Search, and Profile tabs using Expo Router.

Expected outcome:

  • A tab layout file (app/(tabs)/_layout.tsx) with Tabs component from expo-router
  • Three tab screen definitions with Ionicons icons
  • Header configuration with large title support and styled header
  • Individual route files: app/(tabs)/home.tsx, app/(tabs)/search.tsx, app/(tabs)/profile.tsx

Using "react-native-dev". Show how to use Zustand with persist middleware for user preferences.

Expected outcome:

  • A Zustand store definition with create and persist middleware
  • Type-safe state interface with theme, language, and notification settings
  • Selector pattern usage in components to prevent unnecessary re-renders
  • Storage backend configuration using MMKV or AsyncStorage

Security Audit

Safe
v1 • 4/16/2026

This skill is a documentation-only reference guide for React Native and Expo development. It contains 12 markdown files (SKILL.md plus 11 reference files) with code examples. All 740 static analysis findings are false positives: the scanner misidentified markdown code blocks (triple-backtick fenced examples) as executable code. Patterns flagged include shell commands in installation instructions, relative imports shown as code examples, environment variable usage in documentation, and documentation references to .env files. No executable code exists in this skill.

12
Files scanned
3,050
Lines analyzed
1
findings
1
Total audits

Risk Factors

⚙️ External commands (4)
SKILL.md:88-98 references/animations.md:14-16 references/testing.md:7-26 references/networking.md:337-344
Audited by: claude

Quality Score

45
Architecture
100
Maintainability
87
Content
50
Community
100
Security
91
Spec Compliance

What You Can Build

Start a new Expo project from scratch

A developer needs to scaffold a production-ready React Native app with proper project structure, routing, state management, and CI/CD pipeline.

Implement complex animations and gestures

A developer needs to add smooth animations, gesture handling, and scroll-driven effects using Reanimated 3 and Gesture Handler.

Optimize app performance and prepare for release

A team needs to profile their app, fix scroll jank, reduce bundle size, configure EAS builds, and set up CI/CD for App Store and Play Store deployment.

Try These Prompts

Beginner: Create a new Expo project 
Set up a new Expo project with TypeScript. Include Expo Router for navigation with a tab layout, FlashList for lists, expo-image for images, and Zustand for state management. Show the recommended project structure.
Beginner: Build a login form 
Create a login form using React Hook Form and Zod validation. Include email and password fields with error messages, a submit button with loading state, and API integration with a fetch wrapper.
Intermediate: Add animated transitions 
Implement a shared element transition between a list screen and a detail screen using Reanimated 3. The list uses FlashList with memoized items. When tapping an item, animate it to the detail screen with a fade and scale transition.
Advanced: Configure CI/CD pipeline 
Set up an EAS Build and Submit pipeline with GitHub Actions. Include separate build profiles for development and production, automatic app store submission on main branch merges, and environment variable management for different stages.

Best Practices

  • Always use FlashList instead of FlatList for lists, and expo-image instead of RN Image for better performance and caching
  • Only animate transform and opacity properties with Reanimated to keep animations GPU-composited and avoid layout recalculation
  • Use EXPO_PUBLIC_ prefix for client-side environment variables and keep server-only secrets without the prefix in API routes

Avoid

  • Using FlatList without memoized items or RN Image without caching for production lists and image galleries
  • Importing from barrel files (index.ts) which increases bundle size - always import directly from source modules
  • Using Platform.OS for platform checks instead of process.env.EXPO_OS, and using useContext instead of React.use for React 18

Frequently Asked Questions

When should I use Expo Go versus a custom build with EAS Build?
Use Expo Go for quick prototyping and testing with standard Expo modules. Use EAS Build when your project requires custom native modules, specific native SDK versions, Apple targets, or third-party modules not available in Expo Go.
Which state management library should I choose for my project?
Use useState or useReducer for local UI state. Choose Zustand or Jotai for shared application state across components. Use React Query for server and async data with caching. Avoid Redux unless your app has extremely complex state requirements.
How do I handle environment variables securely in an Expo app?
Variables prefixed with EXPO_PUBLIC_ are embedded in the client bundle and safe for public configuration like API URLs. Variables without the prefix (like LLM_API_KEY) run only on server-side API routes and never reach the client. Set production secrets via eas env-create in CI/CD.
Why does this skill recommend FlashList over FlatList?
FlashList from Shopify provides built-in view recycling, which significantly reduces memory usage and prevents scroll jank on long lists. FlatList renders all visible items without recycling, causing performance issues on lists with more than 20 items.
How do I test React Native components effectively?
Use Jest with React Native Testing Library for unit and component tests. Test user-visible behavior (text content, button interactions) rather than implementation details. For end-to-end testing, use Maestro which requires no build configuration and works with Expo.
What is the recommended project structure for a scalable React Native app?
Organize code into: app/ for Expo Router routes, components/ui/ for atomic components, components/shared/ for composed components, stores/ for state management, services/ for API and native module wrappers, hooks/ for custom hooks, constants/ for theme values, and types/ for TypeScript definitions. Use path aliases to avoid fragile relative imports.

Developer Details

Author

MiniMax-AI

License

MIT

Repository

https://github.com/MiniMax-AI/skills/tree/main/skills/react-native-dev

Ref

main

File structure

📁 references/

📄 animations.md

📄 components.md

📄 engineering.md

📄 forms.md

📄 native-capabilities.md

📄 navigation.md

📄 networking.md

📄 performance.md

📄 state-management.md

📄 styling.md

📄 testing.md

📄 SKILL.md