stuff

app/(tabs)/index.tsx

@@ -1,18 +1,14 @@
 import {
 	View,
 	Image,
-	StyleSheet,
-	Platform,
 	Text,
 	TouchableOpacity,
+	ActivityIndicator,
+	Alert,
 } from "react-native";
 
-import { HelloWave } from "@/components/HelloWave";
-import ParallaxScrollView from "@/components/ParallaxScrollView";
-import { ThemedText } from "@/components/ThemedText";
-import { ThemedView } from "@/components/ThemedView";
 import { useEffect, useState } from "react";
-import { FAKE_DATA, type ImageAsset } from "@/cloudinary/cloudinary";
+import { type ImageAsset } from "@/cloudinary/cloudinary";
 import { MasonryFlashList } from "@shopify/flash-list";
 import { useRouter } from "expo-router";
 import { useStore } from "@/store/store";
@@ -25,54 +21,69 @@ export default function HomeScreen() {
 
 	useEffect(() => {
 		async function fetchWallpapers() {
-			setIsLoading(true);
-			const res = await fetch("http://localhost:8080/wallpapers");
-			const images: ImageAsset[] = await res.json();
-			setImages(images);
-			setIsLoading(false);
+			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 {
+				Alert.alert(
+					"Unable to fetch wallpaper",
+					"Check your internet connection. Otherwise, it's probably our fault.",
+				);
+			}
 		}
 		fetchWallpapers();
 	}, []);
 
 	return (
 		<View className="flex-1">
-			<MasonryFlashList
-				data={FAKE_DATA}
-				numColumns={2}
-				ListHeaderComponent={() => (
-					<Text className="px-2 pt-20 text-2xl font-bold text-white">
-						Wallpapers
-					</Text>
-				)}
-				renderItem={({ item }) => (
-					<View className="w-full p-2">
-						<View className="w-full relative">
-							<TouchableOpacity
-								onPress={() => {
-									setSelectedWallpaper(item);
-									router.push("/wallpaper");
-								}}
-							>
-								<Image
-									className="w-full h-60"
-									source={{ uri: item.secure_url }}
-								/>
-							</TouchableOpacity>
-							<View
-								className="w-full absolute bottom-0 left-0 right-0 p-2"
-								style={{
-									backgroundColor: "rgba(0, 0, 0, 0.8)",
-								}}
-							>
-								<Text className="text-white opacity-80">
-									{item.public_id.replace("wallpaper/", "")}
-								</Text>
+			{isLoading ? (
+				<View className="flex-1 items-center justify-center">
+					<ActivityIndicator />
+				</View>
+			) : (
+				<MasonryFlashList
+					data={images}
+					numColumns={2}
+					ListHeaderComponent={() => (
+						<Text className="px-2 pt-20 text-2xl font-bold text-white">
+							Wallpapers
+						</Text>
+					)}
+					renderItem={({ item }) => (
+						<View className="w-full p-2">
+							<View className="w-full relative rounded overflow-hidden">
+								<TouchableOpacity
+									onPress={() => {
+										setSelectedWallpaper(item);
+										router.push("/wallpaper");
+									}}
+								>
+									<Image
+										className="w-full h-60"
+										source={{ uri: item.secure_url }}
+									/>
+								</TouchableOpacity>
+								<View
+									className="w-full absolute bottom-0 left-0 right-0 p-2"
+									style={{
+										backgroundColor: "rgba(0, 0, 0, 0.8)",
+									}}
+								>
+									<Text className="text-white opacity-80">
+										{item.public_id.replace("wallpaper/", "")}
+									</Text>
+								</View>
 							</View>
 						</View>
-					</View>
-				)}
-				estimatedItemSize={200}
-			/>
+					)}
+					estimatedItemSize={200}
+				/>
+			)}
 		</View>
 	);
 }

app/wallpaper.tsx

@@ -4,7 +4,6 @@ import * as MediaLibrary from "expo-media-library";
 import { Ionicons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
 import { Image, Text, View, TouchableOpacity, Alert } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function WallpaperPage() {
 	const selectedWallpaper = useStore((store) => store.selectedWallpaper);