# Install Node.js 18+ (LTS recommended)
node --version  # Should be v18.0.0 or higher

# Install React Native CLI
npm install -g react-native-cli

# Or use Expo (recommended for beginners)
npm install -g expo-cli

# iOS development (macOS only)
xcode-select --install
sudo gem install cocoapods

# Android development
# Install Android Studio with Android SDK 33+

# Create new Expo project with TypeScript
npx create-expo-app@latest MyApp --template expo-template-blank-typescript

cd MyApp

# Install core dependencies
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context
npm install @reduxjs/toolkit react-redux
npm install expo-secure-store expo-crypto
npm install axios react-native-dotenv

// src/config/env.ts - Environment configuration
import Constants from 'expo-constants';

type Environment = 'development' | 'staging' | 'production';

interface Config {
  apiUrl: string;
  apiTimeout: number;
  environment: Environment;
  enableLogging: boolean;
}

const ENV: Record<Environment, Config> = {
  development: {
    apiUrl: 'http://localhost:3000/api',
    apiTimeout: 30000,
    environment: 'development',
    enableLogging: true,
  },
  staging: {
    apiUrl: 'https://staging-api.example.com',
    apiTimeout: 15000,
    environment: 'staging',
    enableLogging: true,
  },
  production: {
    apiUrl: 'https://api.example.com',
    apiTimeout: 10000,
    environment: 'production',
    enableLogging: false,
  },
};

const getEnvironment = (): Environment => {
  if (__DEV__) return 'development';
  const releaseChannel = Constants.expoConfig?.updates?.releaseChannel;
  if (releaseChannel === 'staging') return 'staging';
  return 'production';
};

export const config: Config = ENV[getEnvironment()];

// src/services/auth.service.ts - Authentication service
import * as SecureStore from 'expo-secure-store';
import * as Crypto from 'expo-crypto';
import axios, { AxiosInstance } from 'axios';
import { config } from '../config/env';

interface AuthTokens {
  accessToken: string;
  refreshToken: string;
  expiresAt: number;
}

interface LoginCredentials {
  email: string;
  password: string;
}

interface AuthResponse {
  access_token: string;
  refresh_token: string;
  expires_in: number; // seconds
  user: {
    id: string;
    email: string;
    name: string;
  };
}

class AuthService {
  private api: AxiosInstance;
  private readonly TOKEN_KEY = 'auth_tokens';
  private readonly REFRESH_THRESHOLD = 300; // Refresh 5 min before expiry

