How to setup React-Native with Yarn and Typescript

Question

So up until now I have been working on my project using barebone react-native and npm and its was going okay but now I face a problem

I need to add a new feature at the later stages which would be a headache and therefore I decided to restart the build as I could fix many of bad codings and errors.

Now this do over is going to be a different setup I am not going to use npm, insted I want to use yarn. I am not going to use React-Native alone, I am going to use it with typescript!

Now here is the problem I have installed yarn on windows laptop using the installer but am not entirely sure how to create react-native app and on top of that add typescript. Looking through the docs and other forums the answer keeps changing on how to create react-native app or how to setup typescript with that. So please tell me

How Do I set up a react-native app using yarn with typescript on a windows laptop?

Answer 1

This is what worked for me:

Create your react-native App:

npx react-native init MyApp
cd MyApp

Add typescript:

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

Then create a tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

And a jest.config.js

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

Change your App.js to App.tsx.

That is it. Now you can change the configuration file with more strict type rules if you want to.

All the documentation is in https://reactnative.dev/docs/typescript.

Side Note: npx react-native init MyApp --template react-native-template-typescript resulted in errors when building the App. That is why I tried using the above method.