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 prettieryarn 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/

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Use Tuples and Enums to Utilize TypeScript for API request Params

Automated GitHub Actions Deployment with Semantic-Release

React — Why Ionic lets you develop faster

Let’s Make a Game: The Basics!

UC Berkeley CS 198/98 • jQuery Challenge

JavaScript Let vs Var vs Const

Top 5 Javascript Topics You Should Know

Optimize Build Speed in webpack 4

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Guerra Vargas Irving Cristóbal

Guerra Vargas Irving Cristóbal

More from Medium

Elegantly type React’s useReducer and Context API with discriminated union of Typescript

Add Typescript to React Package

White Screen of Death In React

Request and cache data in React like a pro