Dropdown Menu

A dropdown menu displays a menu of items or actions that directly relate to the button's purpose.

Installation

Before copy/pasting, add the following dependencies to your project:

Usage

index.tsx
import * as React from 'react';
import { View, Pressable } from 'react-native';
import * as DropdownMenu from 'zeego/dropdown-menu';
import { Icon } from '@roninoss/icons';

import { Text } from '~/components/nativewindui/Text';
import { useColorScheme } from '~/lib/useColorScheme';

function DropdownMenuExample() {
  const { colors } = useColorScheme();
  const [menu, setMenu] = React.useState<'primary' | 'destructive'>('primary');

  return (
    <View className="items-center">
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <Pressable className="android:gap-3 flex-row items-center gap-1.5">
            <Text>
              Selected: <Text style={{ color: colors[menu] }}>{menu}</Text>
            </Text>
            <View className="pl-0.5 opacity-70">
              <Icon name="chevron-down" color={colors.foreground} size={21} />
            </View>
          </Pressable>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.CheckboxItem
            key="destructive"
            value={menu === 'destructive'}
            onValueChange={() => {
              setMenu('destructive');
            }}>
            <DropdownMenu.ItemIndicator />
            <DropdownMenu.ItemTitle children="destructive" />
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.CheckboxItem
            key="primary"
            value={menu === 'primary'}
            onValueChange={() => {
              setMenu('primary');
            }}>
            <DropdownMenu.ItemIndicator />
            <DropdownMenu.ItemTitle children="primary" />
          </DropdownMenu.CheckboxItem>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    </View>
  );
}
© Ronin Technologies LLC 2024