feat: add retry button

app/(tabs)/index.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 
 import { useEffect, useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
 import { type ImageAsset } from "@/cloudinary/cloudinary";
 import { MasonryFlashList } from "@shopify/flash-list";
 import { useRouter } from "expo-router";
@@ -20,33 +21,39 @@ export default function HomeScreen() {
 	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
-		async function fetchWallpapers() {
-			try {
-				setIsLoading(true);
-				const res = await fetch(
-					`${process.env.EXPO_PUBLIC_API_URL}/wallpapers`,
-				);
-				const images: ImageAsset[] = await res.json();
-				setImages(images);
-				setIsLoading(false);
-			} catch (err) {
-				console.log(err);
-				Alert.alert(
-					"Unable to fetch wallpaper",
-					"Check your internet connection. Otherwise, it's probably our fault.",
-				);
-			}
-		}
 		fetchWallpapers();
 	}, []);
 
-	return (
+	async function fetchWallpapers() {
-		<View className="flex-1">
+		try {
-			{isLoading ? (
+			setIsLoading(true);
+			const res = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/wallpapers`);
+			if (res.status !== 200) {
+				throw new Error("server returned error response");
+			}
+			const images: ImageAsset[] = await res.json();
+			setImages(images);
+		} catch (err) {
+			Alert.alert(
+				"Unable to fetch wallpaper",
+				"Check your internet connection. Otherwise, it's probably our fault.",
+			);
+		} finally {
+			setIsLoading(false);
+		}
+	}
+
+	function content() {
+		if (isLoading) {
+			return (
 				<View className="flex-1 items-center justify-center">
 					<ActivityIndicator />
 				</View>
-			) : (
+			);
+		}
+
+		if (images) {
+			return (
 				<MasonryFlashList
 					data={images}
 					numColumns={2}
@@ -84,7 +91,24 @@ export default function HomeScreen() {
 					)}
 					estimatedItemSize={200}
 				/>
-			)}
+			);
-		</View>
+		}
-	);
+
+		return (
+			<View className="flex-1 items-center justify-center">
+				<TouchableOpacity
+					onPress={() => {
+						fetchWallpapers();
+					}}
+				>
+					<View className="flex-col items-center justify-center space-y-2">
+						<Ionicons name="refresh" size={24} color="white" />
+						<Text className="text-white">Reload</Text>
+					</View>
+				</TouchableOpacity>
+			</View>
+		);
+	}
+
+	return <View className="flex-1">{content()}</View>;
 }

app/_layout.tsx

@@ -3,32 +3,13 @@ import {
 	DefaultTheme,
 	ThemeProvider,
 } from "@react-navigation/native";
-import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
-import * as SplashScreen from "expo-splash-screen";
-import { useEffect } from "react";
 import "react-native-reanimated";
 
 import { useColorScheme } from "@/hooks/useColorScheme";
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
-
 export default function RootLayout() {
 	const colorScheme = useColorScheme();
-	const [loaded] = useFonts({
-		SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
-	});
-
-	useEffect(() => {
-		if (loaded) {
-			SplashScreen.hideAsync();
-		}
-	}, [loaded]);
-
-	if (!loaded) {
-		return null;
-	}
 
 	return (
 		<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>