Popover

import { useState } from 'react';
import { Host, Button, Popover, Text, VStack } from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function BasicPopoverExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented => setIsPresented(isPresented)}>
        <Popover.Trigger>
          <Button label="Show Popover" onPress={() => setIsPresented(true)} />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>Hello from Popover!</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

import { useState } from 'react';
import { Host, Button, Popover, Text, VStack } from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function AttachmentAnchorExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented => setIsPresented(isPresented)}
        attachmentAnchor="trailing">
        <Popover.Trigger>
          <Button label="Show Popover" onPress={() => setIsPresented(true)} />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>Attached to trailing edge</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

import { useState } from 'react';
import { Host, Button, Popover, Text, VStack } from '@expo/ui/swift-ui';
import { padding } from '@expo/ui/swift-ui/modifiers';

export default function ArrowEdgeExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host matchContents>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented => setIsPresented(isPresented)}
        arrowEdge="top">
        <Popover.Trigger>
          <Button label="Show Popover" onPress={() => setIsPresented(true)} />
        </Popover.Trigger>
        <Popover.Content>
          <VStack modifiers={[padding({ all: 16 })]}>
            <Text>Arrow on top edge</Text>
          </VStack>
        </Popover.Content>
      </Popover>
    </Host>
  );
}

import { useState } from 'react';
import { Pressable, Text as RNText, View } from 'react-native';
import { Host, Button, Popover, RNHostView } from '@expo/ui/swift-ui';

export default function RNContentPopoverExample() {
  const [isPresented, setIsPresented] = useState(false);
  const [counter, setCounter] = useState(0);

  return (
    <Host matchContents>
      <Popover
        isPresented={isPresented}
        onIsPresentedChange={isPresented => setIsPresented(isPresented)}>
        <Popover.Trigger>
          <Button label="Show RN Popover" onPress={() => setIsPresented(true)} />
        </Popover.Trigger>
        <Popover.Content>
          <RNHostView matchContents>
            <View style={{ padding: 16 }}>
              <RNText style={{ fontSize: 16, fontWeight: 'bold' }}>React Native Content</RNText>
              <RNText style={{ color: '#666', marginVertical: 8 }}>Counter: {counter}</RNText>
              <Pressable
                style={{
                  backgroundColor: '#007AFF',
                  padding: 12,
                  borderRadius: 8,
                  alignItems: 'center',
                }}
                onPress={() => setCounter(counter + 1)}>
                <RNText style={{ color: 'white' }}>Increment</RNText>
              </Pressable>
            </View>
          </RNHostView>
        </Popover.Content>
      </Popover>
    </Host>
  );
}