React Native Expert

作者 jeffallan1be15d8064f8MIT11K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫5 天前更新

Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.

僅含說明Software Development

AI 產生的概覽

指導建置、最佳化與偵錯 React Native 與 Expo 行動應用，涵蓋導覽、原生模組與清單效能。

功能: 提供針對 React Native 與 Expo 專案的高階行動工程師工作流程：以 Expo Router 或 React Navigation 進行設定、採用功能導向的專案結構、含平台處理的實作、效能最佳化，以及跨平台測試。它提供導覽、平台程式碼、FlatList 最佳化、儲存 hook 與專案結構的參考指引，並附上最佳化清單、鍵盤友善表單與平台專屬元件的 TypeScript 程式碼範例。內容也涵蓋 Metro、iOS 與 Android 建置失敗及原生模組問題的錯誤復原。
適用情境: 適用於建置 React Native 或 Expo 行動應用、設定導覽階層、整合原生模組、改善捲動或清單效能，或處理 SafeArea、鍵盤輸入及 iOS 與 Android 平台專屬程式碼的情境。
執行需求: 僅為指示，未附指令碼。假定已有 React Native 0.73+ / Expo SDK 50+ 專案，並具備 Node 與 npm/npx、Expo CLI、用於原生建置的 Xcode 與 Android SDK 工具，以及供測試使用的模擬器。

React Native Expert

Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.

Core Workflow

Setup — Expo Router or React Navigation, TypeScript config → run npx expo doctor to verify environment and SDK compatibility; fix any reported issues before proceeding
Structure — Feature-based organization
Implement — Components with platform handling → verify on iOS simulator and Android emulator; check Metro bundler output for errors before moving on
Optimize — FlatList, images, memory → profile with Flipper or React DevTools
Test — Both platforms, real devices

Error Recovery

Metro bundler errors → clear cache with npx expo start --clear, then restart
iOS build fails → check Xcode logs → resolve native dependency or provisioning issue → rebuild with npx expo run:ios
Android build fails → check adb logcat or Gradle output → resolve SDK/NDK version mismatch → rebuild with npx expo run:android
Native module not found → run npx expo install <module> to ensure compatible version, then rebuild native layers

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Navigation	`references/expo-router.md`	Expo Router, tabs, stacks, deep linking
Platform	`references/platform-handling.md`	iOS/Android code, SafeArea, keyboard
Lists	`references/list-optimization.md`	FlatList, performance, memo
Storage	`references/storage-hooks.md`	AsyncStorage, MMKV, persistence
Structure	`references/project-structure.md`	Project setup, architecture

Constraints

MUST DO

Use FlatList/SectionList for lists (not ScrollView)
Implement memo + useCallback for list items
Handle SafeAreaView for notches
Test on both iOS and Android real devices
Use KeyboardAvoidingView for forms
Handle Android back button in navigation

MUST NOT DO

Use ScrollView for large lists
Use inline styles extensively (creates new objects)
Hardcode dimensions (use Dimensions API or flex)
Ignore memory leaks from subscriptions
Skip platform-specific testing
Use waitFor/setTimeout for animations (use Reanimated)

Code Examples

Optimized FlatList with memo + useCallback

tsx

import React, { memo, useCallback } from 'react';import { FlatList, View, Text, StyleSheet } from 'react-native';
type Item = { id: string; title: string };
const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (  <View style={styles.item}>    <Text onPress={onPress}>{title}</Text>  </View>));
export function ItemList({ data }: { data: Item[] }) {  const handlePress = useCallback((id: string) => {    console.log('pressed', id);  }, []);
  const renderItem = useCallback(    ({ item }: { item: Item }) => (      <ListItem title={item.title} onPress={() => handlePress(item.id)} />    ),    [handlePress]  );
  return (    <FlatList      data={data}      keyExtractor={(item) => item.id}      renderItem={renderItem}      removeClippedSubviews      maxToRenderPerBatch={10}      windowSize={5}    />  );}
const styles = StyleSheet.create({  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },});

KeyboardAvoidingView Form

tsx

import React from 'react';import {  KeyboardAvoidingView,  Platform,  ScrollView,  TextInput,  StyleSheet,  SafeAreaView,} from 'react-native';
export function LoginForm() {  return (    <SafeAreaView style={styles.safe}>      <KeyboardAvoidingView        style={styles.flex}        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}      >        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />          <TextInput style={styles.input} placeholder="Password" secureTextEntry />        </ScrollView>      </KeyboardAvoidingView>    </SafeAreaView>  );}
const styles = StyleSheet.create({  safe: { flex: 1 },  flex: { flex: 1 },  content: { padding: 16, gap: 12 },  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },});

Platform-Specific Component

tsx

