DEV Community

Cover image for Setting up a React Native project (TypeScript + Airbnb linter)
Oksana Ivanchenko
Oksana Ivanchenko

Posted on

Setting up a React Native project (TypeScript + Airbnb linter)

Reading other sources, I didn't succeed in setting up my React Native project with the TypeScript template and the airbnb linter. And it's okay as everything changes so quickly. I understand that my tutorial will also become obsolete in a few months, but I'll try to keep it up to date.
I will be using yarn v1 as yarn v2 doesn't support React Native yet. As my linter, I chose the Airbnb linter.

Creating a React Native project with the TypeScript template

npx react-native init MyApp --template react-native-template-typescript
Enter fullscreen mode Exit fullscreen mode
cd MyApp
Enter fullscreen mode Exit fullscreen mode

Adding ESLint

yarn add --dev eslint @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks    
Enter fullscreen mode Exit fullscreen mode

Rename .eslintrc.js to .eslintrc.json. If you don't have a file named .eslintrc.js, just create .eslintrc.json. In this flile we need to add this code.

{
  "extends": ["airbnb"],
  "plugins": ["@typescript-eslint", "react"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "import/no-unresolved": 0,
    "react/jsx-filename-extension": [1, {
      "extensions": [
        ".jsx",
        ".tsx"
      ]
    }]
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it. Now you have your RN project set up with TypeScript and airbnb linter.

Top comments (1)

Collapse
 
roadev profile image
Juan Roa

Thank you!