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