Select

Select triggers a modal bottom picker sheet for selecting items from an options list.

Usage

SelectExample.tsx

import { useState } from 'react';
import { Select } from '@masumdev/rn-ui';

export function SelectExample() {
  const [selected, setSelected] = useState('expo');

  return (
    <Select
      title="Choose Framework"
      placeholder="Select mobile framework..."
      value={selected}
      onValueChange={setSelected}
      options={[
        { value: 'expo', label: 'Expo React Native', description: 'Recommended managed workflow.' },
        { value: 'cli', label: 'React Native CLI', description: 'Bare React Native setup.' },
        { value: 'web', label: 'React Native Web', description: 'Cross-platform web target.', disabled: true },
      ]}
    />
  );
}

Props API

Prop	Type	Default	Description
options	SelectOption[]	—	Array of option objects with value, label, description, and optional disabled state.
value	string	—	Currently selected option value.
defaultValue	string	—	Initial default selected value.
placeholder	string	'Select option'	Placeholder string when no option is selected.
title	string	'Select'	Modal sheet header title string.
onValueChange	(value: string) => void	—	Callback when an option is selected.
chevronIcon	RenderIcon	—	Custom trailing dropdown arrow icon renderer.
checkIcon	RenderIcon	—	Custom checkmark icon for active item.