RAG System - Mobile App 📱

React Native mobile application for the RAG (Retrieval-Augmented Generation) Financial Analysis System.

🚀 Quick Start

Prerequisites

• Node.js 18+
• Expo CLI (npm install -g @expo/cli)
• Android Studio (for Android development)
• Xcode (for iOS development, Mac only)

Installation

1. Install dependencies

   npm install

2. Setup environment for your target platform

   # For Android Emulator
   npm run dev:android
   
   # For iOS Simulator (Mac only)
   npm run dev:ios
   
   # For Physical Device
   npm run env:device
   # Then edit .env file with your computer's IP address
   npm run start

🌐 Network Configuration

Important: When running with local backend, you need different API URLs for different platforms:

• Android Emulator: http://10.0.2.2:5013
• iOS Simulator: http://localhost:5013
• Physical Device: http://YOUR_COMPUTER_IP:5013

Auto-Detection (Recommended)

# Automatically detect your IP and backend port
npm run detect-network

# Then run your preferred platform
npm run dev:android    # Android Emulator
npm run dev:ios        # iOS Simulator  
npm run dev:device     # Physical Device

Quick Setup Commands

# Android Emulator (recommended for development)
npm run dev:android

# iOS Simulator
npm run dev:ios

# Physical Device
npm run env:device
# Edit .env file with your IP, then:
npm run start

See NETWORK_SETUP_GUIDE.md for detailed troubleshooting.

📱 Features

• Authentication: Login/Register with role-based access (Admin/Analyst)
• AI Assistant: Chat interface for financial analysis
• File Upload: PDF report upload and processing
• Real-time Chat: WebSocket-based messaging
• Offline Support: Basic offline functionality
• Dark/Light Theme: Automatic theme switching

🏗️ Architecture

app/                    # Expo Router screens (file-based routing)
├── loginPage.tsx       # Authentication screen
├── homePage.tsx        # Main dashboard
├── aiAssitant.tsx      # AI chat interface
└── ...

components/             # Reusable UI components
├── common/            # Shared components
├── auth/              # Authentication components
├── ui/                # Base UI components
└── ...

services/              # API services & business logic
├── auth.service.ts    # Authentication service
├── api.config.ts      # API configuration
└── ...

types/                 # TypeScript definitions
context/               # React Context providers
hooks/                 # Custom React hooks

🔧 Development

Environment Management

# Switch between environments
npm run env:android    # Android Emulator
npm run env:ios        # iOS Simulator  
npm run env:device     # Physical Device
npm run env:local      # Local development

Available Scripts

npm start              # Start Expo dev server
npm run detect-network  # Auto-detect IP and port
npm run android        # Run on Android
npm run ios            # Run on iOS
npm run web            # Run on web
npm run lint           # Run ESLint
npm run test           # Run tests
npm run test:watch     # Run tests in watch mode

🔐 Authentication

The app supports role-based authentication:

• Admin: Full system access
• Analyst: Limited access to analysis features

Test Accounts

Admin: admin@rag.com / Admin@123!!
Analyst: analyst@rag.com / Analyst@123!!
Mock: demo@mock.com / 123456

🛠️ Tech Stack

• Framework: Expo React Native
• Language: TypeScript
• Navigation: Expo Router (file-based)
• Styling: NativeWind (Tailwind CSS)
• State Management: React Context + Hooks
• HTTP Client: Axios
• Storage: AsyncStorage
• Icons: Expo Vector Icons
• Testing: Jest + React Native Testing Library

📦 Key Dependencies

{
  "expo": "~54.0.33",
  "react-native": "0.81.5",
  "expo-router": "~6.0.23",
  "nativewind": "^4.2.1",
  "@react-navigation/native": "^7.1.28",
  "axios": "^1.13.6",
  "@react-native-async-storage/async-storage": "2.2.0"
}

🚨 Troubleshooting

Common Issues

1. "Network Error" when connecting to backend

   • Check if backend is running on port 5000
   • Use correct IP for your platform (see Network Configuration)
   • Check firewall settings

2. "Metro bundler failed to start"

   npx expo start --clear

3. "Unable to resolve module"

   rm -rf node_modules
   npm install

4. Android build issues

   cd android
   ./gradlew clean
   cd ..
   npx expo run:android

Debug Mode

Enable debug logging:

# Set in .env file
EXPO_PUBLIC_DEBUG_MODE=true
EXPO_PUBLIC_LOG_LEVEL=debug

🚀 Quick Start

1. Configure Backend URL

Edit .env file and update the backend URL:

EXPO_PUBLIC_API_URL=https://your-deployed-backend-url.com

2. Start Development

# Install dependencies
npm install

# Start development server
npm start

# Run on specific platform
npm run android    # Android
npm run ios        # iOS
npm run web        # Web

🔧 Configuration

The app uses a single .env file for configuration. Update the following variables:

• EXPO_PUBLIC_API_URL: Your backend API URL
• EXPO_PUBLIC_ENVIRONMENT: production/development
• EXPO_PUBLIC_DEBUG_MODE: true/false for debugging

📚 Documentation

• Network Setup Guide - Detailed network configuration
• Expo Documentation
• React Native Documentation

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

This project is part of the RAG Financial Analysis System.

---

Need Help? Check the troubleshooting guide or contact the development team.