Popup

Sheet/dialog modal component with built-in header and backdrop. Presentation is automatic and platform-based: it renders as a bottom sheet on native and as a centered dialog on web — there is no prop to override this.

Basic Usage

import { Popup } from '@multinaire/expo-ui';

<Popup
  title="Modal Title"
  renderToggleButton={({ onPress }) => (
    <Button title="Open" onPress={onPress} />
  )}
>
  <Typography>Modal content</Typography>
</Popup>

Props

Prop	Type	Default	Description
title	string	—	Title text displayed in the modal header
hideHeader	boolean	false	When true, the modal header (title bar) is hidden
renderToggleButton	(props) => ReactNode	—	Render prop that returns the button used to toggle the modal open/closed

Backdrop Behavior

Tapping the backdrop closes the popup on iOS. On Android the backdrop tap is disabled by default to prevent accidental dismissal — use the header close button or usePopup().onRequestClose() instead.

usePopup Hook

Access modal context from within modal children for programmatic control.

import { usePopup } from '@multinaire/expo-ui';

function ModalContent() {
  const { onRequestClose } = usePopup();

  return (
    <Button
      title="Close Modal"
      onPress={onRequestClose}
    />
  );
}

Hook Return Values

Property	Type	Description
onRequestClose	() => void	Callback invoked when the modal requests to be closed (e.g. back button, backdrop tap)
type	'sheet' | 'dialog'	Resolved presentation style of the modal — always 'sheet' on native and 'dialog' on web. Useful for adjusting content (e.g. bottom safe-area insets only apply to sheets)
isDialog	boolean	Shorthand for type === 'dialog'
title	string	Title text displayed in the modal header

Examples

Basic Modal

<Popup
  title="Select Option"
  renderToggleButton={({ onPress }) => (
    <Button title="Open" onPress={onPress} />
  )}
>
  <Container padding="medium">
    <Typography>Slides up from the bottom on native, centers on web</Typography>
  </Container>
</Popup>

Without Header

<Popup
  hideHeader
  renderToggleButton={({ onPress }) => (
    <Button title="Open" onPress={onPress} />
  )}
>
  <CustomHeader />
  <Typography>Custom header content</Typography>
</Popup>