diff --git a/TROUBLESHOOTING.md b/TROUBLESHOOTING.md new file mode 100644 index 0000000..250b541 --- /dev/null +++ b/TROUBLESHOOTING.md @@ -0,0 +1,124 @@ +# 🔧 Guide de dépannage - WalletTracker + +## Problème : L'app charge jusqu'au timeout après scan du QR code + +### ✅ Solutions appliquées + +1. **Mise à jour des dépendances incompatibles** + ```bash + npx expo install --fix + ``` + +2. **Configuration Metro améliorée** + - Ajout de `metro.config.js` avec timeout augmenté + - Optimisation du bundler + +3. **Graphiques temporairement désactivés** + - `react-native-chart-kit` peut causer des problèmes de chargement + - Remplacé par un placeholder dans `AnalysisScreen` + - Sera réactivé après configuration complète + +### 🚀 Relancer l'application + +```bash +# Nettoyer le cache +npm start -- --clear + +# Ou redémarrer complètement +rm -rf node_modules +npm install +npm start -- --clear +``` + +### 📱 Vérifications réseau + +1. **Même réseau Wi-Fi** + - Votre ordinateur et téléphone doivent être sur le même réseau + - Désactivez les VPN si actifs + +2. **Pare-feu** + - Autorisez Expo dans votre pare-feu + - Port 8081 doit être ouvert + +3. **Mode tunnel (si problème réseau)** + ```bash + npm start -- --tunnel + ``` + ⚠️ Plus lent mais fonctionne même avec des réseaux différents + +### 🔍 Diagnostic + +Si le problème persiste, vérifiez : + +```bash +# 1. Vérifier la connexion +ping 192.168.1.132 + +# 2. Vérifier que Metro tourne +# Vous devriez voir "Metro waiting on exp://..." + +# 3. Tester sur le web d'abord +npm run web +``` + +### 📊 Réactiver les graphiques (plus tard) + +Une fois l'app fonctionnelle, pour réactiver les graphiques : + +1. Installer les dépendances natives : + ```bash + npx expo install react-native-svg + ``` + +2. Dans `src/screens/AnalysisScreen.tsx` : + - Décommenter `import { PieChart } from 'react-native-chart-kit'` + - Remplacer le placeholder par `` + +3. Rebuild l'app + +### 🆘 Autres problèmes courants + +#### Erreur "Unable to resolve module" +```bash +npm start -- --clear +``` + +#### Erreur "Network request failed" +- Vérifiez votre connexion Internet +- Essayez le mode tunnel : `npm start -- --tunnel` + +#### L'app crash au démarrage +- Vérifiez que Firebase est configuré dans `src/config/firebase.ts` +- Regardez les logs dans le terminal + +#### "Expo Go" ne trouve pas l'app +- Assurez-vous que les deux appareils sont sur le même réseau +- Redémarrez Expo Go +- Rescannez le QR code + +### 💡 Conseils + +1. **Première fois** : Utilisez `npm start -- --clear` pour un démarrage propre +2. **Développement** : Le rechargement à chaud peut parfois causer des bugs, rechargez manuellement (secouer le téléphone > Reload) +3. **Production** : Les graphiques fonctionneront mieux dans un build natif + +### 📞 Besoin d'aide ? + +Si le problème persiste : + +1. Vérifiez les logs dans le terminal +2. Regardez les erreurs dans Expo Go (secouer > Show Dev Menu > Debug) +3. Consultez la documentation Expo : https://docs.expo.dev/ + +## ✅ Checklist de vérification + +- [ ] Dépendances mises à jour (`npx expo install --fix`) +- [ ] Cache nettoyé (`npm start -- --clear`) +- [ ] Même réseau Wi-Fi +- [ ] Pare-feu autorise Expo +- [ ] Firebase configuré (si vous testez l'auth) +- [ ] QR code scanné avec Expo Go (pas l'appareil photo) + +--- + +**L'app devrait maintenant se charger correctement ! 🎉** diff --git a/metro.config.js b/metro.config.js new file mode 100644 index 0000000..1be6543 --- /dev/null +++ b/metro.config.js @@ -0,0 +1,17 @@ +const { getDefaultConfig } = require('expo/metro-config'); + +const config = getDefaultConfig(__dirname); + +// Augmenter le timeout pour les connexions lentes +config.server = { + ...config.server, + enhanceMiddleware: (middleware) => { + return (req, res, next) => { + // Augmenter le timeout à 5 minutes + res.setTimeout(300000); + return middleware(req, res, next); + }; + }, +}; + +module.exports = config; diff --git a/package-lock.json b/package-lock.json index bb5722d..84f8fd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "wallettracker", "version": "1.0.0", "dependencies": { - "@react-native-async-storage/async-storage": "^1.24.0", + "@react-native-async-storage/async-storage": "2.2.0", "@react-navigation/bottom-tabs": "^7.5.0", "@react-navigation/native": "^7.1.18", "@react-navigation/stack": "^7.5.0", @@ -19,11 +19,11 @@ "react": "19.1.0", "react-native": "0.81.5", "react-native-chart-kit": "^6.12.0", - "react-native-gesture-handler": "^2.29.0", + "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "^4.1.3", "react-native-safe-area-context": "^5.6.1", - "react-native-screens": "^4.18.0", - "react-native-svg": "^15.14.0" + "react-native-screens": "~4.16.0", + "react-native-svg": "15.12.1" }, "devDependencies": { "@types/react": "~19.1.0", @@ -2571,7 +2571,26 @@ "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==", "license": "Apache-2.0" }, - "node_modules/@firebase/auth": { + "node_modules/@firebase/auth-compat": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.6.0.tgz", + "integrity": "sha512-J0lGSxXlG/lYVi45wbpPhcWiWUMXevY4fvLZsN1GHh+po7TZVng+figdHBVhFheaiipU8HZyc7ljw1jNojM2nw==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/auth": "1.11.0", + "@firebase/auth-types": "0.13.0", + "@firebase/component": "0.7.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app-compat": "0.x" + } + }, + "node_modules/@firebase/auth-compat/node_modules/@firebase/auth": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.11.0.tgz", "integrity": "sha512-5j7+ua93X+IRcJ1oMDTClTo85l7Xe40WSkoJ+shzPrX7OISlVWLdE1mKC57PSD+/LfAbdhJmvKixINBw2ESK6w==", @@ -2595,25 +2614,6 @@ } } }, - "node_modules/@firebase/auth-compat": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.6.0.tgz", - "integrity": "sha512-J0lGSxXlG/lYVi45wbpPhcWiWUMXevY4fvLZsN1GHh+po7TZVng+figdHBVhFheaiipU8HZyc7ljw1jNojM2nw==", - "license": "Apache-2.0", - "dependencies": { - "@firebase/auth": "1.11.0", - "@firebase/auth-types": "0.13.0", - "@firebase/component": "0.7.0", - "@firebase/util": "1.13.0", - "tslib": "^2.1.0" - }, - "engines": { - "node": ">=20.0.0" - }, - "peerDependencies": { - "@firebase/app-compat": "0.x" - } - }, "node_modules/@firebase/auth-interop-types": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz", @@ -3505,15 +3505,15 @@ "license": "BSD-3-Clause" }, "node_modules/@react-native-async-storage/async-storage": { - "version": "1.24.0", - "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.24.0.tgz", - "integrity": "sha512-W4/vbwUOYOjco0x3toB8QCr7EjIP6nE9G7o8PMguvvjYT5Awg09lyV4enACRx4s++PPulBiBSjL0KTFx2u0Z/g==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz", + "integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==", "license": "MIT", "dependencies": { "merge-options": "^3.0.4" }, "peerDependencies": { - "react-native": "^0.0.0-0 || >=0.60 <1.0" + "react-native": "^0.0.0-0 || >=0.65 <1.0" } }, "node_modules/@react-native/assets-registry": { @@ -6287,6 +6287,30 @@ "@firebase/util": "1.13.0" } }, + "node_modules/firebase/node_modules/@firebase/auth": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.11.0.tgz", + "integrity": "sha512-5j7+ua93X+IRcJ1oMDTClTo85l7Xe40WSkoJ+shzPrX7OISlVWLdE1mKC57PSD+/LfAbdhJmvKixINBw2ESK6w==", + "license": "Apache-2.0", + "dependencies": { + "@firebase/component": "0.7.0", + "@firebase/logger": "0.5.0", + "@firebase/util": "1.13.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "@firebase/app": "0.x", + "@react-native-async-storage/async-storage": "^1.18.1" + }, + "peerDependenciesMeta": { + "@react-native-async-storage/async-storage": { + "optional": true + } + } + }, "node_modules/flow-enums-runtime": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/flow-enums-runtime/-/flow-enums-runtime-0.0.6.tgz", @@ -8860,9 +8884,9 @@ } }, "node_modules/react-native-gesture-handler": { - "version": "2.29.0", - "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.29.0.tgz", - "integrity": "sha512-nxikN5b2ebSTPqqhIlTHQJqIHTu0Y5GAhST3w3/G1pm9BlqHVFcLFPZfIaT4A3TVKjQDcKElij1hhHKpAVUcOQ==", + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz", + "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==", "license": "MIT", "dependencies": { "@egjs/hammerjs": "^2.0.17", @@ -8923,12 +8947,13 @@ } }, "node_modules/react-native-screens": { - "version": "4.18.0", - "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.18.0.tgz", - "integrity": "sha512-mRTLWL7Uc1p/RFNveEIIrhP22oxHduC2ZnLr/2iHwBeYpGXR0rJZ7Bgc0ktxQSHRjWTPT70qc/7yd4r9960PBQ==", + "version": "4.16.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz", + "integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==", "license": "MIT", "dependencies": { "react-freeze": "^1.0.0", + "react-native-is-edge-to-edge": "^1.2.1", "warn-once": "^0.1.0" }, "peerDependencies": { @@ -8937,9 +8962,9 @@ } }, "node_modules/react-native-svg": { - "version": "15.14.0", - "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.14.0.tgz", - "integrity": "sha512-B3gYc7WztcOT4N54AtUutbe0Nuqqh/nkresY0fAXzUHYLsWuIu/yGiCCD3DKfAs6GLv5LFtWTu7N333Q+e3bkg==", + "version": "15.12.1", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.1.tgz", + "integrity": "sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==", "license": "MIT", "dependencies": { "css-select": "^5.1.0", diff --git a/package.json b/package.json index df814bc..71a7576 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "web": "expo start --web" }, "dependencies": { - "@react-native-async-storage/async-storage": "^1.24.0", + "@react-native-async-storage/async-storage": "2.2.0", "@react-navigation/bottom-tabs": "^7.5.0", "@react-navigation/native": "^7.1.18", "@react-navigation/stack": "^7.5.0", @@ -20,11 +20,11 @@ "react": "19.1.0", "react-native": "0.81.5", "react-native-chart-kit": "^6.12.0", - "react-native-gesture-handler": "^2.29.0", + "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "^4.1.3", "react-native-safe-area-context": "^5.6.1", - "react-native-screens": "^4.18.0", - "react-native-svg": "^15.14.0" + "react-native-screens": "~4.16.0", + "react-native-svg": "15.12.1" }, "devDependencies": { "@types/react": "~19.1.0", diff --git a/src/screens/AnalysisScreen.tsx b/src/screens/AnalysisScreen.tsx index 4e70127..60fb284 100644 --- a/src/screens/AnalysisScreen.tsx +++ b/src/screens/AnalysisScreen.tsx @@ -7,7 +7,8 @@ import { Dimensions, TouchableOpacity } from 'react-native'; -import { PieChart, BarChart } from 'react-native-chart-kit'; +// Temporairement désactivé pour éviter les problèmes de chargement +// import { PieChart, BarChart } from 'react-native-chart-kit'; import { useAuth } from '../hooks/useAuth'; import { transactionService } from '../services/transactionService'; import { categoryService } from '../services/categoryService'; @@ -216,16 +217,13 @@ export const AnalysisScreen = () => { <> Répartition par catégorie - + {/* Graphique temporairement désactivé - sera réactivé après configuration */} + + 📊 + + Graphique disponible prochainement + + @@ -476,5 +474,22 @@ const styles = StyleSheet.create({ fontSize: 14, color: '#999', textAlign: 'center' + }, + placeholderChart: { + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 60, + backgroundColor: '#F8F9FA', + borderRadius: 12, + marginVertical: 16 + }, + placeholderText: { + fontSize: 48, + marginBottom: 12 + }, + placeholderSubtext: { + fontSize: 14, + color: '#666', + textAlign: 'center' } });