Skip to content
Get packs

Guide · Agent skill

How to use the React Native & Expo Expert agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The react-native-expert skill is a set of instructions and reference notes that gives an AI agent the working habits of a mobile engineer focused on React Native and Expo. Once it is installed, you can ask the agent to set up navigation, speed up a slow list, handle keyboard and safe-area issues, or work through a Metro or native build error. This guide explains what the skill does, how to install it, how to trigger it, and what to check before you trust its output.

React Native & Expo ExpertJeffallan/claude-skills · MIT

Quick start

  1. 1Download and unzip the skill. Download the ZIP from this page and unzip it so the skill folder is ready to copy.
  2. 2Place it in the right folder. Copy the folder into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. In the Claude apps, upload it under Settings → Capabilities → Skills instead.
  3. 3Check your toolchain. Make sure Node.js, npm/npx, Xcode with an iOS simulator, and the Android SDK with an emulator are available for the platforms you target.
  4. 4Describe your mobile task. Ask in plain language, naming React Native or Expo and your goal, such as a navigation setup or a slow list.
  5. 5Review suggested commands. Read each npx command before running it, especially installs and native builds, and run them on a branch.
  6. 6Verify on both platforms. Test the change on an iOS simulator and an Android emulator, then on real devices before release.

What is an agent skill and what does this one do?

An agent skill is a folder of instructions that an AI agent loads when a task matches the skill's description. The react-native-expert skill is built for building, optimizing and debugging cross-platform mobile apps with React Native and Expo.

Once installed, the agent works like a mobile engineer focused on React Native and Expo. It helps set up navigation hierarchies (tabs, stacks and drawers), write performant lists with FlatList and memo/useCallback, handle iOS and Android differences, manage keyboard input and safe areas, and configure Expo SDK projects. It also loads reference notes on Expo Router, list optimization, platform handling, storage and project structure when they are relevant.

  • Navigation: tabs, stacks, drawers, and Expo Router layouts
  • Lists: FlatList rendering with memo and useCallback
  • Platform code: Platform.select, Platform.OS, and .ios.tsx / .android.tsx splits
  • Forms: KeyboardAvoidingView and SafeAreaView
  • Build fixes: Metro bundler errors, iOS and Android build failures, native module problems

How do you install the react-native-expert skill?

Download the ZIP of the skill from this page and unzip it. You have two options depending on how you use your agent.

For Claude Code, place the unzipped skill folder in ~/.claude/skills/ to make it available everywhere, or in a project's .claude/skills/ folder to limit it to that project.

In the Claude apps, you can upload the skill instead. Go to Settings, then Capabilities, then Skills, and upload it there.

  • Personal install: ~/.claude/skills/
  • Project install: .claude/skills/ inside your project folder
  • Claude apps: Settings → Capabilities → Skills

What do you need before using it?

The skill assumes a working JavaScript mobile toolchain. Its own checklist expects Node.js with npm and npx, the Expo CLI tooling (run through npx expo), Xcode with an iOS simulator for iOS builds, and the Android SDK with an emulator for Android builds.

The skill does not install these for you. If they are missing, ask the agent to help you check your setup, or run the environment check it recommends before you start a feature.

  • Node.js and npm/npx
  • Expo CLI tooling via npx expo
  • Xcode and an iOS simulator (iOS builds)
  • Android SDK and emulator (Android builds)
npx expo doctor

How do you trigger the skill with natural requests?

You do not need a special command. The skill loads when your request matches its description, so describe the mobile task in plain language and mention React Native or Expo. Including your project context (Expo Router or React Navigation, whether you use TypeScript) helps the agent pick the right reference notes.

Good triggers name a concrete goal, such as a navigation layout, a slow screen, or an error message you are seeing.

  • "Set up tabs and a settings stack in my Expo Router app."
  • "My FlatList with 2,000 items scrolls badly. Make it faster."
  • "The login form hides behind the keyboard on iPhone. Fix it."
  • "Metro bundler fails after I added a native module. Help me debug it."

What commands does the skill suggest, and how should you review them?

When something breaks, the skill's error recovery notes point to specific commands. For a Metro bundler error it suggests clearing the cache with npx expo start --clear and restarting. For a native module that cannot be found, it suggests npx expo install <module> to get a compatible version, then rebuilding the native layers. For builds it suggests npx expo run:ios or npx expo run:android after checking Xcode or Android logs.

