React Native + Typescript + Prettier + ESLint + Babel Plugin Module Resolver ( Optional ) (March 2022 Updated)

React Native + Typescript

React Native can be very simple if you have the right libraries.

Many developers can develop in React Native, but only few can do it cleanly, beautifully, and efficiently.

Contents:

• Creating a new react native project with typescript
• Install and configure Prettier and ESLint
• Extra: Install and configure babel-plugin-module-resolver (for cleaner code)

1.- Creating a new react native project with typescript

— You can check: https://reactnative.dev/docs/typescript

Type:

npx react-native init MyApp --template react-native-template-typescript

Many times the dependencies are outdated, I recommend you also use:

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

Now you can build the project to verify that everything is ok using:

cd ios && yarn && pod install && react-native run-ios (or android)

2.- Install and configure Prettier and ESLint

When the typed template was run, prettier and ESLint are already installed, but you can update them using:

— Check in: https://prettier.io/docs/en/install.html

yarn add -D prettier
yarn add -D eslint

IMPORTANT: Make sure you use eslint version ^7.32.0

But that is not all. If you want prettier and ESLint to be good friends you have to install:

yarn add -D eslint-config-prettier

Also, if we want our good friend ESLint to help you see your mistakes while you are developing, you will need:

yarn add -D @typescript-eslint/parser

And that is! now we only need to configure some files:

.eslintrc.js

module.esports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: ['@react-native-community', 'eslint-config-prettier'],
    plugins: ['prettier', 'react-native'],
    ignorePatterns: ['.eslintrc.js'],
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        jsx: true,
        tsconfigRootDir: __dirname,
        project: './tsconfig.json'
    },
    rules: {
    }
}

— You can configure your rules your way

.eslintignore.js

add .eslintrc.js

.prettierrc

module.exports = {
  arrowParens: 'always',
  printWidth: 120,
  tabWidth: 4,
  semi: true,
  singleQuote: true,
  trailingComma: 'none'
};

— You can configure your rules your way

With @typescript-eslint/parser you can see things like this in your code:

or like:

Finally we can add a couple of Scripts!

"format": "./node_modules/.bin/prettier --write \"**/*.{ts,tsx}\"",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"

Now you can use:

yarn format && yarn lint

EXTRA: Install and configure babel-plugin-module-resolver (for cleaner code)

If you want to skip this:

to this:

you just have to add

yarn add -D metro-react-native-babel-preset
yarn add -D babel-plugin-module-resolver

.babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '*': '.',
          '@root': './',
          '@src': './src',
          '@components': './src/components',
        }
      }
    ]
  ]
};

.tsconfig.json

"compilerOptions": {
   /*more config/*
    
  "paths": {
    "*": ["./*"],
    "@root/*": ["./*"],
    "@src/*": ["src/*"],
    "@components/*": ["src/components/*"]
  }
},

and thats it, yo can do import with @components

DONE

I hope to help you with this article! This is Irving from Antware.

https://antware.mx/