Skip to content
T1KTheOneKit

code-conventions-rn

Code Conventions — React Native / TypeScript

Section titled “Code Conventions — React Native / TypeScript”

Extends core code-conventions.md. The1Studio-specific patterns.

Naming

Section titled “Naming”
  • Components: PascalCase, no suffix — Card, UserAvatar
  • Hooks: use* prefix — useDebounce, useFetch
  • Stores: use{Name}Store.ts — useAuthStore.ts
  • Atoms: {name}Atom.ts — themeAtom.ts
  • Services: {domain}.service.ts — auth.service.ts
  • Types: {name}.types.ts — user.types.ts
  • Constants: UPPER_SNAKE_CASE
  • Folders: kebab-case

Language & Tooling

Section titled “Language & Tooling”
  • TypeScript strict mode — strict: true, no any without comment, no @ts-ignore
  • Expo managed workflow — no bare ejecting unless explicitly required
  • Node — LTS version pinned via .nvmrc

Project Structure

Section titled “Project Structure”
  • Expo Router for all navigation — file-based routing under app/
  • Path alias @/ for all imports — never relative ../../
  • Feature folders: features/auth/, features/profile/
  • Shared: components/, hooks/, store/, services/, constants/, types/, utils/

State Management

Section titled “State Management”
  • Zustand for global app state (auth, settings)
  • Jotai for fine-grained reactive atoms
  • Local useState for UI-only state
  • Zustand selectors: useStore((s) => s.field) — never useStore() (causes over-rendering)
  • expo-secure-store for tokens — NEVER AsyncStorage for sensitive data
  • MMKV for fast sync access (requires dev build, not Expo Go)

Styling

Section titled “Styling”
  • StyleSheet.create() for all styles — never inline style objects
  • useColorScheme() + theme tokens for dark/light mode
  • useSafeAreaInsets() — never hardcode status bar heights
  • useWindowDimensions() — never Dimensions.get() (not reactive)

Components & Performance

Section titled “Components & Performance”
  • memo() on all FlatList/FlashList render item components
  • useCallback for handlers passed as props to memoized children
  • FlashList for lists > 50 items
  • Pressable over TouchableOpacity (modern, flexible API)
  • expo-constants for environment config — never hardcode URLs

Testing & Build

Section titled “Testing & Build”
  • Jest + RNTL; tests in __tests__/ mirroring source (not .test.tsx in same folder)
  • EAS Build only — never manual Xcode/Android Studio; credentials in EAS, never committed

Living Document

Section titled “Living Document”

If unsure about a convention not covered here, ask the user for their preference and update this file with the answer. Conventions grow from real decisions.