DEV Community

Cover image for Expo TypeScript ESLint Prettier initial setup
Dima Portenko
Dima Portenko

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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

Now I added some code and see following error

ScreenShot of error TS2786: 'Animated.View' cannot be used as a JSX component<br>

So I'm following solution from the GitHub.

// package.json
"resolutions": { "@types/react": "^17" }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

ESLint config

Let's add ESLint config in .eslintrc.js

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

TS config

Add compileOptions to existing config tsconfig.json

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

Update .gitignore

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

# WebStorm
.idea
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

And commit changes

git add .
git commit -m 'expo template config'
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)