Dropdown Menu

Dropdown Menu Primitive Text Component

Demo

Shows a menu with options or actions when a user clicks the trigger button.

Installation

CLI

npx @react-native-reusables/cli@latest add dropdown-menu

Manual

Dependencies

Before copy/pasting, add the dropdown-menu primitive and the text component to your project.

Copy/paste the following code to ~/components/ui/dropdown-menu.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 Animated, { FadeIn } from 'react-native-reanimated';
import { Button } from '~/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '~/components/ui/dropdown-menu';
import { Text } from '~/components/ui/text';

function Example() {

  return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant='outline'>
            <Text>Open</Text>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent insets={contentInsets} className='w-64 native:w-72'>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <Text>Team</Text>
            </DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Text>Invite users</Text>
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <Animated.View entering={FadeIn.duration(200)}>
                  <DropdownMenuItem>
                    <Text>Email</Text>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Text>Message</Text>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Text>More...</Text>
                  </DropdownMenuItem>
                </Animated.View>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem>
              <Text>New Team</Text>
              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <Text>GitHub</Text>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Text>Support</Text>
          </DropdownMenuItem>
          <DropdownMenuItem disabled>
            <Text>API</Text>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <Text>Log out</Text>
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
  );
}

Props

DropdownMenu

Extends View props

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

DropdownMenuTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)
inset	boolean	(optional)

DropdownMenuPortal

Prop	Type	Note
children*	React.ReactNode
forceMount	true | undefined	(optional)
hostName	string	Web Only (optional)
container	HTMLElement | null | undefined	Web Only (optional)

DropdownMenuContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
overlayStyle	StyleProp<ViewStyle>	(optional)
overlayClassName	string	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	(optional)
insets	Insets	(optional)
avoidCollisions	boolean	(optional)
align	’start’ | ‘center’ | ‘end’	(optional)
side	’top’ | ‘bottom’	(optional)
sideOffset	number	(optional)
disablePositioningStyle	boolean	Native Only (optional)
loop	boolean	Web Only (optional)
onCloseAutoFocus	(event: Event) => void	Web Only (optional)
onEscapeKeyDown	(event: KeyboardEvent) => void	Web Only (optional)
onPointerDownOutside	(event: PointerDownOutsideEvent) => void	Web Only (optional)
onFocusOutside	(event: FocusOutsideEvent) => void	Web Only (optional)
onInteractOutside	PointerDownOutsideEvent | FocusOutsideEvent	Web Only (optional)
collisionBoundary	Element | null | Array<Element | null>	Web Only (optional)
sticky	’partial’ | ‘always’	Web Only (optional)
hideWhenDetached	boolean	Web Only (optional)

DropdownMenuGroup

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

DropdownMenuLabel

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

DropdownMenuItem

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)
textValue	boolean	(optional)
closeOnPress	boolean	(optional)

DropdownMenuCheckboxItem

Extends Pressable props

Prop	Type	Note
checked*	boolean
onCheckedChange*	(checked: boolean) => void
textValue*	string
asChild	boolean	(optional)
closeOnPress	boolean	Native Only (optional)

DropdownMenuRadioGroup

Extends View props

Prop	Type	Note
value*	boolean
onValueChange*	(value: string) => void
asChild	boolean	(optional)

DropdownMenuRadioItem

Extends Pressable props

Prop	Type	Note
value*	boolean
onCheckedChange*	(value: boolean) => void
asChild	boolean	(optional)
closeOnPress	boolean	Native Only (optional)

DropdownMenuSeparator

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
decorative	boolean	(optional)

DropdownMenuSub

Extends View props

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

DropdownMenuSubTrigger

Extends Pressable props

Prop	Type	Note
textValue	string	(optional)
asChild	boolean	(optional)

DropdownMenuSubContent

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true /	undefined

DropdownMenuShortcut

Extends Text props