Configuration

Configuration complète de l'application mobile YaniPay : app.json, EAS Build, variables d'environnement et plugins Expo.

app.json Configuration

Le fichier app.jsoncontient la configuration principale de l'application Expo. Voici les options importantes :

app.jsonjson

{
  "expo": {
    "name": "YaniPay",
    "slug": "yanipay",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "scheme": "yanipay",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#0f172a"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yanipay.app",
      "buildNumber": "1",
      "infoPlist": {
        "NSFaceIDUsageDescription": "YaniPay uses Face ID for secure authentication",
        "NSCameraUsageDescription": "YaniPay needs camera access for QR code scanning and KYC verification"
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#0f172a"
      },
      "package": "com.yanipay.app",
      "versionCode": 1,
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.USE_BIOMETRIC",
        "android.permission.USE_FINGERPRINT"
      ]
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-router",
      "expo-secure-store",
      "expo-local-authentication",
      [
        "expo-camera",
        {
          "cameraPermission": "Allow YaniPay to access your camera for QR scanning"
        }
      ],
      [
        "@stripe/stripe-react-native",
        {
          "merchantIdentifier": "merchant.com.yanipay",
          "enableGooglePay": true
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

EAS Build Configuration

Configuration EAS pour les builds de développement, preview et production :

eas.jsonjson

{
  "cli": {
    "version": ">= 7.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "env": {
        "EXPO_PUBLIC_API_URL": "http://localhost:3000/api"
      }
    },
    "preview": {
      "distribution": "internal",
      "ios": {
        "simulator": false
      },
      "env": {
        "EXPO_PUBLIC_API_URL": "https://staging.yanipay.com/api"
      }
    },
    "production": {
      "autoIncrement": true,
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.yanipay.com"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "appleId": "developer@yanipay.com",
        "ascAppId": "1234567890"
      },
      "android": {
        "serviceAccountKeyPath": "./google-services.json",
        "track": "internal"
      }
    }
  }
}

Build Commands

EAS Build Commandsbash

# Development build (with dev client)
eas build --profile development --platform ios
eas build --profile development --platform android

# Preview build (for testing)
eas build --profile preview --platform all

# Production build
eas build --profile production --platform all

# Submit to stores
eas submit --platform ios
eas submit --platform android

Environment Variables

Les variables d'environnement sont préfixées par EXPO_PUBLIC_ pour être accessibles dans le code client.

Variable	Description	Required
EXPO_PUBLIC_API_URL	URL de l'API backend	Yes
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY	Clé publique Stripe pour les paiements	Optional
EXPO_PUBLIC_ONFIDO_SDK_TOKEN	Token SDK Onfido pour KYC	Optional
EXPO_PUBLIC_SENTRY_DSN	DSN Sentry pour le monitoring	Optional

Accessing Environment Variablestypescript

// Dans le code React Native
const API_URL = process.env.EXPO_PUBLIC_API_URL;
const STRIPE_KEY = process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY;

// Configuration centralisée
// src/config/constants.ts
export const CONFIG = {
  API_URL: process.env.EXPO_PUBLIC_API_URL || 'http://localhost:3000/api',
  STRIPE_KEY: process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
  IS_PRODUCTION: process.env.NODE_ENV === 'production',
};

Expo Plugins

L'application utilise plusieurs plugins Expo pour les fonctionnalités natives :

expo-router

Navigation file-based

expo-secure-store

Stockage sécurisé chiffré

expo-local-authentication

Face ID / Touch ID

expo-camera

Scanner QR et KYC

@stripe/stripe-react-native

Paiements Stripe

expo-notifications

Push notifications

Permissions

Permissions requises pour les fonctionnalités de l'application :

iOS (Info.plist)

ios/YaniPay/Info.plistxml

<key>NSFaceIDUsageDescription</key>
<string>YaniPay uses Face ID for secure authentication</string>

<key>NSCameraUsageDescription</key>
<string>YaniPay needs camera access for QR code scanning and KYC verification</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>YaniPay needs photo library access to upload documents for KYC</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>YaniPay uses your location to find nearby merchants</string>

Android (AndroidManifest.xml)

android/app/src/main/AndroidManifest.xmlxml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.USE_BIOMETRIC" />
<uses-permission android:name="android.permission.USE_FINGERPRINT" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

Next Steps

Screens

Structure des 40+ écrans

Security

Biometric et stockage sécurisé

Mobile Documentation