القائمة
Build mobile apps with React Native and Expo — navigation, platform-specific code, performance, and native modules.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Generate or edit images using the OpenAI Image API (gpt-image-2). Use when the user asks to generate, create, draw, render, illustrate, mock up, or edit an image, icon, logo, mockup, illustration, OG image, blog hero, marketing asset, or similar visual. Also use when the user supplies a reference image and asks to modify, restyle, or remix it. Triggers on: "generate an image", "create an image", "make a picture of", "edit this image", "restyle this", "make a mockup of", "draw a", "render a", "illustration of".
When the same multi-step workflow repeats in Cursor (user corrections or agent redos), capture it as a new SKILL.md under .cursor/skills/ so future sessions load it automatically.
After navigating and interacting in Cursor's built-in browser, use browser_network_requests to audit every fetch/XHR for failures, slowness, duplicate calls, and suspicious payloads. Use for API-heavy pages and after backend or client networking changes.
When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel. Use for multi-job CI failures where jobs are independent.
Run four parallel read-only subagents that each review the same diff from a different lens — security, performance, correctness, and readability — then merge findings into one report. Use before merging large or risky PRs.
Execute a user flow step-by-step in Cursor's built-in browser while documenting each action, then emit a Playwright test that replays the same flow using stable selectors derived from the accessibility tree.
| name | react-native-patterns |
| description | Build mobile apps with React Native and Expo — navigation, platform-specific code, performance, and native modules. |
| user-invocable | true |
Build production-quality mobile apps with React Native and Expo.
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.
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
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.tsxComponent.android.tsxUse 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>
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:
renderItemexpo-image handles this)| 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 |
expo-dev-client for custom native modules with Exporeact-native-safe-area-contextKeyboardAvoidingView)expo-updates for OTA updates in production