Read every command before running it. These commands can change dependencies and native builds, so run them on a scratch copy or a branch first, and check the diff.

  • npx expo doctor: checks environment and SDK compatibility
  • npx expo start --clear: clears the Metro cache
  • npx expo install <module>: installs a version compatible with your Expo SDK
  • npx expo run:ios and npx expo run:android: rebuild native apps
npx expo start --clear

What does a typical result look like?

For list work, the skill produces a memoized list item, callbacks wrapped in useCallback, a keyExtractor, and FlatList props such as removeClippedSubviews, maxToRenderPerBatch and windowSize. For forms, it wraps inputs in KeyboardAvoidingView inside a SafeAreaView, with the behavior set to padding on iOS and height on Android. For platform styling, it uses Platform.select to apply iOS shadow properties and Android elevation.

Expect the output to be TypeScript code with typed props, plus notes on platform handling, navigation parameters and performance. You still need to run the code on real devices.

<FlatList data={data} keyExtractor={(item) => item.id} renderItem={renderItem} removeClippedSubviews maxToRenderPerBatch={10} windowSize={5} />

What safety points should you know about?

The skill does not run scripts and does not use the network, according to its listing. Its risk comes from the commands it suggests. Commands such as npx expo install and the run:ios and run:android builds can change your dependencies and native projects.

Test on both iOS and Android, ideally on real devices, and review any dependency or native change before you commit it. Do not run suggested commands on a production project without reviewing them first.

  • No scripts are run by the skill itself, and it makes no network calls.
  • Suggested npx commands can change dependencies and native builds.
  • Use version control so you can revert changes easily.
  • Test on real devices, not only in simulators.

Tips for getting better results

Give the agent your versions and setup: Expo SDK version, whether you use Expo Router or React Navigation, and whether the project is in TypeScript. The skill's notes cover several routing and storage options, so context narrows the answer.

Paste the exact error text, including the Metro output or the Xcode or Gradle message. Ask for one change at a time and verify it before moving on. The skill's own workflow suggests verifying on an iOS simulator and an Android emulator after each implementation step.

  • State your Expo SDK and routing choice up front.
  • Paste full error logs rather than summaries.
  • Ask for profiling advice when a list is slow, and check results with a profiler such as Flipper or React DevTools, which the skill recommends.
  • Avoid ScrollView for large lists; the skill's rules call for FlatList or SectionList.

What people use it for

  • Setting up a tab bar with nested stacks for a settings area in an Expo Router app
  • Speeding up a FlatList screen with thousands of rows by memoizing items and stabilizing callbacks
  • Fixing a login form where the keyboard covers the input fields on iOS and Android
  • Debugging a Metro bundler error after adding a native module, then reinstalling it with npx expo install
  • Applying platform-specific shadows or fonts with Platform.select

Frequently asked questions

How do I install the react-native-expert skill?

Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload it in the Claude apps under Settings → Capabilities → Skills.

What do I need to use the React Native Expert skill?

The skill assumes Node.js with npm and npx, Expo CLI tooling via npx expo, Xcode with an iOS simulator for iOS builds, and the Android SDK with an emulator for Android builds. It does not install these for you.

Is the react-native-expert skill free?

The skill is listed under the MIT licence. Check the licence file in the repository for the full terms before using it in a commercial project.

Does the skill run scripts or use the internet?

According to its listing, the skill runs no scripts and uses no network. The commands it suggests, such as npx expo install and the run:ios and run:android builds, can still change your project and should be reviewed first.

How do I fix a Metro bundler error with this skill?

Ask the agent for help with the Metro error and paste the full output. The skill's recovery notes suggest clearing the cache with npx expo start --clear and then restarting. Review the command before running it.

Can this skill replace a React Native developer?

No. The skill produces code and guidance that still need building and testing on real iOS and Android devices. It works best for developers who can review and verify the output themselves.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are building or debugging a React Native or Expo app and want an agent that knows navigation, FlatList performance, keyboard handling and common build errors. Pick something else if your project uses Flutter, native Swift or Kotlin only, or a web-only front end, or if you need a finished app without writing or testing code yourself.

Download the skill