Mobile Documentation

Installation & Setup

Guide complet pour installer et configurer l'environnement de développement mobile YaniPay avec Expo SDK 54.

Prerequisites

Avant de commencer, assurez-vous d'avoir installé :

Node.js 20+ LTS

Version LTS recommandée. Vérifiez avec node --version

pnpm 9+

Gestionnaire de packages. npm install -g pnpm

Expo CLI

Utilisez npx expo — aucune installation globale requise

EAS CLI

Builds cloud. npm install -g eas-cli

Watchman (macOS)

brew install watchman

Git 2.40+

Vérifiez avec git --version

Installation

1. Cloner et installer les dépendances

Terminalbash

# Depuis la racine du projet
cd mobile

# Installer les dépendances
pnpm install

# Vérifier l'installation
pnpm expo doctor

2. Configuration de l'environnement

Créez un fichier .env.local dans le dossier mobile :

mobile/.env.localbash

# API Configuration
EXPO_PUBLIC_API_URL=http://localhost:3000/api

# Stripe (optional for payments)
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx

# Onfido KYC (optional)
EXPO_PUBLIC_ONFIDO_SDK_TOKEN=xxx

Environment Setup

Le fichier .envexpose les variables d'environnement publiques à l'application Expo. Toutes les variables préfixées par EXPO_PUBLIC_ sont accessibles côté client.

mobile/.envbash

# Backend API (versioned v1)
EXPO_PUBLIC_API_URL=http://localhost:3000/api/v1

# Stripe — publishable key only (never the secret)
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx

# Onfido SDK — mobile token (different from API key)
EXPO_PUBLIC_ONFIDO_SDK_TOKEN=xxx

# Deep linking scheme
EXPO_PUBLIC_DEEP_LINK_PREFIX=yanipay://

Variables publiques uniquement

Ne jamais stocker de clés secrètes dans des variables EXPO_PUBLIC_*. Ces valeurs sont intégrées dans le bundle JavaScript et lisibles par n'importe quel utilisateur. Les secrets (Stripe secret key, Onfido API key) restent exclusivement côté serveur.

Deep linking

Le préfixe yanipay:// est utilisé pour les liens universels (OAuth callbacks, notifications push, QR codes). Configurez-le également dans app.json sous la clé scheme.

Apple Silicon (M1/M2/M3) Setup

Les Macs Apple Silicon nécessitent quelques ajustements pour CocoaPods, Ruby et l'émulateur Android.

CocoaPods sur ARM — Rosetta

Certains pods ne compilent pas nativement en ARM64. Utilisez Rosetta pour l'installation :

iOS — Apple Silicon fixbash

# Forcer l'exécution en x86_64 via Rosetta
arch -x86_64 pod install

# Si pod n'est pas trouvé en x86_64
arch -x86_64 gem install cocoapods
arch -x86_64 pod install

Gestion de Ruby avec rbenv

CocoaPods nécessite une version précise de Ruby. rbenv permet de l'isoler proprement :

Terminal — Ruby setupbash

# Installer rbenv
brew install rbenv ruby-build

# Ajouter à votre shell (~/.zshrc)
eval "$(rbenv init - zsh)"

# Installer Ruby 3.2.x (version stable pour CocoaPods)
rbenv install 3.2.3
rbenv global 3.2.3

# Vérifier
ruby --version   # ruby 3.2.3

# Installer CocoaPods
gem install cocoapods

Android — images système ARM64

Android Studio — ARM64bash

# Dans Android Studio > SDK Manager > SDK Platforms
# Cocher : ARM 64 v8a System Image (et non x86_64)

# AVD Manager : créer un émulateur avec
# ABI : arm64-v8a
# System Image : Android 14 (API 34) — ARM 64

Performance émulateur x86_64 sur Apple Silicon

Les images x86_64 tournent via Rosetta et sont significativement plus lentes sur Apple Silicon. Utilisez toujours des images arm64-v8a pour des performances natives.

iOS Setup

Prérequis macOS

Xcode 15+ requis. Installez depuis l'App Store ou xcode-select --install

iOS Setupbash

# Installer les pods CocoaPods
cd ios && pod install && cd ..

# OU utiliser npx (recommandé)
npx pod-install

# Préparer le build iOS
pnpm expo prebuild --platform ios

Android Setup

