Mobile · Claude Skill

React Native Skill

Navigation patterns, performance optimizations, and platform-specific conventions for React Native projects.

React Native

What it does

The React Native Skill teaches Claude platform-aware defaults: SafeAreaView on every root, typed React Navigation routes, FlatList with proper key extraction, and Platform.select instead of runtime OS checks. The kind of things that ship without friction and break silently when missed.

What it does when Claude uses it

Claude generates screens that already handle the notch, the status bar, the keyboard, and both platforms. It uses Zustand or Redux Toolkit for global state, React Query for server state, and writes FlatList renders that do not drop frames on Android.

How to install

Which tool are you using?

Not sure? Claude.ai is the website. Claude Code is the command-line tool you install separately. Cursor is a code editor that reads .cursorrules.

  1. 01

    Download the skill file

    Click the Copy button on the code block below to grab the full contents of react-native.md. Save it locally as react-native.md.

  2. 02

    Create your skills folder

    Claude Code reads skills from ~/.claude/skills/. Create the folder if it does not exist.

    terminal
    mkdir -p ~/.claude/skills/
  3. 03

    Copy the file into the skills folder

    Move the file into your skills directory so Claude picks it up.

    terminal
    cp react-native.md ~/.claude/skills/react-native.md
  4. 04

    Verify installation

    Open Claude Code and run /skills list. You should see "react-native" appear in the list.

    terminal
    /skills list
  5. 05

    Start using it

    Claude will now apply this skill automatically whenever the task matches the skill description. No extra prompting required.

The claude skill file

Copy the full contents below, or download the file directly.

react-native.md
react-native.md
---name: react-nativedescription: Use this skill for any React Native development task. Activates platform-aware patterns, navigation conventions, and performance rules.--- # React Native Skill ## Navigation- React Navigation v6+ only- Stack for screens, Tab for primary sections, Drawer only when needed- Typed route params via RootStackParamList- Deep link config in linking prop, tested per platform ## State- Zustand or Redux Toolkit for global- React Query for server state — never refetch manually- Keep screen state in screen, lift only when shared ## Performance- FlatList with keyExtractor + getItemLayout where possible- React.memo on list item components- InteractionManager.runAfterInteractions for post-nav work- Image caching with FastImage on Android, expo-image cross-platform ## Platform- Platform.select for divergent code, not runtime checks- SafeAreaView on every screen root- Handle notch, status bar, and keyboard per platform

Example output

What Claude does before and after you install this claude skill.

Without this claude skill

Claude returns a ScrollView of 500 items, no SafeAreaView, inline styles, and a keyboard that covers the input on iOS.

With this claude skill

Claude returns a FlatList with keyExtractor and getItemLayout, SafeAreaView + KeyboardAvoidingView wrapping, and platform-specific shadow style via Platform.select.

Customization tips

Swap Zustand for your team's preferred state library by editing the State section. If you use Expo Router instead of React Navigation, rewrite the Navigation section. Teams targeting only iOS or only Android can remove the cross-platform notes.

Related resources

Mobile

Flutter Development Skill

Teaches Claude Flutter best practices, widget patterns, state management conventions, and your team's coding style.

Flutter · DartInstall Guide
Mobile

React Native Rules

Cursor rules for React Native projects. Navigation, performance, platform handling, and testing conventions.

React Native · ExpoInstall Guide
Web

Next.js Full Stack Skill

App router patterns, server components, API routes, and Next.js 14+ conventions baked into every response.

Next.js · ReactInstall Guide

Frequently asked questions

Does this work with Expo?

Yes. The skill is Expo-first but works for bare React Native projects too.

Does it cover Expo Router?

The default uses React Navigation. Edit the Navigation section to switch to Expo Router.

What about New Architecture / Fabric?

The skill is architecture-agnostic. Fabric-specific patterns can be added as a custom section.

Does it help with native modules?

It stays in the JS layer. For native bridging, use the Tech Stack Advisor prompt.

Can I use it with Flutter too?

No — install the Flutter Development Skill separately for Flutter work.

Want more like this?

Browse the full RohanKit library — free resources for Claude and Cursor.

Back to RohanKit