.cursorrules TypeScript React Native Mobile

React Native Expo Router + TypeScript

Expo RouterとTypeScriptによるReact Nativeモバイルアプリ開発ルール。NativeWindスタイリング、SecureStore、OTAアップデート。

.cursorrules · 59 lines
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.
Share on X

こちらもおすすめ

Mobile カテゴリの他のルール

もっとルールを探す

CLAUDE.md、.cursorrules、AGENTS.md、Image Prompts の全 157 ルールをチェック。