#601

Global Rank · of 601 Skills

react-native AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill react-native

44

Installs

React Native with Expo

Overview

Expo is an open-source framework for building universal native apps with React Native from a single TypeScript codebase. It provides file-based routing (Expo Router), cloud build services (EAS Build/Submit/Update), and a rich set of native modules for device APIs.

When to use: Mobile apps targeting iOS and Android, universal apps with web support, projects needing OTA updates, apps requiring native device APIs (camera, notifications, haptics), teams preferring managed infrastructure over bare React Native.

When NOT to use: Apps requiring heavy custom native code incompatible with Expo Modules API, brownfield integration into existing native apps, apps with native-only CI/CD requirements.

Quick Reference

Pattern API Key Points
Stack navigation <Stack> from expo-router File-based, _layout.tsx defines navigator
Tab navigation <Tabs> from expo-router (tabs) directory group with _layout.tsx
Drawer navigation <Drawer> from expo-router/drawer Requires @react-navigation/drawer
Typed routes href with /(group)/route Enable typed-routes in app.json
Dev build expo-dev-client Custom native code + dev tools
EAS Build eas build --profile production Cloud builds for app stores
EAS Submit eas submit -p ios / -p android Automated store submission
OTA Update eas update --branch production JS-only updates, no rebuild needed
Native module Expo Modules API Swift/Kotlin with expo-module.config.json
Platform code Platform.select() / .ios.tsx Per-platform logic or entire files
Styled lists FlatList / FlashList Virtualized, keyExtractor required
Camera expo-camera Permissions via useCameraPermissions()
Notifications expo-notifications Push tokens via getExpoPushTokenAsync()
Haptics expo-haptics impactAsync, notificationAsync
Tailwind (RN) NativeWind v4 className prop, Tailwind CSS in RN

Common Mistakes

Mistake Correct Pattern
Using react-navigation directly instead of Expo Router Expo Router wraps React Navigation with file-based routing
Forgetting _layout.tsx in route directories Every directory with routes needs a layout file
Using expo start for custom native code Use expo start --dev-client with expo-dev-client
Running eas update after native dependency changes Native changes require eas build, OTA is JS-only
Hardcoding platform checks with if Use Platform.select() or platform-specific file extensions
Not requesting permissions before accessing device APIs Always check/request permissions before camera, notifications
Using ScrollView for long lists Use FlatList or FlashList for virtualized rendering
Inline styles in render functions Define styles with StyleSheet.create() outside component
Missing keyExtractor on FlatList Always provide keyExtractor for stable list rendering
Importing from react-native for Expo-provided APIs Prefer expo-* packages over react-native equivalents

Delegation

  • Pattern discovery: Use Explore agent
  • Build/deployment review: Use Task agent
  • Code review: Delegate to code-reviewer agent

If the react-patterns skill is available, delegate React component patterns and hooks to it.
If the tanstack-query skill is available, delegate data fetching and caching to it.
If the zustand skill is available, delegate client-side state management to it.
If the vitest-testing skill is available, delegate unit and component testing patterns to it.
If the tailwind skill is available, delegate Tailwind CSS utility patterns to it (NativeWind uses Tailwind CSS syntax).
If the accessibility skill is available, delegate mobile accessibility patterns to it.

References

Installs

Installs 44
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install react-native by running npx skills add oakoss/agent-skills --skill react-native in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of react-native, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support