111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import React, { useRef, useState, useEffect } from "react";
|
|
import { View, ActivityIndicator } from "react-native";
|
|
import ScreenWrapper from "~/components/ui/ScreenWrapper";
|
|
import { Text } from "~/components/ui/text";
|
|
import { Button } from "~/components/ui/button";
|
|
import LottieView from "lottie-react-native";
|
|
import * as Network from "expo-network";
|
|
import { router } from "expo-router";
|
|
import { HOME } from "~/lib/routes";
|
|
import ModalToast from "~/components/ui/toast";
|
|
|
|
export default function NoInternetScreen() {
|
|
const [checking, setChecking] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [toastVisible, setToastVisible] = useState(false);
|
|
const [toastTitle, setToastTitle] = useState("Can't connect to network");
|
|
const [toastDescription, setToastDescription] = useState<string | undefined>(
|
|
undefined
|
|
);
|
|
const [toastVariant, setToastVariant] = useState<
|
|
"success" | "error" | "warning" | "info"
|
|
>("error");
|
|
const toastTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const showToast = () => {
|
|
if (toastTimeoutRef.current) {
|
|
clearTimeout(toastTimeoutRef.current);
|
|
}
|
|
|
|
setToastTitle("Can't connect to network");
|
|
setToastDescription(undefined);
|
|
setToastVariant("error");
|
|
setToastVisible(true);
|
|
|
|
toastTimeoutRef.current = setTimeout(() => {
|
|
setToastVisible(false);
|
|
toastTimeoutRef.current = null;
|
|
}, 2500);
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (toastTimeoutRef.current) {
|
|
clearTimeout(toastTimeoutRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const handleRetry = async () => {
|
|
setChecking(true);
|
|
setError(null);
|
|
try {
|
|
const state = await Network.getNetworkStateAsync();
|
|
const isOffline =
|
|
!state.isConnected || state.isInternetReachable === false;
|
|
|
|
if (!isOffline) {
|
|
router.replace(HOME);
|
|
} else {
|
|
setError("Still offline. Please check your connection.");
|
|
showToast();
|
|
}
|
|
} catch (e) {
|
|
setError("Unable to check connection. Please try again.");
|
|
showToast();
|
|
} finally {
|
|
setChecking(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScreenWrapper edges={[]}>
|
|
<View className="flex-1 bg-white items-center justify-center px-8">
|
|
<LottieView
|
|
source={require("../assets/lottie/NoInternet.json")}
|
|
autoPlay
|
|
loop
|
|
style={{ width: 260, height: 260, marginBottom: 24 }}
|
|
/>
|
|
|
|
<Text className="text-2xl font-dmsans-bold text-[#105D38] mb-3">
|
|
No Internet
|
|
</Text>
|
|
|
|
<Text className="text-base font-dmsans text-gray-500 text-center mb-6">
|
|
Please reconnect the application to the internet.
|
|
</Text>
|
|
|
|
<Button
|
|
className="bg-primary w-full px-6 h-11 flex-row items-center justify-center"
|
|
onPress={handleRetry}
|
|
disabled={checking}
|
|
>
|
|
{checking ? (
|
|
<ActivityIndicator size="small" color="#FFFFFF" />
|
|
) : (
|
|
<Text className="font-dmsans text-white">Retry</Text>
|
|
)}
|
|
</Button>
|
|
</View>
|
|
<ModalToast
|
|
visible={toastVisible}
|
|
title={toastTitle}
|
|
description={toastDescription}
|
|
variant={toastVariant}
|
|
/>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|