Combobox Component

A customizable combobox component for React Native. It works with both static and dynamic data, and it supports search functionality. it works with both bared and managed workflow(Expo). it is written in TypeScript.

Updates and Bug Reporting

This package is continuously improving and there may be some bugs. Your feedback is invaluable in making this package better. If you encounter any issues, please report them. Regular updates will be released to fix bugs and add new features, so please ensure to keep your package up-to-date.

Features

• Customizable: You can customize the combobox with your own styles and render functions.
• Searchable: You can enable search functionality to filter items.
• Dynamic Data: You can use dynamic data to populate the combobox.
• Keyboard Avoiding: The combobox avoids the keyboard when active.
• Common Configuration: You can configure common properties like styles, focus, and blur events.
• Dynamic Configuration: You can configure dynamic properties like label and value fields.
• Searchable Configuration: You can configure searchable properties like search field, search placeholder, and search icon.
• Searchable Callbacks: You can use callbacks for non-existent items and custom rendering.
• Searchable Items: You can show a specific item when there is no search input.
• Searchable No Results: You can show a custom item when no search results are found.
• Searchable Always Show: You can always show a specific item when there is no search input.

Demo

Installation

npm i react-native-customisable-combobox

Usage

import React from "react";
import { View } from "react-native";
import { Combobox } from "react-native-customisable-combobox";

const items = [
  { label: "Item 1", value: "item1" },
  { label: "Item 2", value: "item2" },
  // Add more items here
];

const App = () => {
  const [selectedItem, setSelectedItem] = React.useState(items[0]);

  return (
    <View>
      <Combobox
        items={items}
        labelField="label"
        valueField="value"
        searchField="label"
        value={selectedItem}
        onChange={setSelectedItem}
        searchable
        searchPlaceholder="Search items..."
      />
    </View>
  );
};

export default App;

Props

Property	Type	Description	Optional	Configuration
items	Array<T> / Array<string | number>	The list of items displayed in the combobox.	No	Common, Dynamic
useFlatList	boolean	Whether to use a FlatList for the dropdown. Default is setted and recommanded to be true. In case it gives the "VirtualizedLists should never be nested inside plain ScrollViews" error, set this prop to false	Yes	Common
mainContainerStyle	ViewStyle	Custom styles for the main combobox container.	Yes	Common
label	string	Label for the combobox.	Yes	Common
labelStyle	TextStyle	Custom styles for the label.	Yes	Common
noFoundItemText	string	Text for the non-existent item.	Yes	Common
noFoundItemStyle	TextStyle	Custom styles for the non-existent item.	Yes	Common
showTextStyle	TextStyle	Custom styles for the selected item text.	Yes	Common
renderLabel	() => React.ReactNode	Custom function to render the label.	Yes	Common
error	string	Error message for the combobox.	Yes	Common
errorStyle	TextStyle	Custom styles for the error message.	Yes	Common
renderError	() => React.ReactNode	Custom function to render the error message.	Yes	Common
style	ViewStyle	Custom styles for the combobox container.	Yes	Common
itemStyle	ViewStyle	Custom styles for each item in the list.	Yes	Common
selectedStyle	ViewStyle	Custom styles for the selected item.	Yes	Common
showBorder	boolean	Whether to show border for the combobox.	Yes	Common
containerRadius	number	Radius for the combobox container.	Yes	Common
dropdownStyle	ViewStyle	Custom styles for the dropdown.	Yes	Common
value	T	The currently selected value.	No	Common
onFocus	() => void	Callback triggered when the combobox gains focus.	Yes	Common
onBlur	() => void	Callback triggered when the combobox loses focus.	Yes	Common
labelField	keyof T / never	The key in the item object for the label value.	No / N/A	Dynamic
valueField	keyof T / never	The key in the item object for the value.	No / N/A	Dynamic
renderItem	({ item, selected }: { item: T; selected: boolean }) => React.ReactNode	Custom function to render each item.	Yes	Dynamic
onChange	(value: T | string | number) => void	Callback triggered when an item is selected.	No	Dynamic
searchable	true / false	Enables or disables search functionality.	No	Searchable
searchField	keyof T / never	The key in the item object for searching.	No / N/A	Searchable
searchPlaceholder	string	Placeholder text for the search input.	Yes	Searchable (searchable: true)
renderSearchIcon	() => React.ReactNode	Custom function to render a search icon.	Yes	Searchable (searchable: true)
showItemOnNoSearch	boolean	Shows all items if there is no search input.	Yes	Searchable (searchable: true)
showAlwaysNoSearchItem	boolean	Always shows a specific item when there is no search input.	Yes	Searchable (searchable: true)
renderNoSearchItem	(value: string) => React.ReactNode	Custom function to render an item when no search results are found.	Yes	Searchable (searchable: true)
onSelectedNotFoundItem	(value: string) => void	Callback triggered when a non-existent item is selected after a search.	Yes	Searchable (searchable: true)
renderNotFoundItem	(value: string) => React.ReactNode	Custom function to render a non-existent item.	Yes	Searchable (searchable: true)
debounceDelay	number	Delay in milliseconds for the search input. Default is 300	Yes	Searchable (searchable: true)