  constructor() {
    this.api = axios.create({
      baseURL: config.apiUrl,
      timeout: config.apiTimeout,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // Add request interceptor for token injection
    this.api.interceptors.request.use(
      async (config) => {
        const tokens = await this.getTokens();
        if (tokens && this.isTokenValid(tokens)) {
          config.headers.Authorization = `Bearer ${tokens.accessToken}`;
        }
        return config;
      },
      (error) => Promise.reject(error)
    );

    // Add response interceptor for token refresh
    this.api.interceptors.response.use(
      (response) => response,
      async (error) => {
        const originalRequest = error.config;

        if (error.response?.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;

          try {
            const tokens = await this.refreshAccessToken();
            originalRequest.headers.Authorization = `Bearer ${tokens.accessToken}`;
            return this.api(originalRequest);
          } catch (refreshError) {
            await this.logout();
            throw refreshError;
          }
        }

        return Promise.reject(error);
      }
    );
  }

  /**
   * Login with email and password
   */
  async login(credentials: LoginCredentials): Promise<AuthResponse> {
    try {
      const { data } = await this.api.post<AuthResponse>('/auth/login', credentials);

      const tokens: AuthTokens = {
        accessToken: data.access_token,
        refreshToken: data.refresh_token,
        expiresAt: Date.now() + data.expires_in * 1000,
      };

      await this.storeTokens(tokens);
      return data;
    } catch (error) {
      if (axios.isAxiosError(error)) {
        throw new Error(error.response?.data?.message || 'Login failed');
      }
      throw error;
    }
  }

  /**
   * Refresh access token using refresh token
   */
  async refreshAccessToken(): Promise<AuthTokens> {
    const tokens = await this.getTokens();
    if (!tokens?.refreshToken) {
      throw new Error('No refresh token available');
    }

    try {
      const { data } = await axios.post<{
        access_token: string;
        expires_in: number;
      }>(
        `${config.apiUrl}/auth/refresh`,
        { refresh_token: tokens.refreshToken },
        { timeout: config.apiTimeout }
      );

      const newTokens: AuthTokens = {
        accessToken: data.access_token,
        refreshToken: tokens.refreshToken,
        expiresAt: Date.now() + data.expires_in * 1000,
      };

      await this.storeTokens(newTokens);
      return newTokens;
    } catch (error) {
      await this.logout();
      throw new Error('Token refresh failed');
    }
  }

  /**
   * Logout and clear stored tokens
   */
  async logout(): Promise<void> {
    try {
      const tokens = await this.getTokens();
      if (tokens) {
        // Notify backend of logout (optional)
        await this.api.post('/auth/logout', {
          refresh_token: tokens.refreshToken,
        }).catch(() => {
          // Ignore errors - still clear local tokens
        });
      }
    } finally {
      await SecureStore.deleteItemAsync(this.TOKEN_KEY);
    }
  }

  /**
   * Store tokens securely
   */
  private async storeTokens(tokens: AuthTokens): Promise<void> {
    const encrypted = await this.encryptTokens(tokens);
    await SecureStore.setItemAsync(this.TOKEN_KEY, encrypted);
  }

  /**
   * Retrieve tokens from secure storage
   */
  private async getTokens(): Promise<AuthTokens | null> {
    try {
      const encrypted = await SecureStore.getItemAsync(this.TOKEN_KEY);
      if (!encrypted) return null;
      return await this.decryptTokens(encrypted);
    } catch (error) {
      console.error('Failed to retrieve tokens:', error);
      return null;
    }
  }

  /**
   * Check if token is valid and not near expiry
   */
  private isTokenValid(tokens: AuthTokens): boolean {
    const now = Date.now();
    return tokens.expiresAt - now > this.REFRESH_THRESHOLD * 1000;
  }

  /**
   * Encrypt tokens before storage (additional security layer)
   */
  private async encryptTokens(tokens: AuthTokens): Promise<string> {
    // Note: expo-secure-store already encrypts data, but this adds app-level encryption
    const json = JSON.stringify(tokens);
    // In production, use a key derived from device-specific data
    const digest = await Crypto.digestStringAsync(
      Crypto.CryptoDigestAlgorithm.SHA256,
      json
    );
    return Buffer.from(json).toString('base64');
  }

  /**
   * Decrypt tokens from storage
   */
  private async decryptTokens(encrypted: string): Promise<AuthTokens> {
    const json = Buffer.from(encrypted, 'base64').toString('utf-8');
    return JSON.parse(json) as AuthTokens;
  }

  /**
   * Get API instance with authentication
   */
  getAuthenticatedApi(): AxiosInstance {
    return this.api;
  }
}

export const authService = new AuthService();

// src/services/biometric.service.ts - Biometric authentication
import * as LocalAuthentication from 'expo-local-authentication';
import * as SecureStore from 'expo-secure-store';

export enum BiometricType {
  FINGERPRINT = 'fingerprint',
  FACIAL_RECOGNITION = 'facial_recognition',
  IRIS = 'iris',
}

interface BiometricCapabilities {
  isAvailable: boolean;
  isEnrolled: boolean;
  supportedTypes: BiometricType[];
}

class BiometricService {
  private readonly BIOMETRIC_ENABLED_KEY = 'biometric_enabled';

  /**
   * Check device biometric capabilities
   */
  async getCapabilities(): Promise<BiometricCapabilities> {
    const isAvailable = await LocalAuthentication.hasHardwareAsync();
    const isEnrolled = await LocalAuthentication.isEnrolledAsync();
    const supportedTypes = await this.getSupportedTypes();

    return {
      isAvailable,
      isEnrolled,
      supportedTypes,
    };
  }

  /**
   * Get supported biometric types
   */
  private async getSupportedTypes(): Promise<BiometricType[]> {
    const types = await LocalAuthentication.supportedAuthenticationTypesAsync();
    const supported: BiometricType[] = [];

    if (types.includes(LocalAuthentication.AuthenticationType.FINGERPRINT)) {
      supported.push(BiometricType.FINGERPRINT);
    }
    if (types.includes(LocalAuthentication.AuthenticationType.FACIAL_RECOGNITION)) {
      supported.push(BiometricType.FACIAL_RECOGNITION);
    }
    if (types.includes(LocalAuthentication.AuthenticationType.IRIS)) {
      supported.push(BiometricType.IRIS);
    }

    return supported;
  }

  /**
   * Authenticate user with biometrics
   */
  async authenticate(prompt: string = 'Authenticate to continue'): Promise<boolean> {
    try {
      const result = await LocalAuthentication.authenticateAsync({
        promptMessage: prompt,
        cancelLabel: 'Cancel',
        fallbackLabel: 'Use Passcode',
        disableDeviceFallback: false,
      });

      return result.success;
    } catch (error) {
      console.error('Biometric authentication error:', error);
      return false;
    }
  }

  /**
   * Enable biometric authentication for app
   */
  async enableBiometric(): Promise<boolean> {
    const capabilities = await this.getCapabilities();

    if (!capabilities.isAvailable || !capabilities.isEnrolled) {
      throw new Error('Biometric authentication not available or not enrolled');
    }

    const success = await this.authenticate('Enable biometric login');
    if (success) {
      await SecureStore.setItemAsync(this.BIOMETRIC_ENABLED_KEY, 'true');
    }

    return success;
  }

  /**
   * Check if biometric is enabled
   */
  async isBiometricEnabled(): Promise<boolean> {
    const enabled = await SecureStore.getItemAsync(this.BIOMETRIC_ENABLED_KEY);
    return enabled === 'true';
  }

  /**
   * Disable biometric authentication
   */
  async disableBiometric(): Promise<void> {
    await SecureStore.deleteItemAsync(this.BIOMETRIC_ENABLED_KEY);
  }
}

export const biometricService = new BiometricService();

// src/store/store.ts - Redux store configuration
import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import authReducer from './slices/auth.slice';
import userReducer from './slices/user.slice';

// Configure Redux store with middleware
export const store = configureStore({
  reducer: {
    auth: authReducer,
    user: userReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // Ignore these action types
        ignoredActions: ['auth/login/fulfilled'],
        // Ignore these paths in the state
        ignoredPaths: ['auth.user'],
      },
    }),
  devTools: __DEV__, // Enable Redux DevTools in development
});

