@tsconfig/react-native

What is @tsconfig/react-native?

@tsconfig/react-native is a TypeScript configuration preset specifically tailored for React Native projects. It provides a set of TypeScript compiler options that are optimized for developing React Native applications, ensuring compatibility and enhancing the development experience.

What are @tsconfig/react-native's main functionalities?

TypeScript Configuration for React Native

This configuration sets up TypeScript to work seamlessly with React Native by specifying appropriate compiler options such as target, module, lib, and jsx settings.

{"compilerOptions":{"target":"ESNext","module":"ESNext","lib":["ESNext"],"jsx":"react-native","allowJs":true,"skipLibCheck":true,"esModuleInterop":true,"strict":true,"forceConsistentCasingInFileNames":true,"noEmit":true,"isolatedModules":true,"resolveJsonModule":true}}

Strict Type-Checking Options

Enables strict type-checking options to catch potential errors early in the development process, ensuring a more robust codebase.

{"compilerOptions":{"strict":true,"forceConsistentCasingInFileNames":true}}

Module Resolution

Configures module resolution to support ES module interoperability and JSON module imports, which are common in React Native projects.

{"compilerOptions":{"esModuleInterop":true,"resolveJsonModule":true}}

Other packages similar to @tsconfig/react-native

react-native-typescript-transformer

react-native-typescript-transformer is a custom transformer for Metro, the React Native bundler, that allows you to use TypeScript with React Native. It provides a way to integrate TypeScript compilation into the React Native build process, but it requires additional setup compared to the out-of-the-box configuration provided by @tsconfig/react-native.

ts-jest

ts-jest is a Jest transformer that enables you to use TypeScript with Jest for testing. While it is not a direct replacement for @tsconfig/react-native, it complements it by providing TypeScript support in the testing environment, ensuring type safety in tests for React Native projects.

README

A base TSConfig for working with React Native.

Add the package to your "devDependencies":

npm install --save-dev @tsconfig/react-native
yarn add --dev @tsconfig/react-native

Add to your tsconfig.json:

"extends": "@tsconfig/react-native/tsconfig.json"

---

The tsconfig.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "_version": "3.0.2",
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "types": ["react-native", "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": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

You can find the code here.