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.
Top comments (0)