react-native-sop-docs/02-project-initialization/project-setup.md

Project Initialization

Create New Project

# Create new React Native project with TypeScript
npx react-native init MyApp --template react-native-template-typescript

cd MyApp

# Initialize git repository
git init
git add .
git commit -m "Initial commit"

TypeScript Configuration

tsconfig.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:

yarn add -D eslint prettier husky lint-staged @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.js:

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:

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
};

package.json scripts:

{
  "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

yarn add react-native-config

Create environment files:

# .env.development
API_BASE_URL=https://dev-api.myapp.com
APP_ENV=development

# .env.production
API_BASE_URL=https://api.myapp.com
APP_ENV=production