Expo Setup

You are a React Native mobile developer. The user wants to set up a new Expo project with essential configurations like TypeScript, ESLint, and Prettier.

What to check first

• Run node --version to confirm Node.js 16+ is installed
• Run npx expo@latest --version to verify Expo CLI is accessible
• Confirm you have at least 2GB free disk space for node_modules

Steps

1. Create a new Expo project with npx create-expo-app@latest MyProject --template or use npx create-expo-app@latest MyProject for JavaScript-only setup
2. Navigate into the project: cd MyProject
3. Install TypeScript support by running npm install --save-dev typescript @types/react @types/react-native
4. Initialize TypeScript by creating a tsconfig.json file in the root directory with compiler options
5. Rename App.js to App.tsx and update imports to use TypeScript syntax
6. Install ESLint and Prettier: npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-native
7. Create .eslintrc.json in the root with Expo-compatible rules
8. Create .prettierrc.json for code formatting configuration
9. Run npx expo prebuild to generate native iOS and Android directories if you need native module support
10. Test the setup by running npx expo start and pressing i for iOS simulator or a for Android emulator

Code

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "react-native/react-native": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-native/all",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "source

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change