Skip to main content

Purpose

MNSelectPicker is a customizable select picker component for React Native that supports single or multiple option selection with a bottom sheet UI. It integrates theming and icons for a polished user experience.


Import​

import MNSelectPicker from '@/components/ui/pickers/MNSelectPicker';

Props​

PropTypeRequiredDefaultDescription
labelstringYes—The label text displayed above the picker.
optionsstring[]Yes—Array of option strings to display in the picker.
valuestring | string[]Yes—Currently selected value(s). Can be a string or array.
onChange(value: string) => voidYes—Callback function triggered on option selection.
iconstringYes—Name of the icon to display on the right side.
multiplebooleanNofalseAllows multiple option selection if set to true.
editablebooleanNotrueEnables or disables user interaction with the picker.

Usage Example​

const options = ['Option 1', 'Option 2', 'Option 3'];

<MNSelectPicker
label="Select an Option"
options={options}
value="Option 1"
onChange={(value) => console.log(value)}
icon="arrow-down"
multiple={false}
editable={true}
/>

NOTE: All example can be founded in select_picker.tsx