taewoongheo/coding-standards

Coding Standards — Expo React Native

TypeScript Rules

Strict Mode

• No any — use unknown and narrow, or define proper types
• No implicit return types on exported functions
• No non-null assertions (!) — use proper null checks
• Prefer interface over type for object shapes (extendable)
• Use const assertions for config objects

Patterns

// Props — always interface, always exported
export interface ButtonProps {
  label: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

// Discriminated unions for state
type AsyncState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

Component Rules

Structure

components/
  Button.tsx         # one component per file
  Button.test.tsx    # co-located test

File Size

• Components: max 200 lines — split if longer
• Functions: max 50 lines
• Hooks: max 100 lines

Naming

| Item | Convention | Example | |------|-----------|---------| | Component | PascalCase | ProfileCard | | Hook | camelCase, use prefix | useAuth | | Utility function | camelCase | formatDate | | Constant | UPPER_SNAKE_CASE | MAX_RETRIES | | Type/Interface | PascalCase | UserProfile | | File | kebab-case | profile-card.tsx, use-auth.ts | | Directory | kebab-case | styles/ |

One Component Per File

• Named export (not default export)
• Props interface in same file, exported
• Co-locate styles at bottom of file

Import Order

// 1. React / React Native
import { useState } from 'react';
import { View, Text } from 'react-native';

// 2. External libraries
import Animated, { useSharedValue } from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

// 3. Internal modules (absolute imports)
import { colors, spacing } from '@/styles';
import { useAuth } from '@/hooks/useAuth';

// 4. Relative imports (sibling components)
import { Avatar } from './Avatar';

// 5. Types (type-only imports)
import type { UserProfile } from '@/types';

Design Tokens

• Use src/styles/ for colors, spacing, typography — don't hardcode
• Recurring new values → add to the appropriate file in src/styles/
• One-off values → inline OK, but use a meaningful variable name (no magic numbers)
• Developer can extend src/styles/ files as needed

Anti-Patterns

| Don't | Do Instead | |-------|-----------| | console.log in production | Remove or use proper logging | | any type | Define proper type or use unknown | | Inline styles | StyleSheet.create or Reanimated | | RN core Animated | react-native-reanimated | | LayoutAnimation | Reanimated Layout transitions | | Default exports | Named exports | | var | const or let | | Nested ternaries | Early returns or switch | | useEffect for derived state | useMemo | | String refs | useRef |

State Management

• Local UI state: useState / useReducer
• Animation state: useSharedValue (Reanimated)
• Server state: React Query (@tanstack/react-query)
• Auth state: React Context (single provider)
• No Redux. Zustand은 PRD.md 데이터 모델에서 결정

Error Handling

• Wrap async calls in try/catch
• Use discriminated union types for async state
• Show error UI to users — never silent failures
• Log errors with context (what operation failed, with what params)

Comments

• Don't comment obvious code
• Comment WHY, not WHAT
• Use // TODO(name): format for real todos (should be temporary)
• No commented-out code blocks — use git history

Performance Targets

• Cold start: < 2 seconds
• Animation: 60fps minimum (120fps on ProMotion)
• Memory: < 150MB baseline
• Touch response: < 16ms
• Bundle size: minimize with tree shaking

Scope Boundaries

• No backend server code (use Supabase)
• No native module development in Swift/Kotlin (use Expo modules)
• No web-specific code (focus on mobile)

Answer in Korean.