0
# React Native TypeScript Config
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @react-native/typescript-config
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @react-native/typescript-config`
10

11
## Core Imports
12

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

15
```json
16
{
17
  "extends": "@react-native/typescript-config"
18
}
19
```
20

21
## Basic Usage
22

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

25
```json
26
{
27
  "extends": "@react-native/typescript-config",
28
  "compilerOptions": {
29
    // Override any specific options for your project
30
    "baseUrl": "./src"
31
  },
32
  "include": [
33
    "src/**/*"
34
  ]
35
}
36
```
37

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

40
## Capabilities
41

42
### TypeScript Configuration
43

44
Provides a complete TypeScript configuration optimized for React Native development.
45

46
```json { .api }
47
{
48
  "$schema": "https://json.schemastore.org/tsconfig",
49
  "display": "React Native",
50
  "compilerOptions": {
51
    "target": "esnext",
52
    "module": "esnext",
53
    "types": ["jest"],
54
    "lib": [
55
      "es2019",
56
      "es2020.bigint",
57
      "es2020.date",
58
      "es2020.number",
59
      "es2020.promise",
60
      "es2020.string",
61
      "es2020.symbol.wellknown",
62
      "es2021.promise",
63
      "es2021.string",
64
      "es2021.weakref",
65
      "es2022.array",
66
      "es2022.object",
67
      "es2022.string"
68
    ],
69
    "allowJs": true,
70
    "jsx": "react-native",
71
    "noEmit": true,
72
    "isolatedModules": true,
73
    "strict": true,
74
    "moduleResolution": "bundler",
75
    "customConditions": ["react-native"],
76
    "allowImportingTsExtensions": true,
77
    "allowArbitraryExtensions": true,
78
    "resolveJsonModule": true,
79
    "resolvePackageJsonImports": false,
80
    "allowSyntheticDefaultImports": true,
81
    "esModuleInterop": true,
82
    "skipLibCheck": true,
83
    // Causes issues with package.json "exports"
84
    "forceConsistentCasingInFileNames": false
85
  },
86
  "exclude": [
87
    "**/Pods/**"
88
  ]
89
}
90
```
91

92
#### Key Configuration Features
93

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

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

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

100
**Module Resolution**: Uses `"moduleResolution": "bundler"` optimized for the React Native Metro bundler.
101

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

104
**React Native Optimizations**: 
105
- Custom conditions for React Native-specific package.json exports
106
- Allows importing TypeScript extensions directly
107
- Resolves JSON modules for configuration files
108
- Synthetic default imports for CommonJS compatibility
109

110
**Build Optimization**:
111
- `"noEmit": true` - Prevents TypeScript from emitting compiled files (handled by React Native bundler)
112
- `"isolatedModules": true` - Ensures each file can be transpiled in isolation
113
- `"skipLibCheck": true` - Skips type checking of library files for faster builds
114

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

117
### Configuration Extension
118

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

121
```json
122
{
123
  "extends": "@react-native/typescript-config",
124
  "compilerOptions": {
125
    // Project-specific overrides
126
    "baseUrl": "./src",
127
    "paths": {
128
      "@/*": ["*"]
129
    }
130
  },
131
  "include": [
132
    "src/**/*",
133
    "types/**/*"
134
  ],
135
  "exclude": [
136
    "node_modules",
137
    "android",
138
    "ios",
139
    "**/*.test.ts"
140
  ]
141
}
142
```
143

144
## Types
145

146
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.
147

148
## Usage Patterns
149

150
### New React Native Project
151

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

154
```json
155
{
156
  "extends": "@react-native/typescript-config"
157
}
158
```
159

160
### Existing Project Migration
161

162
When migrating an existing JavaScript React Native project to TypeScript:
163

164
1. Install the configuration package:
165
   ```bash
166
   npm install --save-dev @react-native/typescript-config
167
   ```
168

169
2. Create or update `tsconfig.json`:
170
   ```json
171
   {
172
     "extends": "@react-native/typescript-config",
173
     "include": [
174
       "src/**/*",
175
       "App.tsx"
176
     ]
177
   }
178
   ```
179

180
3. Rename `.js` files to `.ts` or `.tsx` as appropriate.
181

182
### Monorepo Setup
183

184
In a monorepo with multiple React Native projects:
185

186
```json
187
{
188
  "extends": "@react-native/typescript-config",
189
  "compilerOptions": {
190
    "baseUrl": "../../",
191
    "paths": {
192
      "@shared/*": ["packages/shared/src/*"]
193
    }
194
  }
195
}
196
```