react-native-guidelineslisted
Install: claude install-skill YoniChechik/claude-code-config
# React Native Component Guidelines
This skill provides conventions for React Native/Expo mobile development.
## React Compiler
- React Compiler is enabled and handles memoization automatically
- NEVER use `useMemo`, `useCallback`, or `React.memo`
- The compiler optimizes re-renders without manual intervention
- Just write plain functions and let the compiler optimize
## Directory Structure
```
apps/mobile/src/
├── components/
│ ├── ui/ # Design system primitives (Button, Input, Card, etc.)
│ │ └── [ComponentName]/
│ │ ├── [ComponentName].tsx
│ │ ├── [ComponentName].test.tsx
│ │ ├── [ComponentName].stories.tsx
│ │ └── index.ts
│ └── common/ # Shared business components (Avatar, MessageBubble, etc.)
├── features/ # Feature-specific code
│ └── [feature-name]/
│ ├── components/
│ ├── hooks/
│ └── screens/
├── hooks/ # App-wide shared hooks
├── screens/ # Top-level screens (navigation entry points)
└── lib/ # Utilities, constants, types
```
## Component Structure
Every component **must** be a folder with:
- `ComponentName.tsx` - Implementation
- `ComponentName.test.tsx` - Unit tests (required)
- `ComponentName.stories.tsx` - Storybook story (required for ui/common)
- `index.ts` - Barrel export
### Component Pattern
```tsx
import { View, Text, Pressable } from 'react-native';
export interface Butto