Skip to content

CLAUDE.md

Latest commit

 

History

History
97 lines (69 loc) · 4.29 KB

CLAUDE.md

File metadata and controls

97 lines (69 loc) · 4.29 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Rocket.Chat React Native mobile client. Single-package React Native app (not a monorepo) using pnpm (version pinned in package.json#packageManager, activated via corepack). Supports iOS 13.4+ and Android 6.0+.

  • React 19.1, React Native 0.81, Expo 54
  • TypeScript with strict mode, baseUrl set to app/ (imports resolve from there)
  • Node: engines >=18, volta pins 24.13.1
  • Read UBIQUITOUS_LANGUAGE.md

Commands

# First-time setup (per machine)
corepack enable            # Activates the pnpm version pinned in package.json

# Install & setup
pnpm install               # Install dependencies (postinstall runs patch-package)
pnpm pod-install           # Install iOS CocoaPods (required before iOS builds)

# Run
pnpm start                 # Start Metro bundler
pnpm ios                   # Build and run on iOS
pnpm android               # Build and run on Android

# Test
TZ=UTC pnpm test           # Run Jest unit tests (TZ=UTC is set in script)
pnpm test --testPathPattern='path/to/test'  # Run a single test file
pnpm test-update           # Update snapshots

# Lint & format
pnpm lint                  # ESLint + TypeScript compiler check
pnpm prettier-lint         # Prettier auto-fix + lint

# Storybook
pnpm storybook:start       # Start Metro with Storybook UI
pnpm storybook-generate    # Generate story snapshots

Code Style

  • Prettier: tabs, single quotes, 130 char width, no trailing commas, arrow parens avoid, bracket same line
  • ESLint: @rocket.chat/eslint-config base with React, React Native, TypeScript, Jest plugins
  • Before committing: Run pnpm prettier-lint and TZ=UTC pnpm test for modified files
  • Pre-commit hooks enforce these checks

Architecture

State Management: Redux + Redux-Saga

  • Actions (app/actions/) — plain action creators
  • Reducers (app/reducers/) — state shape (app, login, connect, rooms, encryption, etc.)
  • Sagas (app/sagas/) — side effects (init, login, rooms, messages, encryption, deepLinking, videoConf)
  • Selectors (app/selectors/) — memoized with reselect
  • Store (app/lib/store/) — configures middleware (saga, app state, internet state)

Navigation: React Navigation 7

  • Stacks (app/stacks/) — InsideStack (authenticated), OutsideStack (login/register), MasterDetailStack (tablets), ShareExtensionStack
  • Root (app/AppContainer.tsx) — switches between auth states
  • Responsive layout (app/lib/hooks/useResponsiveLayout/) — master-detail on tablets vs single stack on phones

Database: WatermelonDB (offline-first SQLite)

  • Models (app/lib/database/model/) — Message, Room, Subscription, User, Thread, Upload, Server, CustomEmoji, Permission, Role, etc.
  • Schema (app/lib/database/schema/)
  • Local-first: UI reads from DB, sagas sync with server

API Layer

  • SDK (app/lib/services/sdk.ts) — Rocket.Chat JS SDK for WebSocket real-time subscriptions
  • REST (app/lib/services/restApi.ts) — HTTP via fetch
  • Connect (app/lib/services/connect.ts) — server connection management

Views & Components

  • Views (app/views/) — 70+ screen components
  • Containers (app/containers/) — reusable UI components
  • Theme (app/theme.tsx) — theming context

Other Key Systems

  • i18n (app/i18n/) — i18n-js with 40+ locales, RTL support
  • Encryption (app/lib/encryption/) — E2E encryption via @rocket.chat/mobile-crypto
  • Enterprise (app/ee/) — Omnichannel/livechat features
  • Definitions (app/definitions/) — shared TypeScript types
  • VideoConf (app/sagas/videoConf.ts, app/lib/methods/videoConf.ts) — server-managed video conferencing (Jitsi); uses Redux actions/reducers/sagas. May be replaced or removed in the future.
  • VoIP (app/lib/services/voip/) — new WebRTC peer-to-peer audio calls with native CallKit (iOS) and Telecom (Android) integration; uses Zustand stores, not Redux. VoIP and VideoConf are entirely separate features — do not conflate them.

Entry Points

  • index.js — registers app, conditionally loads Storybook
  • app/index.tsx — Redux provider, theme, navigation, notifications setup
  • app/AppContainer.tsx — root navigation container