Select

Select Primitive

Demo

Presents a selection of options for the user to choose from, activated by a button.

Installation

CLI

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

Manual

Dependencies

Before copy/pasting, add the select primitive to your project.

Copy/paste the following code to ~/components/ui/select.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 { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '~/components/ui/select';

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

  return (
    <Select defaultValue={{ value: 'apple', label: 'Apple' }}>
      <SelectTrigger className='w-[250px]'>
        <SelectValue
          className='text-foreground text-sm native:text-lg'
          placeholder='Select a fruit'
        />
      </SelectTrigger>
      <SelectContent insets={contentInsets} className='w-[250px]'>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem label='Apple' value='apple'>
            Apple
          </SelectItem>
          <SelectItem label='Banana' value='banana'>
            Banana
          </SelectItem>
          <SelectItem label='Blueberry' value='blueberry'>
            Blueberry
          </SelectItem>
          <SelectItem label='Grapes' value='grapes'>
            Grapes
          </SelectItem>
          <SelectItem label='Pineapple' value='pineapple'>
            Pineapple
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Props

Select

Extends View props

Prop	Type	Note
defaultValue	option: { value: string, label: string } | undefined	(optional)
value	option: { value: string, label: string } | undefined	(optional)
onValueChange	(option: { value: string, label: string } | undefined ) => void	(optional)
onOpenChange	(value: boolean) => void	(optional)
disabled	boolean	(optional)
asChild	boolean	(optional)
dir	’ltr’ | ‘rtl’	Web only (optional)
name	string	Web only (optional)
required	boolean	Web only (optional)

SelectTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

SelectContent

Extends View props

Prop	Type	Note
asChild	boolean	(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)
position	’popper’ | ‘item-aligned’ | undefined	Web Only (optional)

SelectItem

Extends Pressable props

Prop	Type	Note
value	string
label	string
closeOnPress	boolean	(optional)
asChild	boolean	(optional)

SelectGroup

Extends View props

SelectLabel

Extends Text props

SelectSeparator

Extends View props

Prop	Type	Note
value	string
label	string
closeOnPress	boolean	(optional)
asChild	boolean	(optional)