Comment vérifier la connexion Internet en React Native (Expo) ?
Salut les devs. Aujourd'hui, on va voir comment vérifier la connexion Internet dans une app React Native et afficher une alerte quand ça coupe. C'est pas sorcier, mais c'est super utile. Allez, on se lance !
1. Préparons le terrain
D'abord, assurez-vous d'avoir React Native installé. Si c'est pas le cas alors chercher à savoir comment le faire (•‿•) et après créons un projet, voilà comment faire :
npx react-native init OfflineAlertApp
cd OfflineAlertAppFacile, non ?
2. La bibliothèque magique : NetInfo
Pour checker la connexion, on va utiliser NetInfo qui va surveiller le réseau. Installez-le comme ça :
npm install @react-native-community/netinfoBoom ! Vous êtes prêt à tout surveiller.
3. Le code, Le code, Le code
Maintenant, le moment que vous attendiez tous. Voici le code qui va tout gérer :
import React, { useEffect, useState } from 'react';
import { View, Text, Alert } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
const App = () => {
const [isConnected, setConnected] = useState(true);
useEffect(() => {
const unsubscribe = NetInfo.addEventListener((state) => {
setConnected(state.isConnected);
if (!state.isConnected) {
showAlert();
}
});
return () => {
unsubscribe();
};
}, []);
const showAlert = () => {
Alert.alert(
'Connexion Internet',
'Vous êtes hors-ligne. Certaines fonctionnalités peuvent être indisponibles.'
);
};
return (
<View>
{isConnected ? <Text>En ligne</Text> : <Text>Hors-ligne</Text>}
</View>
);
};
export default App;Ce code est plus sexy qu'un Macbook Pro, non? Demander à notre IA de rendre encore plus cool le code... ALLEZ Y TESTER (. ❛ ᴗ ❛.)
import React, { useEffect, useState } from 'react';
import { View, Text, Alert, StyleSheet, TouchableOpacity } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import { Ionicons } from '@expo/vector-icons';
const App = () => {
const [isConnected, setConnected] = useState(true);
useEffect(() => {
const unsubscribe = NetInfo.addEventListener((state) => {
setConnected(state.isConnected);
if (!state.isConnected) {
showAlert();
}
});
return () => {
unsubscribe();
};
}, []);
const showAlert = () => {
Alert.alert(
'Connexion Internet',
'Vous êtes hors-ligne. Certaines fonctionnalités peuvent être indisponibles.'
);
};
return (
<View style={styles.container}>
<View style={styles.connectionStatus}>
{isConnected ? (
<View style={styles.onlineContainer}>
<Ionicons name="md-checkmark-circle-outline" size={24} color="green" />
<Text style={styles.onlineText}>En ligne</Text>
</View>
) : (
<View style={styles.offlineContainer}>
<Ionicons name="md-close-circle-outline" size={24} color="red" />
<Text style={styles.offlineText}>Hors-ligne</Text>
</View>
)}
</View>
<TouchableOpacity
style={styles.button}
onPress={() => {
NetInfo.fetch().then((state) => {
setConnected(state.isConnected);
if (!state.isConnected) {
showAlert();
}
});
}}
>
<Text style={styles.buttonText}>Actualiser</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
connectionStatus: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
},
onlineContainer: {
flexDirection: 'row',
alignItems: 'center',
},
offlineContainer: {
flexDirection: 'row',
alignItems: 'center',
},
onlineText: {
marginLeft: 5,
color: 'green',
},
offlineText: {
marginLeft: 5,
color: 'red',
},
button: {
backgroundColor: '#007BFF',
padding: 10,
borderRadius: 5,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
});
export default App;
Démo finale
La fonction showAlert est le truc qui va faire flipper vos utilisateurs quand ils perdent la connexion. Vous pouvez la customiser pour qu'elle soit moins flippante si vous voulez.
Conclusion
Et voilà ! Vous savez maintenant comment vérifier la connexion Internet dans une app React Native. C'est pas plus compliqué que ça. Allez, codez bien !
2 commentaires