Skip to main content

📱 Mobile App Development Setup

This comprehensive guide will help you set up and run the Com DEALL mobile app using React Native with Expo Developer Build.

✅ Prerequisites​

System Requirements​

  • Node.js: v18.0.0 or higher
  • npm: v8.0.0 or higher
  • Yarn: v1.22.0 or higher
  • Git: Latest version

Platform-Specific Requirements​

iOS Development​

  • macOS: macOS 10.15 (Catalina) or higher
  • Xcode: v14.0 or higher
  • iOS Simulator: Latest version
  • CocoaPods: v1.11.0 or higher

Android Development​

  • Android Studio: Latest version
  • Android SDK: API level 24 or higher
  • Java: JDK 11 or higher
  • Android Emulator: Latest version

Development Tools​

  • Expo CLI: Latest version
  • EAS CLI: Latest version
  • React Native CLI: Latest version
  • Metro Bundler: Included with Expo

🚀 Environment Setup​

1. Install Expo CLI​

npm install -g @expo/cli
npm install -g eas-cli

2. Install Dependencies​

# Navigate to mobile app directory
cd apps/comdeall-mobile

# Install dependencies
yarn install

# Install platform-specific dependencies
yarn android:install
yarn ios:install

3. Environment Configuration​

Create a .env file in the mobile app root directory:

# API Configuration
GRAPHQL_SERVER_URI=https://api.communicaids.com/v1/graphql
GRAPHQL_SERVER_SUBSCRIPTION_URI=wss://api.communicaids.com/v1/graphql
GRAPHQL_ADMIN_SECRET_KEY=your-secret-key

# Firebase Configuration
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_API_KEY=your-api-key
FIREBASE_MESSAGING_SENDER_ID=your-sender-id

# Deep Linking
DEEP_LINK_SCHEME=com.comdeall.communicaids
UNIVERSAL_LINK_DOMAIN=mobileapp.communicaids.com

# App Configuration
APP_VERSION=1.3.0
BUILD_NUMBER=65

🔧 Development Commands​

Start Development Server​

# Start with dev client
npx expo start --dev-client --clear

# Start with specific platform
npx expo start --android
npx expo start --ios
npx expo start --web

Build Commands​

# Build for development
yarn android:install
yarn ios:install

# Build for production
yarn android-build
yarn ios-build

# Build for web
yarn web-build

Code Generation​

# Generate GraphQL types
yarn gen

# Generate before starting
yarn start

📱 Platform Setup​

iOS Setup​

  1. Install Xcode from the Mac App Store
  2. Install iOS Simulator through Xcode
  3. Install CocoaPods: 
    sudo gem install cocoapods
  4. Install iOS dependencies: 
    cd ios && pod install && cd ..

Android Setup​

  1. Install Android Studio
  2. Install Android SDK (API level 24+)
  3. Set up Android Emulator
  4. Configure environment variables: 
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools

🔐 Authentication Setup​

Firebase Configuration​

  1. Download configuration files:
    • GoogleService-Info.plist (iOS)
    • google-services.json (Android)
  2. Place files in project root
  3. Configure Firebase project in Firebase Console

Apple Sign-In Setup​

  1. Enable Apple Sign-In in Apple Developer Console
  2. Configure Sign-In capability in Xcode
  3. Add Apple Sign-In to app configuration

Google Sign-In Setup​

  1. Enable Google Sign-In in Google Cloud Console
  2. Configure OAuth client for mobile app
  3. Add Google Sign-In to app configuration

🧪 Testing Setup​

Unit Testing​

# Run unit tests
yarn test

# Run tests with coverage
yarn test --coverage

E2E Testing​

# Install Detox
yarn add -D detox

# Build for testing
detox build --configuration ios.sim.debug
detox test --configuration ios.sim.debug

Linting​

# Run ESLint
yarn lint

# Fix linting issues
yarn lint --fix

📊 Debugging Setup​

React Native Debugger​

  1. Install React Native Debugger
  2. Configure Metro bundler
  3. Enable debugging in app

Flipper Integration​

  1. Install Flipper
  2. Configure Flipper for React Native
  3. Enable Flipper in development

Network Debugging​

  1. Enable network inspection
  2. Configure proxy for API calls
  3. Monitor network requests

🚀 Deployment Setup​

EAS Build Configuration​

# Configure EAS
eas build:configure

# Build for preview
eas build --platform android --profile preview
eas build --platform ios --profile preview

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

App Store Setup​

  1. Configure App Store Connect
  2. Set up app metadata
  3. Configure app icons and screenshots
  4. Submit for review

Play Store Setup​

  1. Configure Google Play Console
  2. Set up app listing
  3. Configure app signing
  4. Submit for review

🔧 Troubleshooting​

Common Issues​

Metro Bundler Issues​

# Clear Metro cache
npx expo start --clear

# Reset Metro cache
npx expo start --reset-cache

iOS Build Issues​

# Clean iOS build
cd ios && xcodebuild clean && cd ..

# Reinstall pods
cd ios && pod deintegrate && pod install && cd ..

Android Build Issues​

# Clean Android build
cd android && ./gradlew clean && cd ..

# Clear Gradle cache
rm -rf ~/.gradle/caches

Dependency Issues​

# Clear node modules
rm -rf node_modules
yarn install

# Clear yarn cache
yarn cache clean

Performance Issues​

  • Enable Hermes for better performance
  • Optimize bundle size with code splitting
  • Use Fast Image for image optimization
  • Implement lazy loading for screens

📱 Device Testing​

Physical Device Testing​

  1. Enable Developer Mode on device
  2. Install development build
  3. Configure device for debugging
  4. Test on real device

Simulator Testing​

  1. Launch iOS Simulator
  2. Launch Android Emulator
  3. Test app functionality
  4. Debug performance issues

🔐 Security Setup​

Code Signing​

  1. Configure iOS code signing
  2. Set up Android app signing
  3. Manage certificates
  4. Configure provisioning profiles

Environment Security​

  1. Secure environment variables
  2. Use secure storage for sensitive data
  3. Implement certificate pinning
  4. Configure app transport security

📊 Analytics Setup​

Firebase Analytics​

  1. Enable Firebase Analytics
  2. Configure analytics events
  3. Set up conversion tracking
  4. Monitor app performance

Crash Reporting​

  1. Enable Firebase Crashlytics
  2. Configure crash reporting
  3. Set up error tracking
  4. Monitor app stability

🎯 Next Steps​