React Native Select

React Native Select is a select component for React Native that is compatible with both mobile and web platforms. It is entirely written in TypeScript and comes with features such as being searchable, multiselect, and creatable.

Why another select component?
I wanted something approachable, highly customizable and that felt just a wee bit native on all platforms. Those wants led me to create this and soon after share it with the community.

Demo

Mobile	Web

Installation

1yarn add @devrue/rn-select

or

1npm install @devrue/rn-select

Usage

1import { Select } from '@devrue/rn-select';
2
3export function App() {
4  const pets = [
5    ['cat', 'Cat'],
6    ['dog', 'Dog'],
7    ['horse', 'Horse'],
8    ['fish', 'Fish'],
9  ]
10  return <Select options={pets} />
11}

Props

Single Select Props

Prop	Description	Default
value	Currently selected value string	None
onChangeValue	Callback when value changes. Receives string	None

Multi Select Props

Prop	Description	Default
multi	Flag indicating multiselect mode	true
value	Currently selected values Array<string>	None
onChangeValue	Callback when values change. Receives Array<string>	None

Common Props

Prop	Description	Default
placeholder	Placeholder text when no option is selected	None
listTitle	Title for the options list	None
searchPlaceholder	Placeholder text for the search input	None
searchPlaceholderTextColor	Text color for the search input placeholder	None
showSelectionCount	Flag to show the count of selected items	true
options	Array of options (Array<[key, value]>)	Required
reverse	Flag to reverse option and check mark positon	false
selectionEffectColor	Color for selection effect	None
optionsScrollIndicator	Flag to show scroll indicator for options	true
emptyOptionsPlaceholder	Placeholder text when options is empty	true
emptySearchMsg	Message when search results are empty	"No options"
value	Currently selected value(s) string or Array<string>	None
clearable	Flag to enable clearing of selection	true
disabled	Flag to disable the component	false
searchable	Flag to enable searching	true
createable	Flag to enable creating new items	false
avoidBottom	Avoid options from being hidden by browser window height or position	None
onCreateItem	Callback when a new item is created	None
onChangeInput	Callback when input value changes	None
renderAnchor	Custom rendering for anchor component	None
renderSearch	Custom rendering for search component	None
renderOption	Custom rendering for option component	None
optionDivider	Custom component for option divider	None
selectStyle	Styles for the select container	None
selectPlaceholderTextStyle	Styles for the placeholder text	None
selectTextStyle	Styles for the select text	None
selectPillTextStyle	Styles for the select pill text	None
selectPillRemoveContainerStyle	Styles for the select pill remove container	None
selectPillRemoveIconStyle	Styles for the select pill remove icon	None
selectIconStyle	Styles for the select icon (close & expand)	None
searchContainerStyle	Styles for the search container	None
searchInputStyle	Styles for the search input	None
searchBackIconStyle	Styles for the search back icon	None
searchClearIconStyle	Styles for the search clear icon	None
statsTextStyle	Styles for the stats text	None
optionListContainerStyle	Styles for the options list container	None
optionListStyle	Styles for the options list	None
optionContainerStyle	Styles for the option container	None
optionTextStyle	Styles for the option text	None
optionCheckColors	Colors for option checkmark	None
emptyTextStyle	Styles for the empty text	None

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library