React Native is an interesting technology!! Theer are many great articles our team blog.

In this article, I will explain to add TypeScript support to a RN4W project.

Create a new RN4W project(JS)

First, we create a new RN4W project in JavaScript. The completely steps are writtn on the official GitHub repository.

Consuming react native windows

After doing the steps, we will see following:


Add TypeScript support

There is a official document that is "Adding TypeScript to an Existing Project."

The steps also works for React Native for Windows. So let's type following command:



yarn add typescript @types/jest @types/react @types/react-native @types/react-test-renderer



And adding tsconfig.json like below:



    "compilerOptions": {
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "jsx": "react",
      "lib": ["es6"],
      "moduleResolution": "node",
      "noEmit": true,
      "strict": true,
      "target": "esnext",
      "resolveJsonModule": true
    "exclude": [



There is a different line from the original document. I added "resolveJsonModule": true because in the React Native template app is using import JSON file directly.

And adding jest.config.js like below. This is a same as the original document.



module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],



The next, change the file extensions other than index.js from .js to .tsx . App.js is a target file.

After that, you will be able to launch the app like below:


But there is a compile error in App.tsx yet. Adding a following type declare to above of App component definition to fix the error.



declare var global: {HermesInternal: null | {}};



If you remove global.HermesInternal from App.tsx, then you can remove the row.

After that, you can get intellisence everywhere.


Happy type safe coding!!