Cảnh báo trạng thái mạng của người dùng trong React Native

import React from ‘react’
import { View, Text, StyleSheet } from ‘react-native’

export default ({color}) => {
return (
<View style={styles.errorContainer}>
<Text style={styles.errorText}>Không có kết nối in tờ nét</Text>
</View>
)
}

const styles = StyleSheet.create({
errorContainer: {
marginTop: 100,
width: ‘100%’,
padding: 10,
alignSelf: ‘center’,
backgroundColor: ‘#a00’,
},
errorText : {
color: ‘yellow’,
fontSize: 12,
textAlign: ‘center’
}
})

import React, { useEffect, useState } from ‘react’;
import {
StyleSheet,
View,
Text,
Image
} from ‘react-native’;
import NetInfo from “@react-native-community/netinfo”;
import NetworkError from ‘./services/networkError’

function App() {
const [netStatus, setNet] = useState(true)
useEffect(() => {
NetInfo.addEventListener(state => {
setNet(state.isConnected)
})
})

return (
<View style={styles.container}>
{!netStatus && <NetworkError />}
<View style={styles.fill}>
<Image
source={{uri:’https://static.thenounproject.com/png/599828-200.png’}} style={{height:120,width:120}}/>
<Text
style={styles.text}>
Tắt mạng của bạn để thấy thông báo hihihi
</Text>
</View>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1
},
fill: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
text:{
fontSize:16
}
});

export default App;