A customizable React Native dropdown/select component supporting single and multiple selection modes, with features like search, select all, and flexible styling options for seamless integration
npm install react-native-custom-selectA customizable React Native dropdown/select component supporting single and multiple selection modes, with features like search, select all, and flexible styling options for seamless integration

!git workflow
!NPM Version

``sh`
npm i react-native-custom-select
`sh`
yarn add react-native-custom-select
Usage
`jsx
import { useState } from 'react';
import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { SelectList, MultipleSelect } from 'react-native-custom-select';
export default function App() {
const [selectedValue, setSelectedValue] = useState('');
const [selectedValues, setSelectedValues] = useState([]);
const data = [
{ key: '1', value: 'Option 1' },
{ key: '2', value: 'Option 2' },
{ key: '3', value: 'Option 3' },
{ key: '4', value: 'Option 4' },
];
const handleChange = value => {
setSelectedValue(value);
};
const handleMultipleChange = values => {
setSelectedValues(values);
};
return (
Change code in the editor and watch it change on your phone! Save to get
a shareable url.
value={selectedValue}
onChange={handleChange}
placeholder="Select an option"
borderColor="#444"
/>
value={selectedValues}
onChange={handleMultipleChange}
placeholder="Choose multiple options"
searchResult="No results found"
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
margin: 10,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
`
SelectList Properties
| Property | Type | Default | Description |
| ---------------- | ------------------------- | ----------- | -------------------------------------------------------- |
| data | SelectItem[] | [] | The list of items for the select dropdown. |value
| | string | undefined | The selected value. |placeholder
| | string | undefined | Placeholder text when no item is selected. |searchResult
| | string | undefined | Displays the search results. |fontSize
| | number | 14 | Font size of the text within the select component. |backgroundColor
| | string | 'transparent'| Border color of the select component. |borderColor
| | string | '#000' | Border color of the select component. |borderRadius
| | number | 10 | Border radius of the select component. |defaultPadding
| | number | 14 | Default padding within the select component. |containerStyle
| | StyleProp | {marginBottom: 15} | Custom styles for the container view. |indexValue
| | string | undefined | The value of the item used for indexing in the dropdown. |caretIcon
| | ReactNode | undefined | Custom icon for the caret in the dropdown. |closeIcon
| | ReactNode | undefined | Custom icon for the close button in the dropdown. |onChange
| | (value: string) => void | required | Callback function triggered when a selection is made. |
| Property | Type | Default | Description |
| ---------------- | ------------------------- | ----------- | -------------------------------------------------------------- |
| data | SelectItem[] | [] | The list of items for the select dropdown. |value
| | string[] | undefined | The array of selected values. |placeholder
| | string | undefined | Placeholder text when no item is selected. |searchResult
| | string | undefined | Displays the search results. |fontSize
| | number | 14 | Font size of the text within the select component. |backgroundColor
| | string | 'transparent'| Border color of the select component. |borderColor
| | string | '#000' | Border color of the select component. |borderRadius
| | number | 10 | Border radius of the select component. |defaultPadding
| | number | 14 | Default padding within the select component. |containerStyle
| | StyleProp | {marginBottom: 15} | Custom styles for the container view. |indexValue
| | string | undefined | The value of the item used for indexing in the dropdown. |caretIcon
| | ReactNode | undefined | Custom icon for the caret in the dropdown. |closeIcon
| | ReactNode | undefined | Custom icon for the close button in the dropdown. |onChange
| | (value: string) => void | required` | Callback function triggered when multiple selections are made. |
Maintainers