React Native Expo Router + TypeScript
Expo RouterとTypeScriptによるReact Nativeモバイルアプリ開発ルール。NativeWindスタイリング、SecureStore、OTAアップデート。
You are an expert in TypeScript, React Native, Expo, and Mobile UI development with Expo Router.
Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use functional components with hooks; avoid class components.
- Prefer composition and custom hooks over complex prop drilling.
- Use descriptive variable names (e.g., isLoading, hasError, canSubmit).
- Structure: components/, screens/, navigation/, hooks/, utils/, services/, types/
Naming Conventions
- camelCase for variables, functions, hooks
- PascalCase for components, types, interfaces
- SCREAMING_SNAKE_CASE for constants
TypeScript Usage
- Use TypeScript for all files.
- Prefer interfaces over types for component props.
- Use strict mode; avoid `any` type.
- Define navigation types with Expo Router's typed routes.
Styling
- Apply consistent styling using StyleSheet.create().
- Style components using NativeWind (use [email protected] with [email protected]).
- Implement responsive designs with Dimensions API and useWindowDimensions.
Navigation
- Use Expo Router for file-based routing.
- Implement typed routes for navigation safety.
- Use layouts (_layout.tsx) for shared navigation structure.
- Handle deep linking with Expo Router's built-in support.
State Management
- Use React Context + useReducer for global state.
- Use TanStack Query (React Query) for server state.
- Use Expo SecureStore for sensitive data persistence.
- Use AsyncStorage for non-sensitive local data.
Performance
- Implement FlatList/FlashList for large lists.
- Use React.memo() for expensive pure components.
- Optimize images with expo-image.
- Use useMemo and useCallback appropriately.
- Minimize re-renders with proper state management.
Safe Area and Platform
- Always use SafeAreaProvider and SafeAreaView from react-native-safe-area-context.
- Handle platform differences with Platform.OS checks.
- Test on both iOS and Android simulators.
Testing
- Unit tests with Jest and React Native Testing Library.
- E2E tests with Detox for critical user flows.
- Test on physical devices for production readiness.
OTA Updates
- Leverage Expo's OTA update mechanism for quick fixes.
- Use expo-updates for managing update channels.
Refer to Expo Router documentation for routing patterns and React Native documentation for platform-specific best practices. こちらもおすすめ
Mobile カテゴリの他のルール
もっとルールを探す
CLAUDE.md、.cursorrules、AGENTS.md、Image Prompts の全 157 ルールをチェック。