// Infer types from store
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// Export typed hooks
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// src/store/slices/auth.slice.ts - Auth state management
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { authService } from '../../services/auth.service';

interface User {
  id: string;
  email: string;
  name: string;
}

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
}

const initialState: AuthState = {
  user: null,
  isAuthenticated: false,
  isLoading: false,
  error: null,
};

// Async thunks
export const loginUser = createAsyncThunk(
  'auth/login',
  async (credentials: { email: string; password: string }, { rejectWithValue }) => {
    try {
      const response = await authService.login(credentials);
      return response.user;
    } catch (error) {
      return rejectWithValue(error instanceof Error ? error.message : 'Login failed');
    }
  }
);

export const logoutUser = createAsyncThunk(
  'auth/logout',
  async (_, { rejectWithValue }) => {
    try {
      await authService.logout();
    } catch (error) {
      return rejectWithValue(error instanceof Error ? error.message : 'Logout failed');
    }
  }
);

// Auth slice
const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    clearError: (state) => {
      state.error = null;
    },
    setUser: (state, action: PayloadAction<User>) => {
      state.user = action.payload;
      state.isAuthenticated = true;
    },
  },
  extraReducers: (builder) => {
    builder
      // Login
      .addCase(loginUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(loginUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.user = action.payload;
        state.isAuthenticated = true;
      })
      .addCase(loginUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.payload as string;
      })
      // Logout
      .addCase(logoutUser.fulfilled, (state) => {
        state.user = null;
        state.isAuthenticated = false;
      });
  },
});

