Use SafeAreaView

pnthach95 · Dec 8, 2023 · 09fdc15 · 09fdc15
1 parent 6f3ad93
commit 09fdc15
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/src/components/connectstatus/index.tsx b/src/components/connectstatus/index.tsx
@@ -3,31 +3,33 @@ import {useTranslation} from 'react-i18next';
 import {View} from 'react-native';
 import {NetworkConsumer} from 'react-native-offline';
 import {Text, useTheme} from 'react-native-paper';
-import {useSafeAreaPaddingTop} from 'theme/styles';
+import {SafeAreaView} from 'react-native-safe-area-context';
 
 /**
  * Connect Status
  */
 const ConnectStatus = () => {
   const {t} = useTranslation();
   const {colors} = useTheme();
-  const safeInsets = useSafeAreaPaddingTop();
-  const box = {
-    backgroundColor: colors.error,
+  const errorBox = {
+    backgroundColor: colors.errorContainer,
+  };
+  const errorBoxText = {
+    color: colors.onErrorContainer,
   };
 
   return (
-    <NetworkConsumer>
-      {({isConnected}) =>
-        isConnected ? (
-          <View style={safeInsets} />
-        ) : (
-          <View className="p-3" style={[box, safeInsets]}>
-            <Text className="text-white">{t('no-internet-connection')}</Text>
-          </View>
-        )
-      }
-    </NetworkConsumer>
+    <SafeAreaView edges={['top']}>
+      <NetworkConsumer>
+        {({isConnected}) =>
+          !isConnected && (
+            <View className="p-3" style={errorBox}>
+              <Text style={errorBoxText}>{t('no-internet-connection')}</Text>
+            </View>
+          )
+        }
+      </NetworkConsumer>
+    </SafeAreaView>
   );
 };