Popover

Popover Primitive Text Component

Demo

Dynamic content within a portal, activated by a button press.

Installation

CLI

npx @react-native-reusables/cli@latest add popover

Manual

Dependencies

Before copy/pasting, add the popover primitive and the text component to your project.

Copy/paste the following code to ~/components/ui/popover.tsx:

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '@rn-primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import * as React from 'react';
import { Platform, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button } from '~/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
import { Text } from '~/components/ui/text';

function Example() {
  const insets = useSafeAreaInsets();
  const contentInsets = {
    top: insets.top,
    bottom: insets.bottom,
    left: 12,
    right: 12,
  };

  return (
    <View className='flex-1 justify-center items-center p-6'>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant='outline'>
            <Text>Open popover</Text>
          </Button>
        </PopoverTrigger>
        <PopoverContent
          side={Platform.OS === 'web' ? 'bottom' : 'top'}
          insets={contentInsets}
          className='w-80'
        >
          <Text className='font-medium leading-none native:text-xl'>Dimensions</Text>
          <Text className='text-sm text-muted-foreground'>
            Set the dimensions for the layer.
          </Text>
        </PopoverContent>
      </Popover>
    </View>
  );
}

Props

Popover

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
onOpenChange	(value: boolean) => void

PopoverTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

PopoverContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	Native Only (optional)
insets	Insets	Native Only (optional)
avoidCollisions	boolean	Native Only (optional)
align	’start’ | ‘center’ | ‘end’	Native Only (optional)
side	’top’ | ‘bottom’	Native Only (optional)
sideOffset	number	Native Only (optional)
disablePositioningStyle	boolean	Native Only (optional)
onOpenAutoFocus	(ev: Event) => void	Web Only (optional)
onCloseAutoFocus	(ev: Event) => void	Web Only (optional)
onEscapeKeyDown	(ev: Event) => void	Web Only (optional)
onInteractOutside	(ev: Event) => void	Web Only (optional)
onPointerDownOutside	(ev: Event) => void	Web Only (optional)