Only fetch data when is connected to the internet

app/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Redirect, useRouter } from 'expo-router';
 import { useTranslation } from 'react-i18next';
 
@@ -16,6 +16,8 @@ export default function OnboardStartScreen() {
     const { token, isLoading } = useToken();
     const { t, i18n } = useTranslation();
     const router = useRouter();
+    const [ isConnected, setIsConnected ] = useState( false );
+
 
     const fetchData = async () => {
         const response = await Request.post( 'sessions/get', { token: token } );
@@ -34,10 +36,14 @@ export default function OnboardStartScreen() {
     };
 
     useEffect( () => {
-        if (!isLoading && token) {
+        if (!isLoading && token && isConnected) {
             fetchData();
         }
-    }, [ isLoading, token, router ] );
+    }, [ isLoading, token, isConnected, router ] );
+
+    const handleConnectionChange = () => {
+        setIsConnected( true );
+    };
 
     if (!isLoading && !token) {
         return <Redirect href="/(onboarding)/start"/>;
@@ -45,7 +51,7 @@ export default function OnboardStartScreen() {
 
     return (
         <ThemedView style={{ flex: 1 }}>
-            <NoInternetConnectionScreen onReconnect={fetchData}/>
+            <NoInternetConnectionScreen connected={handleConnectionChange}/>
             <LoadingScreen message={t( "loading" ) + '...'}/>
         </ThemedView>
     )

src/components/NoInternet.tsx

@@ -11,39 +11,39 @@ import { useTranslation } from 'react-i18next';
 const { width, height } = Dimensions.get( 'window' );
 
 interface NoInternetConnectionScreenProps {
-    onReconnect?: () => void;
+    connected?: () => void;
 }
 
-const NoInternetConnectionScreen: React.FC<NoInternetConnectionScreenProps> = ({ onReconnect }) => {
+const NoInternetConnectionScreen: React.FC<NoInternetConnectionScreenProps> = ({ connected }) => {
     const colorScheme = useColorScheme() ?? 'light';
     const [ isConnected, setIsConnected ] = useState<boolean | null>( null );
     const { t } = useTranslation();
 
-    useEffect( () => {
+    useEffect(() => {
-        const unsubscribe = NetInfo.addEventListener( state => {
+        // Listener for when connection is back
-            setIsConnected( state.isConnected );
+        const unsubscribe = NetInfo.addEventListener(state => {
+            setIsConnected(state.isConnected);
+        });
 
-            if (state.isConnected && onReconnect) {
+        // Check initial connection state
-                onReconnect();
+        NetInfo.fetch().then(state => {
-            }
+            setIsConnected(state.isConnected);
-        } );
+        });
-
-        // Check the initial connection status
-        NetInfo.fetch().then( state => {
-            setIsConnected( state.isConnected );
-        } );
 
         return () => unsubscribe();
-    }, [] );
+    }, []);
+
+    useEffect(() => {
+        // Execute callback when connection is made
+        if (isConnected && connected) {
+            connected();
+        }
+    }, [isConnected, isConnected]);
 
     const retryConnection = () => {
-        NetInfo.fetch().then( state => {
+        NetInfo.fetch().then(state => {
-            setIsConnected( state.isConnected );
+            setIsConnected(state.isConnected);
-
+        });
-            if (state.isConnected && onReconnect) {
-                onReconnect();
-            }
-        } );
     };
 
     if (isConnected !== false) {