React Native TypeScript Config

React Native TypeScript Config is a configuration package that provides a default TypeScript configuration (tsconfig.json) specifically optimized for React Native applications. It includes carefully configured compiler options targeting modern JavaScript (ESNext), with JSX support for React Native, strict type checking enabled, and module resolution settings optimized for the React Native bundler environment.

Package Information

• Package Name: @react-native/typescript-config
• Package Type: npm
• Language: TypeScript
• Installation: npm install @react-native/typescript-config

Core Imports

This package does not export TypeScript/JavaScript modules. Instead, it provides a TypeScript configuration file that is referenced in a project's tsconfig.json:

{
  "extends": "@react-native/typescript-config"
}

Basic Usage

Create or update your project's tsconfig.json to extend the React Native configuration:

{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    // Override any specific options for your project
    "baseUrl": "./src"
  },
  "include": [
    "src/**/*"
  ]
}

The configuration will automatically inherit all the React Native-optimized TypeScript settings.

Capabilities

TypeScript Configuration

Provides a complete TypeScript configuration optimized for React Native development.

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Native",
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "types": ["jest"],
    "lib": [
      "es2019",
      "es2020.bigint",
      "es2020.date",
      "es2020.number",
      "es2020.promise",
      "es2020.string",
      "es2020.symbol.wellknown",
      "es2021.promise",
      "es2021.string",
      "es2021.weakref",
      "es2022.array",
      "es2022.object",
      "es2022.string"
    ],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "bundler",
    "customConditions": ["react-native"],
    "allowImportingTsExtensions": true,
    "allowArbitraryExtensions": true,
    "resolveJsonModule": true,
    "resolvePackageJsonImports": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    // Causes issues with package.json "exports"
    "forceConsistentCasingInFileNames": false
  },
  "exclude": [
    "**/Pods/**"
  ]
}

Key Configuration Features

Modern JavaScript Target: Targets ESNext for modern JavaScript features while maintaining React Native compatibility.

React Native JSX: Configured with "jsx": "react-native" for proper JSX transformation in React Native projects.

Type Checking: Enables strict type checking with "strict": true for better code quality and error prevention.

Module Resolution: Uses "moduleResolution": "bundler" optimized for the React Native Metro bundler.

Library Support: Includes ES2019-ES2022 feature libraries and Jest type definitions for comprehensive development support.

React Native Optimizations:

• Custom conditions for React Native-specific package.json exports
• Allows importing TypeScript extensions directly
• Resolves JSON modules for configuration files
• Synthetic default imports for CommonJS compatibility

Build Optimization:

• "noEmit": true - Prevents TypeScript from emitting compiled files (handled by React Native bundler)
• "isolatedModules": true - Ensures each file can be transpiled in isolation
• "skipLibCheck": true - Skips type checking of library files for faster builds

Platform Exclusions: Excludes iOS Pods directory (**/Pods/**) from type checking.

Configuration Extension

The package is designed to be extended or overridden in consuming projects:

{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    // Project-specific overrides
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": [
    "src/**/*",
    "types/**/*"
  ],
  "exclude": [
    "node_modules",
    "android",
    "ios",
    "**/*.test.ts"
  ]
}

Types

This package does not export TypeScript types as it is purely a configuration package. The configuration itself defines the TypeScript compilation behavior for React Native projects.

Usage Patterns

New React Native Project

For a new React Native project created with React Native CLI or Expo:

{
  "extends": "@react-native/typescript-config"
}

Existing Project Migration

When migrating an existing JavaScript React Native project to TypeScript:

1. Install the configuration package:

   npm install --save-dev @react-native/typescript-config

2. Create or update tsconfig.json:

   {
     "extends": "@react-native/typescript-config",
     "include": [
       "src/**/*",
       "App.tsx"
     ]
   }

3. Rename .js files to .ts or .tsx as appropriate.

Monorepo Setup

In a monorepo with multiple React Native projects:

{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    "baseUrl": "../../",
    "paths": {
      "@shared/*": ["packages/shared/src/*"]
    }
  }
}