Select

A dropdown that pops open, flips above the trigger when there's no room below, and checks off the selected option.

ReanimatedHapticsNativeWindSource

Prerequisites

Select renders its panel in a Modal and needs an icon set for the chevron and the check mark, on top of Reanimated and haptics.


npx expo install react-native-reanimated expo-haptics react-native-css @hugeicons/react-native @hugeicons/core-free-icons

Install


npx @rslab/cli add select

Usage

import { Select } from '@/components/ui/Select';

const [plan, setPlan] = useState<string | null>(null);

<Select
  value={plan}

  onChange={setPlan}

  placeholder="Choose a plan"

  options={[
    { label: 'Solo', value: 'solo' },

    { label: 'Team', value: 'team' },

    { label: 'Enterprise', value: 'enterprise' },
  ]}
/>;

Near the bottom of the screen, the panel opens upward on its own, no prop needed:

<Select
  value={region}

  onChange={setRegion}

  disabled={loadingRegions}

  options={regions}
/>

Props

PropTypeDefault

value

Tnull

-

Controlled selected value, or null before a choice is made.

onChange

(value: T) => void

-

options

{ label: string; value: T }[]

-

Generic over the value’s string literal type.

placeholder?

string

'Select…'

Shown in place of a label while value is null.

disabled?

boolean

false

Fades the trigger and blocks opening.

className?

string

-

Extend or override the trigger’s outer wrapper.

How it works

Measured, not laid out. The trigger sits inside a plain View with collapsable={false}, so measureInWindow gives real window coordinates the moment you open it. The panel itself renders absolutely positioned inside a transparent Modal, so it always draws on top of everything else, including inside a ScrollView.
Flips when there's no room. Before rendering, it checks the space between the trigger and the bottom of the screen; if the option list wouldn't fit, the panel opens upward from the trigger's top edge instead of overflowing off-screen.
Stays mounted through the close animation. The Modal's mount state and the animation direction are tracked separately: closing starts the reverse timing immediately and only unmounts the Modal once that animation's completion callback fires, so the panel animates out instead of vanishing instantly.
Tap outside to dismiss, no bubbling surprises. The backdrop is a full-screen Pressable; tapping an option doesn't trigger it because React Native hands the touch to the innermost responder first.
Timing, not springs. Opening eases out over 180ms, closing eases in over 140ms, always faster closing than opening, so the menu reads as quick to dismiss rather than bouncy.

Tuning

MAX_PANEL_H / ROW_H: the panel's height cap and each row's height, used together to decide whether it flips upward
the open/close timing in the effect, 180ms opening vs 140ms closing; keep closing the faster of the two
the panel's shadow-lg / rounded-2xl classes, how much visual weight the floating menu carries

See exactly how this works with an RSLAB subscription.

Get Pro

Select

Prerequisites

Install

Usage

Props

On this page