Popover

A Popover component displays additional information in a floating overlay. Built on top of heroui-native Popover.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Popover running in the Nayan UI example app

Usage

Source
Popover.tsx
import { View } from 'react-native';
import { NButton, NPopover, NText } from '@nayan-ui/native';


export default function PopoverScreen() {
  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Default (bottom)</NText>
      <NPopover trigger={<NButton variant="outline">Open Popover</NButton>}>
        <View className="p-3">
          <NText>Popover content below the trigger.</NText>
        </View>
      </NPopover>


      <NText className="text-lg font-bold">Placement top</NText>
      <NPopover placement="top" trigger={<NButton variant="outline">Top</NButton>}>
        <View className="p-3">
          <NText>Above the trigger.</NText>
        </View>
      </NPopover>


      <NText className="text-lg font-bold">Placement left</NText>
      <NPopover placement="left" trigger={<NButton variant="outline">Left</NButton>}>
        <View className="p-3">
          <NText>Left side.</NText>
        </View>
      </NPopover>


      <NText className="text-lg font-bold">Placement right</NText>
      <NPopover placement="right" trigger={<NButton variant="outline">Right</NButton>}>
        <View className="p-3">
          <NText>Right side.</NText>
        </View>
      </NPopover>


      <NText className="text-lg font-bold">Rich content</NText>
      <NPopover trigger={<NButton>Details</NButton>}>
        <View className="p-3 gap-2">
          <NText className="font-bold">User Info</NText>
          <NText className="text-muted">john@example.com</NText>
          <NButton size="sm" onPress={() => {}}>
            View Profile
          </NButton>
        </View>
      </NPopover>
    </View>
  );
}

Attributes

6 props
NameTypeDefaultDetails
triggerReact.ReactNodeOptionalTrigger element for the popover.
childrenReact.ReactNodeRequiredContent for the popover.
isOpenbooleanOptionalControlled open state.
onOpenChange(isOpen: boolean) => voidOptionalCallback when open state changes.
placement'top' | 'bottom' | 'left' | 'right''bottom'Placement of the popover.
classNamestring' 'You can customise by passing tailwind classes.

Tags

Other components solving nearby problems.