import { ActivityIndicator, View } from "react-native";

function LoadingScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" color="#3B82F6" />
    </View>
  );
}

import { Loading } from "@/components/ui/Loading";

// Full screen loading
<Loading />

// Inline loading with text
<Loading size="small" message="Saving..." />

import { Loading } from "@/components/ui/Loading";

export default function DashboardScreen() {
  const { data, isLoading } = useQuery();

  if (isLoading) return <Loading />;

  return (
    <ScreenLayout>
      <Text>{data.title}</Text>
    </ScreenLayout>
  );
}

import { View, StyleSheet } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

function SkeletonBox({ width, height }: { width: number; height: number }) {
  const opacity = useSharedValue(0.3);

  React.useEffect(() => {
    opacity.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  return (
    <Animated.View
      style={[
        { width, height, backgroundColor: "#E5E7EB", borderRadius: 8 },
        animatedStyle,
      ]}
    />
  );
}

function CardSkeleton() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <SkeletonBox width={120} height={16} />
      <SkeletonBox width={200} height={32} />
      <SkeletonBox width={160} height={14} />
    </View>
  );
}

function DashboardSkeleton() {
  return (
    <ScreenLayout>
      <CardSkeleton />
      <CardSkeleton />
      <CardSkeleton />
    </ScreenLayout>
  );
}

import { RefreshControl, FlatList } from "react-native";

function ItemList() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = async () => {
    setRefreshing(true);
    await refetchData();
    setRefreshing(false);
  };

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => <ItemRow item={item} />}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
}

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

import * as SplashScreen from "expo-splash-screen";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const { isLoading } = useSession();

  useEffect(() => {
    if (!isLoading) {
      SplashScreen.hideAsync();
    }
  }, [isLoading]);

  if (isLoading) return null;

  return <Slot />;
}