Android Studio requis

Installez Android Studio avec SDK 34 et configurez un émulateur.

Android Setupbash

# Configurer les variables d'environnement
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Préparer le build Android
pnpm expo prebuild --platform android

# Lister les émulateurs disponibles
emulator -list-avds

Running the App

Expo Go

pnpm start

Scannez le QR code avec Expo Go

iOS Simulator

pnpm ios

Lance sur simulateur iPhone

Android

pnpm android

Lance sur émulateur Android

Scripts disponibles

package.json scriptsbash

pnpm start          # Expo development server
pnpm ios            # Run on iOS simulator
pnpm android        # Run on Android emulator
pnpm test           # Run Jest tests
pnpm lint           # ESLint check
pnpm type-check     # TypeScript validation
pnpm prebuild       # Generate native projects

Demo Mode

L'application inclut un mode démo pour tester sans backend. Cela permet d'explorer toutes les fonctionnalités avec des données fictives.

Mode Démo

Sur l'écran de login, cliquez sur "Mode Démo"pour accéder à l'application avec un compte de test. Aucune connexion API requise.

Le mode démo est géré par authStore.ts. Lorsqu'il est activé, l'utilisateur est automatiquement connecté avec un profil préconfiguré qui simule un compte KYC validé :

stores/authStore.ts — Demo modetypescript

// In authStore.ts, demo mode auto-logs in with:
const DEMO_USER = {
  email: 'demo@yanipay.com',
  kycStatus: 'VALIDATED',
  kycLevel: 'INTERMEDIATE',
  // No backend required
};

Demo User Data (legacy)typescript

// Utilisateur démo créé automatiquement
const demoUser = {
  id: 'demo-user',
  email: 'demo@yanipay.com',
  name: 'Demo User',
  kycLevel: 'BASIC',
};

// Balance démo
const demoBalance = {
  available: 1250.00,
  pending: 50.00,
  currency: 'EUR',
};

KYC Level INTERMEDIATE en demo

Le niveau INTERMEDIATE donne accès aux fonctionnalités de paiement NFC, virement SEPA et portefeuille crypto. Modifiez kycLevel dans DEMO_USERpour tester différents niveaux d'accès sans backend.

Feature Flags

YaniPay Mobile expose un objet FEATURES centralisé dans constants.tspermettant d'activer ou désactiver des fonctionnalités sans modifier le code métier. Utile pour les rollouts progressifs et les builds par environnement.

Feature Flags actifs par défaut

Toutes les fonctionnalités ci-dessous sont activées en développement. Désactivez-les individuellement pour les environnements de test ou les régions sans support matériel (NFC, biométrie).

constants/features.tstypescript

const FEATURES = {
  BIOMETRIC_AUTH: true,
  NFC_PAYMENTS: true,
  APPLE_PAY: true,
  GOOGLE_PAY: true,
  QR_PAYMENTS: true,
  PUSH_NOTIFICATIONS: true,
  ONFIDO_KYC: true,
};

Flag	Description	Requiert
BIOMETRIC_AUTH	Touch ID / Face ID pour login et confirmation de paiement	Appareil physique
NFC_PAYMENTS	Paiements sans contact via NFC	iPhone 7+ / Android NFC
APPLE_PAY	Intégration Apple Pay pour les paiements in-app	iOS + certificat marchand
GOOGLE_PAY	Intégration Google Pay pour les paiements in-app	Android + compte marchand
QR_PAYMENTS	Génération et scan de QR codes de paiement	Caméra
PUSH_NOTIFICATIONS	Notifications pour transactions et alertes	EAS Notifications ou FCM/APNs
ONFIDO_KYC	Vérification identité via SDK Onfido	Token SDK Onfido

Désactiver un flag en development

Passez la valeur à false dans constants/features.ts pour désactiver la fonctionnalité. Les composants utilisant le flag affichent un placeholder ou sont masqués automatiquement.

Next Steps

Configuration

Options avancées et app.json

Screens

Explorer les 40+ écrans

References

Ressources officielles pour approfondir les technologies utilisées par YaniPay Mobile.

Expo Documentation

Guides, API reference, EAS Build et Over-the-Air updates

React Native

Documentation officielle React Native, composants et APIs natives

Expo Router v6

File-based routing, deep links, layouts et navigation stack