Expo TypeScript ESLint Prettier initial setup

Expo is great platform on top of React Native. Which is great out of box and simplify your life a lot. But there are things I'm missing from React Native setup when I'm creating new project with Expo. So I decided to make this post with initial setup to use it as personal documentation.

Also, you can find how to wrap this boileplate with bash script in this post.

Expo template

First of all, I'm creating project with expo-cli and TypeScript template.

expo init -t expo-template-blank-typescript your-project-name

Resolve TS2786: 'Animated.View' cannot be used as a JSX component

Now I added some code and see following error

So I'm following solution from the GitHub.

// package.json
"resolutions": { "@types/react": "^17" }

TypeScript, ESLint, Prettier dependencies

Basically following React Native TypeScript template, I'm using following dependencies

yarn add -D eslint prettier @react-native-community/eslint-config @typescript-eslint/eslint-plugin eslint-config-prettier

ESLint config

Let's add ESLint config in .eslintrc.js

module.exports = {
  extends: ['@react-native-community', "eslint-config-prettier"],
}

TS config

Add compileOptions to existing config tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "module": "es6"
  }
}

Update .gitignore

I'm using WebStorm IDE. So I likely want to have following addition in my .gitignore

# WebStorm
.idea

Code reformat and commit changes

And final stroke to reformat our template code according to our new setup with prettier.

./node_modules/prettier/bin-prettier.js --write .

And commit changes

git add .
git commit -m 'expo template config'

This small already helps me each time I setup new expo project. Hope it will help someone else as well.