Coding Standards & Style Guides

Q: Prettier or ESLint for import sorting?

Pick one. This cookbook uses Prettier + @ianvs/prettier-plugin-sort-imports. Do not also enable eslint-plugin-import order rules - they fight on every save.

Q: Warnings in CI - fail or allow?

Fail on main and release/* with --max-warnings 0. Feature branches may tolerate warnings during migration sprints - but merge gate is zero warnings.

Q: How do style guides relate to expo-rules?

expo-rules are product/architecture non-negotiables (secrets, OTA, navigation). Style guides are code hygiene. Both appear in PR template; expo-rules violations are always blockers.

A cookbook for RN/Expo style guide enforcement - ESLint, Prettier, TypeScript, PR review, and CODEOWNERS wired so standards survive turnover without a style sheriff in every thread.

Recipe

Quick-reference recipe card - copy-paste ready.

// package.json - the four scripts every gate calls
{
  "scripts": {
    "lint": "expo lint",
    "lint:ci": "expo lint -- --max-warnings 0",
    "typecheck": "tsc --noEmit",
    "format:check": "prettier --check .",
    "test": "jest"
  }
}

# Local pre-push (identical sequence to CI)
npm run format:check && npm run lint:ci && npm run typecheck && npm run test

Enforcement stack
  Prettier     → formatting (quotes, commas, import order)
  ESLint       → RN/React patterns, hooks, restricted imports
  TypeScript   → types strict - no implicit any in src/
  PR template  → human gates ESLint cannot cover
  CODEOWNERS   → native-touch and release config paths

When to reach for this:

Team size crossed two engineers and PRs debate formatting weekly.
Onboarding hires from web React who import div habits into RN.
You have Standards Basics written but nobody reads them.
CI green but production still ships any, inline styles on lists, and deep feature imports.
Monorepo needs the same gates on apps/mobile and packages/ui.

When to avoid:

Solo prototype with no CI - run npx expo lint and ship; formalize when a second contributor joins.
Replacing architecture review with lint rules - ESLint cannot enforce feature boundaries without custom rules.

Working Example

End-to-end enforcement for an Expo SDK 57 app from scaffold through merged PR.

Step 1 - Scaffold lint and format

npx create-expo-app@latest StyleApp --template default@sdk-57
cd StyleApp
npx expo lint
npm install --save-dev prettier @ianvs/prettier-plugin-sort-imports eslint-config-prettier

// eslint.config.js - extend expo flat config
import expo from "eslint-config-expo/flat";
import prettier from "eslint-config-prettier";
 
export default [
  { ignores: [".expo/", "dist/", "ios/", "android/"] },
  ...expo,
  prettier,
  {
    rules: {
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
    },
  },
];

Full ESLint setup: Linting Basics
Import order: Prettier & Import Sorting

Step 2 - TypeScript strict baseline

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

npm run typecheck   # must pass before every PR merge

Stricter options: TypeScript Strict Mode
tsc and ESLint catch different bugs - run both in CI

Step 3 - Husky pre-commit (optional accelerator)

npm install --save-dev husky
npx husky init

# .husky/pre-commit
npm run format:check && npm run lint && npm run typecheck

Hooks mirror CI - never run different commands locally vs GitHub Actions
Hooks are not a substitute for branch protection - developers can --no-verify
CI gate: CI Quality Gates

Step 4 - Custom RN rules for architecture

// eslint.config.js - add restricted imports (see full recipes in custom rules page)
{
  rules: {
    "no-restricted-imports": [
      "error",
      {
        patterns: [
          {
            group: ["@/features/*/*"],
            message: "Import from @/features/<name> barrel only - see CONTRIBUTING.md",
          },
        ],
      },
    ],
  },
}

Ban StyleSheet.create in list renderItem hot paths via custom rule or review checklist
Ban console.log in src/ - use structured logging adapter
Full rule pack: Custom ESLint Rules for RN

Step 5 - GitHub Actions quality workflow

# .github/workflows/quality.yml
name: Quality Gates
on:
  pull_request:
    branches: [main]
 
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run format:check
      - run: npm run lint:ci
      - run: npm run typecheck
      - run: npm run test -- --ci

