SelectList

SelectList is the searchable React Native list inside SelectPicker, as a standalone inline component. Use it in settings screens, onboarding steps, or your own sheets and modals.

import { SelectList } from '@elik56a/react-native-pickers';

Loading…

<View
  style={{
    borderWidth: 1,
    borderColor: '#E8E4DC',
    borderRadius: 16,
    paddingVertical: 8,
  }}
>
  <SelectList options={themes} value={mode} onChange={setMode} />
</View>

Try the props

Platform

multiplesearchableshowCheckmarksloading

<SelectList
  options={countries}
  value={value}
  onChange={setValue}
  searchable
/>

Multiple, with search

Loading…

<SelectList
  multiple
  options={toppings}
  value={picked}
  onChange={setPicked}
  maxSelected={5}
  listHeight={320}
/>

Searching a server

loadOptions loads the options for what the user types, with the loader showing from the keystroke until they arrive. Here the list starts with recent picks and searches a fake API:

Loading…

<SelectList
  multiple
  options={RECENT}
  loadOptions={searchPackages}
  value={packages}
  onChange={setPackages}
  searchPlaceholder="Search packages"
  loadingText="Searching the registry…"
  listHeight={300}
/>

Loading more as you scroll

onEndReached fires near the end of the list; append the next page to options and set loading while it's on its way. The spinner shows under the options.

Loading…

<SelectList
  options={options}
  value={contact}
  onChange={setContact}
  searchable={false}
  loading={loading}
  loadingText="Loading contacts…"
  onEndReached={loadMore}
  listHeight={300}
/>

Behaviour

• Controlled only: pass value and update it in onChange.
• In single mode, tapping an option calls onChange(value, option), including when it's already selected (there's no deselect).
• In multiple mode, taps toggle. onChange(values, options) keeps selection order (appended at the end).
• With maxSelected reached, unselected options become disabled until something is deselected.
• Without listHeight, the list grows with its content. Inside a scroll view or sheet, give it a listHeight so it scrolls on its own.
• Search state is internal and resets when the list unmounts; with onSearchChange, that reset calls onSearchChange('') so a remote list can drop its results.
• For options from a server, see Search on a server: loadOptions, onSearchChange, loading and onEndReached work the same here.

Props

Prop	Type	Default	Description
options	ReadonlyArray<SelectOption<T>>	[]	See options. With loadOptions, the ones shown before the user types.
multiple	boolean	false	Multi-select.
value	T | null · T[]	—	Selection.
onChange	(value: T, option) => void · (values: T[], options) => void	—	Single · multiple.
maxSelected	number	—	Multiple only.
searchable	boolean	options.length > 8	Show the search field.
query	string	—	Controlled search query, for filtering from your own input. Hides the built-in search field.
searchPlaceholder	string	'Search'	Search hint and its accessibility label.
filterOption	(option: SelectOption<T>, query: string) => boolean	defaultFilter; none with loadOptions / onSearchChange	Custom filter.
loadOptions	(query: string) => Promise<SelectOption<T>[]>	—	Search a server: loader, debounce and stale answers handled.
onSearchChange	(query: string) => void	—	Called once typing pauses, to search yourself.
searchPrompt	string	'Type to search'	Shown before the user types, while a searched list has no options.
searchDebounce	number	300	ms after the last keystroke before loadOptions / onSearchChange.
onEndReached	() => void	—	Called near the end of the list, to load more.
loading	boolean	false	Spinner in place of an empty list, or under the options.
loadingText	string	'Loading…'	Text next to the spinner.
renderLoading	(theme: PickerTheme) => ReactNode	—	Custom loader.
renderOption	(info: SelectRenderOptionInfo<T>) => ReactNode	—	Custom row content.
renderGroupHeader	(group: string, theme: PickerTheme) => ReactNode	—	Custom section header.
emptyText	string	'No results'	Empty-state text.
showCheckmarks	boolean	true	✓ (single) / checkbox (multiple).
isEqual	(a: T, b: T) => boolean	Object.is	Value equality.
listHeight	number	—	Fixed height for the scrolling list.
autoFocusSearch	boolean	false	Focus the search on mount.
style	StyleProp<ViewStyle>	—	Container style.
styles	SlotStyles<SelectSlot>	—	Slots below.
theme	DeepPartial<PickerTheme>	—	Theme override.
design	'ios' | 'material' | 'web'	from PickersProvider	The look to follow, over the provider's: iOS, Material or web.
testID	string	—	Test ID.

Slots

Slot	Element
container	Outer view
search	Search field wrapper
searchInput	The TextInput
list	The FlatList
groupHeader / groupHeaderText	Section header
option	Each row
selectedOption	Selected rows (merged after option)
optionLabel / selectedOptionLabel	Row label
optionDescription	Second line
check	✓ or checkbox
empty / emptyText	Empty state, and the searchPrompt
loading / loadingText	Loader row / its text

Types

interface SelectRenderOptionInfo<T> { option: SelectOption<T>; selected: boolean; disabled: boolean; theme: PickerTheme }
type SelectValueProps<T> =
  | { multiple?: false; value?: T | null; onChange?: (value: T, option: SelectOption<T>) => void }
  | { multiple: true; value?: T[]; onChange?: (value: T[], options: SelectOption<T>[]) => void; maxSelected?: number };