Debug: Add loading and error screens to diagnose startup issues
This commit is contained in:
32
App.test.tsx
Normal file
32
App.test.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, Text, StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.text}>✅ WalletTracker fonctionne !</Text>
|
||||||
|
<Text style={styles.subtext}>Si vous voyez ce message, l'app charge correctement.</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#F8F9FA'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#333',
|
||||||
|
marginBottom: 16
|
||||||
|
},
|
||||||
|
subtext: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#666',
|
||||||
|
textAlign: 'center',
|
||||||
|
paddingHorizontal: 32
|
||||||
|
}
|
||||||
|
});
|
||||||
84
App.tsx
84
App.tsx
@@ -1,20 +1,88 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { StatusBar } from 'expo-status-bar';
|
import { StatusBar } from 'expo-status-bar';
|
||||||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||||
import { StyleSheet } from 'react-native';
|
import { StyleSheet, View, Text, ActivityIndicator } from 'react-native';
|
||||||
import { AppNavigator } from './src/navigation/AppNavigator';
|
import { AppNavigator } from './src/navigation/AppNavigator';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
const [error, setError] = useState<string | null>(null);
|
||||||
<GestureHandlerRootView style={styles.container}>
|
const [loading, setLoading] = useState(true);
|
||||||
<AppNavigator />
|
|
||||||
<StatusBar style="auto" />
|
useEffect(() => {
|
||||||
</GestureHandlerRootView>
|
// Simuler un chargement pour détecter les erreurs
|
||||||
);
|
const timer = setTimeout(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<View style={styles.loadingContainer}>
|
||||||
|
<ActivityIndicator size="large" color="#4A90E2" />
|
||||||
|
<Text style={styles.loadingText}>Chargement de WalletTracker...</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<View style={styles.errorContainer}>
|
||||||
|
<Text style={styles.errorTitle}>❌ Erreur</Text>
|
||||||
|
<Text style={styles.errorText}>{error}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
return (
|
||||||
|
<GestureHandlerRootView style={styles.container}>
|
||||||
|
<AppNavigator />
|
||||||
|
<StatusBar style="auto" />
|
||||||
|
</GestureHandlerRootView>
|
||||||
|
);
|
||||||
|
} catch (err: any) {
|
||||||
|
return (
|
||||||
|
<View style={styles.errorContainer}>
|
||||||
|
<Text style={styles.errorTitle}>❌ Erreur de chargement</Text>
|
||||||
|
<Text style={styles.errorText}>{err.message || 'Erreur inconnue'}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1
|
flex: 1
|
||||||
|
},
|
||||||
|
loadingContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#F8F9FA'
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
marginTop: 16,
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#666'
|
||||||
|
},
|
||||||
|
errorContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#FFF',
|
||||||
|
padding: 24
|
||||||
|
},
|
||||||
|
errorTitle: {
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#FF6B6B',
|
||||||
|
marginBottom: 16
|
||||||
|
},
|
||||||
|
errorText: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#666',
|
||||||
|
textAlign: 'center'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
135
QUICK_FIX.md
Normal file
135
QUICK_FIX.md
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
# ⚡ Corrections rapides - WalletTracker
|
||||||
|
|
||||||
|
## 🔴 L'app reste bloquée sur "New update available, downloading..."
|
||||||
|
|
||||||
|
### Solution rapide (30 secondes)
|
||||||
|
|
||||||
|
1. **Sur votre téléphone** :
|
||||||
|
- Fermez complètement Expo Go (swipe up)
|
||||||
|
- Rouvrez Expo Go
|
||||||
|
- Rescannez le QR code
|
||||||
|
|
||||||
|
2. **Si ça ne marche toujours pas** :
|
||||||
|
- Secouez le téléphone
|
||||||
|
- Appuyez sur "Go Home"
|
||||||
|
- Rescannez le QR code
|
||||||
|
|
||||||
|
3. **Dernière option** :
|
||||||
|
- Dans Expo Go : Profil (en bas à droite) → Settings → Clear cache
|
||||||
|
- Rescannez le QR code
|
||||||
|
|
||||||
|
### Solution définitive (appliquée)
|
||||||
|
|
||||||
|
J'ai désactivé les mises à jour automatiques dans `app.json`.
|
||||||
|
|
||||||
|
**Redémarrez le serveur** :
|
||||||
|
```bash
|
||||||
|
# Arrêtez le serveur (Ctrl+C)
|
||||||
|
npm start -- --clear
|
||||||
|
```
|
||||||
|
|
||||||
|
Puis **rescannez le QR code**.
|
||||||
|
|
||||||
|
## 🔴 Écran blanc / App ne charge pas
|
||||||
|
|
||||||
|
### 1. Vérifier le serveur Metro
|
||||||
|
|
||||||
|
Dans le terminal, vous devez voir :
|
||||||
|
```
|
||||||
|
› Metro waiting on exp://192.168.1.132:8081
|
||||||
|
```
|
||||||
|
|
||||||
|
Si ce n'est pas le cas :
|
||||||
|
```bash
|
||||||
|
npm start -- --clear
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Vérifier la connexion réseau
|
||||||
|
|
||||||
|
- Téléphone et ordinateur sur le **même Wi-Fi**
|
||||||
|
- Pas de VPN actif
|
||||||
|
- Pare-feu autorise Expo (port 8081)
|
||||||
|
|
||||||
|
### 3. Mode tunnel (si problème réseau)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm start -- --tunnel
|
||||||
|
```
|
||||||
|
⚠️ Plus lent mais fonctionne même avec des réseaux différents
|
||||||
|
|
||||||
|
## 🔴 Erreur "Unable to resolve module"
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Nettoyer complètement
|
||||||
|
rm -rf node_modules
|
||||||
|
npm install
|
||||||
|
npm start -- --clear
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔴 Erreur Firebase
|
||||||
|
|
||||||
|
Vérifiez `src/config/firebase.ts` :
|
||||||
|
- Les identifiants sont corrects
|
||||||
|
- Authentication est activée dans Firebase Console
|
||||||
|
- Firestore Database est créée
|
||||||
|
|
||||||
|
## 🔴 L'app crash au démarrage
|
||||||
|
|
||||||
|
1. **Regardez les logs** dans le terminal
|
||||||
|
2. **Vérifiez les erreurs** :
|
||||||
|
- Erreur Firebase → Configurez Firebase
|
||||||
|
- Erreur de module → Nettoyez le cache
|
||||||
|
- Erreur de syntaxe → Vérifiez le dernier commit
|
||||||
|
|
||||||
|
## 🔴 Bouton qui charge à l'infini
|
||||||
|
|
||||||
|
C'est corrigé ! Si ça persiste :
|
||||||
|
```bash
|
||||||
|
# Rechargez l'app
|
||||||
|
# Secouez le téléphone > Reload
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔴 Les modifications ne s'appliquent pas
|
||||||
|
|
||||||
|
1. **Rechargement à chaud désactivé** :
|
||||||
|
- Secouez le téléphone
|
||||||
|
- Appuyez sur "Enable Fast Refresh"
|
||||||
|
|
||||||
|
2. **Forcer le rechargement** :
|
||||||
|
- Secouez le téléphone
|
||||||
|
- Appuyez sur "Reload"
|
||||||
|
|
||||||
|
3. **Nettoyer le cache** :
|
||||||
|
```bash
|
||||||
|
npm start -- --clear
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📱 Commandes utiles
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Démarrage normal
|
||||||
|
npm start
|
||||||
|
|
||||||
|
# Avec cache nettoyé
|
||||||
|
npm start -- --clear
|
||||||
|
|
||||||
|
# Mode tunnel (problèmes réseau)
|
||||||
|
npm start -- --tunnel
|
||||||
|
|
||||||
|
# Réinstaller les dépendances
|
||||||
|
rm -rf node_modules && npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🆘 Toujours bloqué ?
|
||||||
|
|
||||||
|
1. **Vérifiez les logs** dans le terminal
|
||||||
|
2. **Consultez** `TROUBLESHOOTING.md` pour plus de détails
|
||||||
|
3. **Redémarrez tout** :
|
||||||
|
- Fermez Expo Go
|
||||||
|
- Arrêtez le serveur (Ctrl+C)
|
||||||
|
- Relancez : `npm start -- --clear`
|
||||||
|
- Rescannez le QR code
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Dans 99% des cas, un simple rechargement suffit ! 🚀**
|
||||||
Reference in New Issue
Block a user