Branch protection requires quality check - red lint cannot merge
Monorepo: turbo run lint typecheck test fans out across packages

Step 6 - PR template human gates

## Style & standards
- [ ] Imports use feature barrels only (`@/features/<name>`)
- [ ] No new `any` without `// eslint-disable-next-line` + ticket comment
- [ ] Lists use FlashList/FlatList - no ScrollView for dynamic feeds
- [ ] Native-touch files: prebuild diff attached (if applicable)
 
## Evidence
- [ ] iOS tested - build_id or screenshot
- [ ] Android tested - build_id or screenshot

Template items reference Expo Project Rules Checklist
Reviewers reject "I'll fix in follow-up" on standards violations - follow-up PRs rarely land

Step 7 - CODEOWNERS for config and native touch

# .github/CODEOWNERS
app.config.ts           @mobile-platform
eas.json                @mobile-release
plugins/                @mobile-platform
ios/                    @mobile-platform
android/                @mobile-platform
.github/workflows/      @mobile-infra

CODEOWNERS auto-requests reviewers - complements ESLint for files lint does not parse
Release config changes need Release and OTA Rules reviewer

Style Guide Essentials

Publish these bullets in docs/STYLE.md - link from PR template.

TypeScript

Rule	Do	Don't
Props	`type ButtonProps = { label: string }`	`any` props
Components	Named export or default export per file - pick one per folder	Mixed patterns
Nullability	`order?.id` with strict null checks	`as` casts to silence errors
Enums	`as const` objects	TypeScript `enum` (tree-shaking)

React / RN components

// ✅ Pressable + accessibility
<Pressable
  accessibilityRole="button"
  accessibilityLabel="Submit order"
  onPress={onSubmit}
>
  <Text>Submit</Text>
</Pressable>
 
// ❌ TouchableOpacity without a11y props on interactive controls

Prefer Pressable over legacy touchables for new code
StyleSheet.create at module scope - not inline objects in list rows
Hooks rules: React Hooks Lint Rules

Imports order (Prettier plugin)

import { useState } from "react";
import { View, Text } from "react-native";
import { useRouter } from "expo-router";
 
import { Button } from "@/shared/ui";
import { useOrders } from "@/features/orders";
 
import { styles } from "./styles";

File size and complexity

Screen files target < 200 lines - extract hooks and subcomponents
One component per file unless small colocated helpers (< 20 lines)
Cyclomatic complexity: flag functions with > 10 branches in review - optional ESLint complexity rule

Review Enforcement Rubric

Severity	Example	Action
Block	Secret in `EXPO_PUBLIC_*`, deep feature import, missing `expo-doctor` on SDK PR	Request changes
Block	`ScrollView` + `.map()` for unbounded list	Request changes
Discuss	`exhaustive-deps` warning with documented exception	Comment + ticket
Nit	Variable rename outside PR scope	Approve or optional follow-up

Blockers reference a doc link - not reviewer preference
ADR exceptions override blockers when linked - Architecture Decision Records
Escalation: repeated violations → pair programming session, not public call-out

Monorepo Extension

// turbo.json
{
  "pipeline": {
    "lint": { "dependsOn": ["^lint"] },
    "typecheck": { "dependsOn": ["^typecheck"] },
    "test": { "dependsOn": ["^test"] }
  }
}

# Root package.json
turbo run format:check lint typecheck test

Shared packages/eslint-config exports flat config consumed by all apps
One Prettier config at root - .prettierignore skips ios/, android/, .expo/
Dead code scan monthly: Dead Code & Dependency Analysis

FAQs

Prettier or ESLint for import sorting?

Pick one. This cookbook uses Prettier + @ianvs/prettier-plugin-sort-imports. Do not also enable eslint-plugin-import order rules - they fight on every save.

Warnings in CI - fail or allow?

