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

Sample code here

Expo snack

Installation

npm i react-native-custom-select

yarn add react-native-custom-select

Usage

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 (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get
        a shareable url.
      </Text>

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

      <MultipleSelect
        data={data}
        value={selectedValues}
        onChange={handleMultipleChange}
        placeholder="Choose multiple options"
        searchResult="No results found"
      />
    </SafeAreaView>
  );
}

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

SelectList

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

MultipleSelect

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<ViewStyle>	{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