import { Platform, StyleSheet, View, Text } from 'react-native';
export function StatusChip({ label }: { label: string }) {  return (    <View style={styles.chip}>      <Text style={styles.label}>{label}</Text>    </View>  );}
const styles = StyleSheet.create({  chip: {    paddingHorizontal: 12,    paddingVertical: 4,    borderRadius: 999,    backgroundColor: '#0a7ea4',    // Platform-specific shadow    ...Platform.select({      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },      android: { elevation: 3 },    }),  },  label: { color: '#fff', fontSize: 13, fontWeight: '600' },});

Output Format

When implementing React Native features, deliver:

Component code — TypeScript, with prop types defined
Platform handling — Platform.select or .ios.tsx / .android.tsx splits as needed
Navigation integration — route params typed, back-button handling included
Performance notes — memo boundaries, key extractor strategy, image caching

Knowledge Reference

React Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand

Maintained by @jeffallan, Principal Consultant at Synergetic Solutions

來源與署名

來源：jeffallan/claude-skills位於skills/react-native-expert提交1be15d8

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 jeffallan/claude-skills 的技能

Wordpress Pro

jeffallan

指導 WordPress 佈景主題、外掛、Gutenberg 區塊與 WooCommerce 開發，並涵蓋安全性與效能實務。

Software Development11K5 天前更新

Vue Expert Js

jeffallan

只用 JavaScript 建置 Vue 3 應用程式，以 JSDoc 註解取代 TypeScript。

Software Development11K5 天前更新

The Fool

jeffallan

以五種結構化批判性推理模式，對想法、計畫和決策進行壓力測試。

Research & Analysis11K5 天前更新

Swift Expert

jeffallan

指導 Swift 5.9+ 的 Apple 平台開發，涵蓋 SwiftUI、async/await、actor、協定與測試。

Software Development11K5 天前更新

Sql Pro

jeffallan

指導 SQL 查詢最佳化、資料庫結構設計，以及跨主流方言的效能問題排查。

Data & Analytics11K5 天前更新

Spring Boot Engineer

jeffallan

指導 Spring Boot 3.x 後端實作：REST 控制器、JPA 資料存取、Security 6、WebFlux 與測試。

Software Development11K5 天前更新

更多Software Development技能

Playground

anthropics

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Testing Strategy

anthropics

設計測試策略與測試計畫，涵蓋測試類型、覆蓋率目標與範例測試案例。

Software Development27K今天更新

Tech Debt

anthropics

辨識、分類並排序技術債，產出評分後的待辦清單與分階段改善計畫。

Software Development27K今天更新

System Design

anthropics

透過需求、高階設計、深入設計、擴充與取捨分析來指導系統與架構設計。

Software Development27K今天更新

import React, { memo, useCallback } from 'react';import { FlatList, View, Text, StyleSheet } from 'react-native';
type Item = { id: string; title: string };
const ListItem = memo(({ title, onPress }: { title: string; onPress: () => void }) => (  <View style={styles.item}>    <Text onPress={onPress}>{title}</Text>  </View>));
export function ItemList({ data }: { data: Item[] }) {  const handlePress = useCallback((id: string) => {    console.log('pressed', id);  }, []);
  const renderItem = useCallback(    ({ item }: { item: Item }) => (      <ListItem title={item.title} onPress={() => handlePress(item.id)} />    ),    [handlePress]  );
  return (    <FlatList      data={data}      keyExtractor={(item) => item.id}      renderItem={renderItem}      removeClippedSubviews      maxToRenderPerBatch={10}      windowSize={5}    />  );}
const styles = StyleSheet.create({  item: { padding: 16, borderBottomWidth: StyleSheet.hairlineWidth },});

import React from 'react';import {  KeyboardAvoidingView,  Platform,  ScrollView,  TextInput,  StyleSheet,  SafeAreaView,} from 'react-native';
export function LoginForm() {  return (    <SafeAreaView style={styles.safe}>      <KeyboardAvoidingView        style={styles.flex}        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}      >        <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">          <TextInput style={styles.input} placeholder="Email" autoCapitalize="none" />          <TextInput style={styles.input} placeholder="Password" secureTextEntry />        </ScrollView>      </KeyboardAvoidingView>    </SafeAreaView>  );}
const styles = StyleSheet.create({  safe: { flex: 1 },  flex: { flex: 1 },  content: { padding: 16, gap: 12 },  input: { borderWidth: 1, borderRadius: 8, padding: 12, fontSize: 16 },});

import { Platform, StyleSheet, View, Text } from 'react-native';
export function StatusChip({ label }: { label: string }) {  return (    <View style={styles.chip}>      <Text style={styles.label}>{label}</Text>    </View>  );}
const styles = StyleSheet.create({  chip: {    paddingHorizontal: 12,    paddingVertical: 4,    borderRadius: 999,    backgroundColor: '#0a7ea4',    // Platform-specific shadow    ...Platform.select({      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 },      android: { elevation: 3 },    }),  },  label: { color: '#fff', fontSize: 13, fontWeight: '600' },});