Fail on main and release/* with --max-warnings 0. Feature branches may tolerate warnings during migration sprints - but merge gate is zero warnings.

How do style guides relate to expo-rules?

expo-rules are product/architecture non-negotiables (secrets, OTA, navigation). Style guides are code hygiene. Both appear in PR template; expo-rules violations are always blockers.

Standards Basics - naming, folders, native touch
Linting Basics - ESLint 9 flat config
CI Quality Gates - GitHub Actions wiring
Custom ESLint Rules for RN - restricted imports
Expo Project Rules Checklist - merge blockers
Linting & Formatting Best Practices - 25-point summary
Governance Best Practices - team-wide governance summary

Stack versions: This page was written for React 19.2.3, React Native 0.86.0, and Expo SDK 57 (expo ~57.0.4).

Recipe

Quick-reference recipe card - copy-paste ready.

// package.json - the four scripts every gate calls
{
  "scripts": {
    "lint": "expo lint",
    "lint:ci": "expo lint -- --max-warnings 0",
    "typecheck": "tsc --noEmit",
    "format:check": "prettier --check .",
    "test": "jest"
  }
}

# Local pre-push (identical sequence to CI)
npm run format:check && npm run lint:ci && npm run typecheck && npm run test

Enforcement stack
  Prettier     → formatting (quotes, commas, import order)
  ESLint       → RN/React patterns, hooks, restricted imports
  TypeScript   → types strict - no implicit any in src/
  PR template  → human gates ESLint cannot cover
  CODEOWNERS   → native-touch and release config paths

When to reach for this:

Team size crossed two engineers and PRs debate formatting weekly.
Onboarding hires from web React who import div habits into RN.
You have Standards Basics written but nobody reads them.
CI green but production still ships any, inline styles on lists, and deep feature imports.
Monorepo needs the same gates on apps/mobile and packages/ui.

When to avoid:

Solo prototype with no CI - run npx expo lint and ship; formalize when a second contributor joins.
Replacing architecture review with lint rules - ESLint cannot enforce feature boundaries without custom rules.

Working Example

End-to-end enforcement for an Expo SDK 57 app from scaffold through merged PR.

Step 1 - Scaffold lint and format

npx create-expo-app@latest StyleApp --template default@sdk-57
cd StyleApp
npx expo lint
npm install --save-dev prettier @ianvs/prettier-plugin-sort-imports eslint-config-prettier

// eslint.config.js - extend expo flat config
import expo from "eslint-config-expo/flat";
import prettier from "eslint-config-prettier";
 
export default [
  { ignores: [".expo/", "dist/", "ios/", "android/"] },
  ...expo,
  prettier,
  {
    rules: {
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
    },
  },
];

Full ESLint setup: Linting Basics
Import order: Prettier & Import Sorting

Step 2 - TypeScript strict baseline

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

npm run typecheck   # must pass before every PR merge

Stricter options: TypeScript Strict Mode
tsc and ESLint catch different bugs - run both in CI

Step 3 - Husky pre-commit (optional accelerator)

npm install --save-dev husky
npx husky init

# .husky/pre-commit
npm run format:check && npm run lint && npm run typecheck

Hooks mirror CI - never run different commands locally vs GitHub Actions
Hooks are not a substitute for branch protection - developers can --no-verify
CI gate: CI Quality Gates

Step 4 - Custom RN rules for architecture

// eslint.config.js - add restricted imports (see full recipes in custom rules page)
{
  rules: {
    "no-restricted-imports": [
      "error",
      {
        patterns: [
          {
            group: ["@/features/*/*"],
            message: "Import from @/features/<name> barrel only - see CONTRIBUTING.md",
          },
        ],
      },
    ],
  },
}

Ban StyleSheet.create in list renderItem hot paths via custom rule or review checklist
Ban console.log in src/ - use structured logging adapter
Full rule pack: Custom ESLint Rules for RN

Step 5 - GitHub Actions quality workflow

# .github/workflows/quality.yml
name: Quality Gates
on:
  pull_request:
    branches: [main]
 
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run format:check
      - run: npm run lint:ci
      - run: npm run typecheck
      - run: npm run test -- --ci

Branch protection requires quality check - red lint cannot merge
Monorepo: turbo run lint typecheck test fans out across packages

Step 6 - PR template human gates

## Style & standards
- [ ] Imports use feature barrels only (`@/features/<name>`)
- [ ] No new `any` without `// eslint-disable-next-line` + ticket comment
- [ ] Lists use FlashList/FlatList - no ScrollView for dynamic feeds
- [ ] Native-touch files: prebuild diff attached (if applicable)
 
