hide the safeArea for onboarding animations

components/NetworkDetector/NetworkDetector.tsx

@@ -1,20 +1,29 @@
-import React, {useEffect, useState} from "react";
-import NetInfo from '@react-native-community/netinfo';
+import React, { useEffect, useState } from "react";
+import NetInfo from "@react-native-community/netinfo";
 import Online from "@/components/Online/Online";
 import Offline from "@/components/Offline/Offline";
 import SafeAreaContainer from "@/components/SafeAreaContainer/SafeAreaContainer";
-import {Text, View} from "react-native";
+import { Text, View } from "react-native";
 
 /**
  * Detect the net status and switch back and forth between online and offline
  */
 export default function NetworkDetector() {
-  const [connection, setConnection] = useState<'online' | 'offline' | null>(null);
-
+  const [connection, setConnection] = useState<"online" | "offline" | null>(
+    null
+  );
+  //for animation we need to avoid safeArea
+  const [isShowSafeArea, setIsShowSafeArea] = React.useState(false);
+  const handleSafeAreaVisibility = React.useCallback((visible: boolean) => {
+    setIsShowSafeArea(visible);
+  }, []);
   useEffect(() => {
-    return NetInfo.addEventListener(state => {
-      state.isConnected ? setConnection('online') : setConnection('offline')
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      state.isConnected ? setConnection("online") : setConnection("offline");
     });
+    return () => {
+      unsubscribe();
+    };
   }, []);
 
   if (connection === null) {
@@ -30,7 +39,9 @@ export default function NetworkDetector() {
   // extra logic for this.  Shouldn't be too hard though we would just add
   // hasBeenOnline which gets set to true once we have the first isConnected
   // event.  After that we mount online and display it for the first time.
-
+  if (connection === "online" && !isShowSafeArea) {
+    return <Online handleSafeAreaVisibility={handleSafeAreaVisibility} />;
+  }
   return (
     <SafeAreaContainer>
       <>
@@ -39,10 +50,11 @@ export default function NetworkDetector() {
             <Text>Detecting network state .... </Text>
           </View>
         )}
-        {connection === 'online' && <Online/>}
-        {connection === 'offline' && <Offline/>}
+        {connection === "online" && (
+          <Online handleSafeAreaVisibility={handleSafeAreaVisibility} />
+        )}
+        {connection === "offline" && <Offline />}
       </>
     </SafeAreaContainer>
-  )
-
+  );
 }

components/Online/Online.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import Webapp from "@/components/Webapp/Webapp";
-
-export default function Online() {
-
+type OnlineProps = {
+  handleSafeAreaVisibility: (showSafeArea: boolean) => void;
+};
+export default function Online({ handleSafeAreaVisibility }: OnlineProps) {
   // true if we are in the auth stage... at which we unmount the webview and
   // re-mount the main view.
 
   return (
     <>
-      <Webapp/>
+      <Webapp handleSafeAreaVisibility={handleSafeAreaVisibility} />
     </>
-  )
+  );
 }