u

code/app/app-rn4/src/components/EmptyStatus.tsx

@@ -1,10 +1,13 @@
-import { ScrollView, Text, Image } from "react-native";
+import { View, Text, Image, StyleProp, ViewStyle } from "react-native";
 
 interface EmptyStateProps {
   type?: "empty" | "error" | "404" | "network" | "loading";
   title?: string;
   description?: string;
   footer?: React.ReactNode;
+
+  className?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
 const images = {
@@ -28,31 +31,32 @@ export default function EmptyState({
   title,
   description,
   footer,
-}: EmptyStateProps) {
+  className,
+  style,
+}: EmptyStateProps & { style?: StyleProp<ViewStyle> }) {
   const finalTitle = title ?? defaultTitles[type];
 
   return (
-    <ScrollView
-      contentContainerStyle={{
-        flexGrow: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 16,
-      }}
-      showsVerticalScrollIndicator={false}
+    <View
+      className={className}
+      style={[
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          padding: 16,
+        },
+        style,
+      ]}
     >
-      {/* image */}
       <Image source={images[type]} style={{ width: 224, height: 224, resizeMode: "contain" }} />
 
-      {/* title */}
       <Text className="text-xl font-semibold text-foreground text-center mt-4">{finalTitle}</Text>
 
-      {/* description */}
       {description && (
         <Text className="text-sm text-foreground/60 text-center mt-2 leading-6">{description}</Text>
       )}
 
       {footer}
-    </ScrollView>
+    </View>
   );
 }