React native custom select

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

!git workflow
!NPM Version

Sample code here

Expo snack

!Screenshot

$3

``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.


data={data}
value={selectedValue}
onChange={handleChange}
placeholder="Select an option"
borderColor="#444"
/>

data={data}
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

$3

| 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. |

$3

| 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

@kimolalekan