import React from "react";
import { View, Text, Pressable } from "react-native";
import { Popover } from "expo-ios-popover";

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Popover id="example" arrowEdge="top">
        <Popover.Trigger>
          <Pressable
            style={{ padding: 12, backgroundColor: "#007AFF", borderRadius: 8 }}
          >
            <Text style={{ color: "white" }}>Open Popover 🚀</Text>
          </Pressable>
        </Popover.Trigger>

        <Popover.Content
          style={{
            width: 220,
            height: 150,
            backgroundColor: "#fff",
            padding: 16,
            borderRadius: 12,
          }}
        >
          <Text>Hello from Popover! ✨</Text>
        </Popover.Content>
      </Popover>
    </View>
  );
}