export const { clearError, setUser } = authSlice.actions;
export default authSlice.reducer;

// src/components/OptimizedList.tsx - High-performance list rendering
import React, { useCallback } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { FlashList } from '@shopify/flash-list';

interface ListItem {
  id: string;
  title: string;
  subtitle: string;
}

interface OptimizedListProps {
  data: ListItem[];
  onItemPress: (item: ListItem) => void;
  onEndReached?: () => void;
  isLoading?: boolean;
}

// Memoized list item component
const ListItem = React.memo<{ item: ListItem; onPress: (item: ListItem) => void }>(
  ({ item, onPress }) => (
    <View style={styles.itemContainer}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.subtitle}>{item.subtitle}</Text>
    </View>
  ),
  (prevProps, nextProps) => prevProps.item.id === nextProps.item.id
);

export const OptimizedList: React.FC<OptimizedListProps> = ({
  data,
  onItemPress,
  onEndReached,
  isLoading,
}) => {
  const renderItem = useCallback(
    ({ item }: { item: ListItem }) => <ListItem item={item} onPress={onItemPress} />,
    [onItemPress]
  );

  const getItemType = useCallback((item: ListItem) => {
    // Return different types for different item layouts
    return 'default';
  }, []);

  const ListFooter = useCallback(
    () => (isLoading ? <ActivityIndicator size="small" /> : null),
    [isLoading]
  );

  return (
    <FlashList
      data={data}
      renderItem={renderItem}
      estimatedItemSize={80}
      getItemType={getItemType}
      keyExtractor={(item) => item.id}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      ListFooterComponent={ListFooter}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
  },
});

npm install @shopify/flash-list

// src/components/OptimizedImage.tsx - Progressive image loading
import React, { useState } from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';
import { Image } from 'expo-image';

interface OptimizedImageProps {
  source: { uri: string };
  placeholder?: string;
  style?: any;
}

export const OptimizedImage: React.FC<OptimizedImageProps> = ({
  source,
  placeholder,
  style,
}) => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <View style={[styles.container, style]}>
      <Image
        source={source}
        placeholder={placeholder}
        contentFit="cover"
        transition={200}
        onLoadStart={() => setIsLoading(true)}
        onLoadEnd={() => setIsLoading(false)}
        style={styles.image}
        cachePolicy="memory-disk" // Cache in memory and on disk
      />
      {isLoading && (
        <View style={styles.loadingOverlay}>
          <ActivityIndicator size="small" color="#fff" />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  loadingOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

// src/components/ErrorBoundary.tsx - Catch React errors
import React, { Component, ErrorInfo, ReactNode } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Log to error reporting service (Sentry, Bugsnag, etc.)
    console.error('Error boundary caught:', error, errorInfo);
  }

  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Something went wrong</Text>
          <Text style={styles.message}>{this.state.error?.message}</Text>
          <Button title="Try Again" onPress={this.handleReset} />
        </View>
      );
    }

    return this.props.children;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  message: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
    textAlign: 'center',
  },
});

// src/services/analytics.service.ts - Performance monitoring
import * as Device from 'expo-device';
import * as Application from 'expo-application';

interface PerformanceMetric {
  name: string;
  value: number;
  timestamp: number;
  deviceInfo: DeviceInfo;
}

interface DeviceInfo {
  platform: string;
  model: string;
  osVersion: string;
  appVersion: string;
}

class AnalyticsService {
  private metrics: PerformanceMetric[] = [];
  private readonly MAX_METRICS = 100;

