# Project Initialization ## Create New Project ```bash # Create new React Native project with TypeScript npx react-native init SaayamApp --template react-native-template-typescript cd SaayamApp # Initialize git repository git init git add . git commit -m "Initial commit" ``` ## TypeScript Configuration **tsconfig.json:** ```json { "extends": "@react-native/typescript-config/tsconfig.json", "compilerOptions": { "strict": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"], "@components/*": ["./src/components/*"], "@screens/*": ["./src/screens/*"], "@utils/*": ["./src/utils/*"], "@config/*": ["./src/config/*"], "@redux/*": ["./src/redux/*"], "@assets/*": ["./src/assets/*"] } }, "include": ["src/**/*", "index.js"], "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"] } ``` ## Folder Structure ``` src/ ├── components/ # Reusable UI components │ ├── common/ # Generic components │ ├── forms/ # Form-specific components │ └── index.ts # Component exports ├── screens/ # Screen components │ ├── Auth/ │ ├── Home/ │ └── index.ts ├── navigation/ # Navigation configuration ├── redux/ # State management │ ├── store/ │ ├── slices/ │ └── types/ ├── services/ # API services ├── utils/ # Utility functions ├── config/ # App configuration ├── assets/ # Images, fonts, etc. │ ├── images/ │ ├── fonts/ │ └── icons/ ├── types/ # TypeScript type definitions └── constants/ # App constants ``` ## Code Quality Setup **Install dependencies:** ```bash yarn add -D eslint prettier husky lint-staged @typescript-eslint/parser @typescript-eslint/eslint-plugin ``` **.eslintrc.js:** ```javascript module.exports = { root: true, extends: [ '@react-native-community', '@typescript-eslint/recommended', ], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], rules: { 'react-native/no-inline-styles': 'warn', '@typescript-eslint/no-unused-vars': 'error', 'react-hooks/exhaustive-deps': 'warn', }, }; ``` **.prettierrc.js:** ```javascript module.exports = { arrowParens: 'avoid', bracketSameLine: true, bracketSpacing: false, singleQuote: true, trailingComma: 'all', tabWidth: 2, semi: true, }; ``` **package.json scripts:** ```json { "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix", "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json}\"", "type-check": "tsc --noEmit" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"] } } ``` ## Environment Configuration ```bash yarn add react-native-config ``` **Create environment files:** ```bash # .env.development API_BASE_URL=https://dev-api.saayam.com APP_ENV=development # .env.production API_BASE_URL=https://api.saayam.com APP_ENV=production ```