API

Select props

Core properties

Name	Type	Description	Default value	Required
label	string	The label shown on the input element.	N/A	✅
arrayList	Array<ListItem>	Array of ListItem objects.	N/A	✅
selectedArrayList	Array<ListItem>	Array of selected items, this array should be a subset of arrayList.	N/A	✅
multiEnable	boolean	True to enable multi select, else it's single select.	N/A	✅
value	string	The value shown in the text input.	N/A	✅
onSelection	(item: SelectedItem) => void	Callback function which is invoked when an item is selected	N/A	✅
disabled	boolean	Whether the input is disabled	false	❌
hideSearchBox	boolean	Whether to hide the search box in the dialog	false	❌
selectAllEnable	boolean	Whether to enable the "Select all" checkbox, requires multiEnable to be true	true	❌
textInputMode	"flat" or "outlined"	The mode of the text input	"flat"	❌
theme	ThemeProp	React Native Paper theme class	Default theme	❌
inputRef	MutableRefObject	The ref which is applied to the text input.	undefined	❌
limit	number	Limit the number of items one can select in multi-select, disables the select all if the limit is not equal to list length	null	❌

Localization properties

Name	Type	Description	Default value	Required
dialogTitle	ReactNode	Title shown in the dialog	label property	❌
selectAllText	string	The text shown in the "Select all" checkbox	"Select all"	❌
searchText	string	The placeholder shown in the search box	"Search"	❌
dialogCloseButtonText	string	The text shown in the close button for the dialog	"Close"	❌
dialogDoneButtonText	string	The text shown in the done button for the dialog	"Done"	❌
errorText	string	The helper text shown below the text input if something went wrong	undefined	❌
limitError	string	error message to show if limit meets.	You can't select more than ${limit} items.	❌

Style properties

Name	Type	Description	Default value	Required
containerStyle	ViewStyle	Surrounding container style	undefined	❌
textInputStyle	TextStyle	Text input style	undefined	❌
dialogStyle	ViewStyle	Dialog style	undefined	❌
dialogTitleStyle	TextStyle	Dialog title style	undefined	❌
searchStyle	ViewStyle	Searchbar style in dialog	undefined	❌
errorStyle	TextStyle	error style	undefined	❌
textInputOutlineStyle	ViewStyle	select box outline border. (works with react native paper v5) Pass style to override the default style of outlined wrapper. Overrides style when mode is set to outlined Example: borderRadius, borderColor	undefined	❌
textColor	string	Text color of the input box	undefined	❌
limitErrorStyle	TextStyle	limit error text style	undefined	❌

Component properties

Name	Type	Description	Default value	Required
textInputProps	PaperSelectTextInputProps	Additional properties to supply to the text input.	undefined	❌
checkboxProps	PaperSelectCheckboxProps	Additional properties to supply to the checkboxes.	undefined	❌
searchbarProps	PaperSelectSearchbarProps	Additional properties to supply to the searchbar.	undefined	❌

Types

ListItem

export interface ListItem {
  _id: string;
  value: string;
}

PaperSelectTextInputProps

export interface PaperSelectTextInputProps {
  underlineColor?: string;
  activeUnderlineColor?: string;
  outlineColor?: string;
  activeOutlineColor?: string;
}

PaperSelectCheckboxProps

export interface PaperSelectCheckboxProps {
  checkboxColor?: string;
  checkboxUncheckedColor?: string;
  checkboxLabelStyle?: TextStyle;
}

PaperSelectSearchbarProps

export interface PaperSelectSearchbarProps {
  icon?: IconSource;
  iconColor?: string;
}