Popup

import { createStyleSheet, useStyles } from 'react-native-unistyles';
 
import {
  Popup,
  PopupArrow,
  PopupContent,
  PopupOverlay,
  PopupPortal,
  PopupTrigger,
} from '@/components/ui/Popup';
import { Button, ButtonText } from '@/components/ui/Button';
 
export function MyPopup() {
  const { styles } = useStyles(stylesheet);
 
  return (
    <Popup>
      <PopupTrigger as={Button}>
        <ButtonText>Open Popup</ButtonText>
      </PopupTrigger>
      <PopupPortal>
        <PopupOverlay style={styles.popupOverlay} />
        <PopupContent
          maxWidth={260}
          placement={'bottom'}
          avoidCollisions={true}
          style={styles.popupContent}>
          <PopupArrow />
          <Text variant="bodySm">
            Popup is a{' '}
            <Text fontFamily="interBold" inherit>
              primitive
            </Text>{' '}
            which can be used to build components like Popover, Dropdown, etc.
          </Text>
        </PopupContent>
      </PopupPortal>
    </Popup>
  );
}
 
const stylesheet = createStyleSheet(theme => ({
  popupOverlay: {
    backgroundColor: theme.colors.overlay,
  },
  popupContent: {
    padding: theme.space[16],
  },
}))