javascripttypescriptreact-nativeyarnpkgcreate-react-native-app

How to setup React-Native with Yarn and Typescript


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?


Solution

  • 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.