react-native-patterns

Q: How do I install react-native-patterns?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill react-native-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-native-patterns/ (personal) or .claude/skills/react-native-patterns/ (project).

by spencerpaulyMobile

Build mobile apps with React Native and Expo — navigation, platform-specific code, performance, and native modules.

Installs: 403
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill react-native-patterns

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads react-native-patterns automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

React Native Patterns

Build production-quality mobile apps with React Native and Expo.

Project Setup

Expo (recommended for most projects):

npx create-expo-app@latest my-app
cd my-app
npx expo start

Bare React Native (when you need full native control):

npx @react-native-community/cli init MyApp

Use Expo unless you need a custom native module that Expo doesn't support.

Navigation

Use expo-router (file-based routing) or @react-navigation/native:

app/
├── _layout.tsx        # Root layout (tabs, stack, drawer)
├── index.tsx          # Home screen
├── (tabs)/
│   ├── _layout.tsx    # Tab navigator
│   ├── home.tsx
│   ├── profile.tsx
│   └── settings.tsx
└── [id].tsx           # Dynamic route

Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1 },
    android: { elevation: 4 },
  }),
});

For larger differences, use platform-specific files:

Component.ios.tsx
Component.android.tsx

Styling

Use StyleSheet.create for performance (styles are sent to native once):

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 24, fontWeight: '700' },
});

For a Tailwind-like experience, use nativewind:

<View className="flex-1 p-4">
  <Text className="text-2xl font-bold">Hello</Text>
</View>

Performance

FlatList over ScrollView for long lists:

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

Memoize expensive components:

const ItemRow = React.memo(({ item }: { item: Item }) => (
  <View><Text>{item.name}</Text></View>
));

Avoid:

Inline styles (creates new objects every render)
Anonymous functions in renderItem
Large images without caching (expo-image handles this)

Common Libraries

Need	Library
Navigation	`expo-router` or `@react-navigation/native`
State	`zustand`, `jotai`, or React context
Data fetching	`@tanstack/react-query`
Images	`expo-image`
Icons	`@expo/vector-icons`
Storage	`expo-secure-store` (sensitive), `@react-native-async-storage/async-storage` (general)
Animations	`react-native-reanimated`
Gestures	`react-native-gesture-handler`
Forms	`react-hook-form` + `zod`

Tips

Test on both iOS and Android from the start, not at the end
Use expo-dev-client for custom native modules with Expo
Handle safe areas with react-native-safe-area-context
Always handle keyboard avoidance for forms (KeyboardAvoidingView)
Use expo-updates for OTA updates in production

FAQ

What does the react-native-patterns skill do?

Build mobile apps with React Native and Expo — navigation, platform-specific code, performance, and native modules.

How do I install react-native-patterns?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill react-native-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-native-patterns/ (personal) or .claude/skills/react-native-patterns/ (project).

Which AI agents can use react-native-patterns?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is react-native-patterns safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains react-native-patterns?

It is published by spencerpauly in spencerpauly/awesome-cursor-skills. It has 403 recorded installs.