## Evidence
- [ ] iOS tested - build_id or screenshot
- [ ] Android tested - build_id or screenshot

Template items reference Expo Project Rules Checklist
Reviewers reject "I'll fix in follow-up" on standards violations - follow-up PRs rarely land

Step 7 - CODEOWNERS for config and native touch

# .github/CODEOWNERS
app.config.ts           @mobile-platform
eas.json                @mobile-release
plugins/                @mobile-platform
ios/                    @mobile-platform
android/                @mobile-platform
.github/workflows/      @mobile-infra

CODEOWNERS auto-requests reviewers - complements ESLint for files lint does not parse
Release config changes need Release and OTA Rules reviewer

Style Guide Essentials

Publish these bullets in docs/STYLE.md - link from PR template.

TypeScript

Rule	Do	Don't
Props	`type ButtonProps = { label: string }`	`any` props
Components	Named export or default export per file - pick one per folder	Mixed patterns
Nullability	`order?.id` with strict null checks	`as` casts to silence errors
Enums	`as const` objects	TypeScript `enum` (tree-shaking)

React / RN components

// ✅ Pressable + accessibility
<Pressable
  accessibilityRole="button"
  accessibilityLabel="Submit order"
  onPress={onSubmit}
>
  <Text>Submit</Text>
</Pressable>
 
// ❌ TouchableOpacity without a11y props on interactive controls

Prefer Pressable over legacy touchables for new code
StyleSheet.create at module scope - not inline objects in list rows
Hooks rules: React Hooks Lint Rules

Imports order (Prettier plugin)

import { useState } from "react";
import { View, Text } from "react-native";
import { useRouter } from "expo-router";
 
import { Button } from "@/shared/ui";
import { useOrders } from "@/features/orders";
 
import { styles } from "./styles";

File size and complexity

Screen files target < 200 lines - extract hooks and subcomponents
One component per file unless small colocated helpers (< 20 lines)
Cyclomatic complexity: flag functions with > 10 branches in review - optional ESLint complexity rule

Review Enforcement Rubric

Severity	Example	Action
Block	Secret in `EXPO_PUBLIC_*`, deep feature import, missing `expo-doctor` on SDK PR	Request changes
Block	`ScrollView` + `.map()` for unbounded list	Request changes
Discuss	`exhaustive-deps` warning with documented exception	Comment + ticket
Nit	Variable rename outside PR scope	Approve or optional follow-up

Blockers reference a doc link - not reviewer preference
ADR exceptions override blockers when linked - Architecture Decision Records
Escalation: repeated violations → pair programming session, not public call-out

Monorepo Extension

// turbo.json
{
  "pipeline": {
    "lint": { "dependsOn": ["^lint"] },
    "typecheck": { "dependsOn": ["^typecheck"] },
    "test": { "dependsOn": ["^test"] }
  }
}

# Root package.json
turbo run format:check lint typecheck test

Shared packages/eslint-config exports flat config consumed by all apps
One Prettier config at root - .prettierignore skips ios/, android/, .expo/
Dead code scan monthly: Dead Code & Dependency Analysis

FAQs

Prettier or ESLint for import sorting?

Pick one. This cookbook uses Prettier + @ianvs/prettier-plugin-sort-imports. Do not also enable eslint-plugin-import order rules - they fight on every save.

Warnings in CI - fail or allow?

Fail on main and release/* with --max-warnings 0. Feature branches may tolerate warnings during migration sprints - but merge gate is zero warnings.

How do style guides relate to expo-rules?

expo-rules are product/architecture non-negotiables (secrets, OTA, navigation). Style guides are code hygiene. Both appear in PR template; expo-rules violations are always blockers.

Standards Basics - naming, folders, native touch
Linting Basics - ESLint 9 flat config
CI Quality Gates - GitHub Actions wiring
Custom ESLint Rules for RN - restricted imports
Expo Project Rules Checklist - merge blockers
Linting & Formatting Best Practices - 25-point summary
Governance Best Practices - team-wide governance summary

Stack versions: This page was written for React 19.2.3, React Native 0.86.0, and Expo SDK 57 (expo ~57.0.4).

Coding Standards & Style Guides

Search Documentation

Coding Standards & Style Guides