  /**
   * Measure execution time of a function
   */
  async measurePerformance<T>(
    name: string,
    fn: () => Promise<T>
  ): Promise<T> {
    const startTime = performance.now();

    try {
      const result = await fn();
      const duration = performance.now() - startTime;

      this.recordMetric(name, duration);

      return result;
    } catch (error) {
      const duration = performance.now() - startTime;
      this.recordMetric(`${name}_error`, duration);
      throw error;
    }
  }

  /**
   * Record a performance metric
   */
  private recordMetric(name: string, value: number): void {
    const metric: PerformanceMetric = {
      name,
      value,
      timestamp: Date.now(),
      deviceInfo: this.getDeviceInfo(),
    };

    this.metrics.push(metric);

    // Keep only recent metrics
    if (this.metrics.length > this.MAX_METRICS) {
      this.metrics.shift();
    }

    // Log slow operations
    if (value > 1000) {
      console.warn(`Slow operation detected: ${name} took ${value.toFixed(2)}ms`);
    }
  }

  /**
   * Get device information
   */
  private getDeviceInfo(): DeviceInfo {
    return {
      platform: Device.osName || 'unknown',
      model: Device.modelName || 'unknown',
      osVersion: Device.osVersion || 'unknown',
      appVersion: Application.nativeApplicationVersion || 'unknown',
    };
  }

  /**
   * Get performance report
   */
  getPerformanceReport(): {
    metrics: PerformanceMetric[];
    summary: { name: string; avg: number; max: number; count: number }[];
  } {
    const summary = this.metrics.reduce((acc, metric) => {
      if (!acc[metric.name]) {
        acc[metric.name] = { sum: 0, max: 0, count: 0 };
      }
      acc[metric.name].sum += metric.value;
      acc[metric.name].max = Math.max(acc[metric.name].max, metric.value);
      acc[metric.name].count += 1;
      return acc;
    }, {} as Record<string, { sum: number; max: number; count: number }>);

    const summaryArray = Object.entries(summary).map(([name, stats]) => ({
      name,
      avg: stats.sum / stats.count,
      max: stats.max,
      count: stats.count,
    }));

    return {
      metrics: this.metrics,
      summary: summaryArray,
    };
  }
}

export const analyticsService = new AnalyticsService();

// ❌ BAD - Storing tokens in AsyncStorage (not encrypted)
import AsyncStorage from '@react-native-async-storage/async-storage';
await AsyncStorage.setItem('token', accessToken); // INSECURE

// ✅ GOOD - Using secure storage
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('token', accessToken); // ENCRYPTED

// ❌ BAD - Hardcoded API keys
const API_KEY = 'sk-1234567890abcdef';

// ✅ GOOD - Environment variables
import { API_KEY } from '@env';

// ❌ BAD - No HTTPS enforcement
fetch('http://api.example.com/data');

// ✅ GOOD - HTTPS with certificate validation
const response = await fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
});

# Install EAS CLI (Expo Application Services)
npm install -g eas-cli

# Login to Expo account
eas login

# Configure project
eas build:configure

# Build for iOS (requires Apple Developer account)
eas build --platform ios --profile production

# Build for Android
eas build --platform android --profile production

# Submit to App Store
eas submit --platform ios

# Submit to Google Play
eas submit --platform android

// src/services/updates.service.ts - OTA update handling
import * as Updates from 'expo-updates';

export class UpdateService {
  /**
   * Check for and download updates
   */
  static async checkForUpdates(): Promise<boolean> {
    if (__DEV__) {
      console.log('Updates disabled in development');
      return false;
    }

    try {
      const update = await Updates.checkForUpdateAsync();

      if (update.isAvailable) {
        await Updates.fetchUpdateAsync();
        // Alert user and reload
        await Updates.reloadAsync();
        return true;
      }

      return false;
    } catch (error) {
      console.error('Update check failed:', error);
      return false;
    }
  }

  /**
   * Get current update info
   */
  static getCurrentUpdateInfo(): {
    updateId: string | undefined;
    channel: string | undefined;
    createdAt: Date | undefined;
  } {
    return {
      updateId: Updates.updateId,
      channel: Updates.channel,
      createdAt: Updates.createdAt,
    };
  }
}