initial commit

apps/native/app/modal.tsx

@@ -0,0 +1,37 @@
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Button, Surface, useThemeColor } from "heroui-native";
+import { Text, View } from "react-native";
+
+import { Container } from "@/components/container";
+
+function Modal() {
+  const accentForegroundColor = useThemeColor("accent-foreground");
+
+  function handleClose() {
+    router.back();
+  }
+
+  return (
+    <Container>
+      <View className="flex-1 justify-center items-center p-4">
+        <Surface variant="secondary" className="p-5 w-full max-w-sm rounded-lg">
+          <View className="items-center">
+            <View className="w-12 h-12 bg-accent rounded-lg items-center justify-center mb-3">
+              <Ionicons name="checkmark" size={24} color={accentForegroundColor} />
+            </View>
+            <Text className="text-foreground font-medium text-lg mb-1">Modal Screen</Text>
+            <Text className="text-muted text-sm text-center mb-4">
+              This is an example modal screen for dialogs and confirmations.
+            </Text>
+          </View>
+          <Button onPress={handleClose} className="w-full" size="sm">
+            <Button.Label>Close</Button.Label>
+          </Button>
+        </Surface>
+      </View>
+    </Container>
+  );
+}
+
+export default Modal;