react-native-searchable-select

A lightweight, customizable, searchable dropdown component for React Native with support for:

• Searchable options
• Custom value entry
• Create new option
• Validation support
• Custom icons
• Theme customization
• TypeScript support
• React Native Web support

Installation

npm install react-native-searchable-select

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-native": ">=0.72.0"
}

Basic Usage

import React, { useState } from "react";
import { SearchableDropdown } from "react-native-searchable-select";

const countries = [
  { label: "India", value: "india" },
  { label: "USA", value: "usa" },
];

export default function Example() {
  const [country, setCountry] = useState("");

  return (
    <SearchableDropdown
      value={country}
      data={countries}
      onChange={setCountry}
      placeholder="Select Country"
    />
  );
}

Features

✅ Searchable dropdown

✅ Create new option

✅ Custom value support

✅ Custom icons

✅ Theme customization

✅ Required field validation

✅ Disabled state

✅ TypeScript support

✅ React Native Web compatible

Props

Required Props

| Prop | Type | Description | | -------- | ----------------------- | ------------------------- | | value | string | Selected value | | data | DropdownOption[] | Dropdown options | | onChange | (value: string) => void | Called when value changes |

Validation Props

These props are completely optional.

Use them only if you want validation behavior.

| Prop | Type | Default | Description | | --------- | ------- | ------- | ------------------------------------ | | required | boolean | false | Marks field as required | | showError | boolean | false | Displays validation error when empty |

Example

<SearchableDropdown
  label="Country"
  required
  showError={submitted}
  value={country}
  data={countries}
  onChange={setCountry}
/>

When:

required={true}
showError={true}
value=""

The component displays:

Required

and highlights the border with the error color.

Search Props

| Prop | Type | Default | | ----------- | ------- | -------- | | searchable | boolean | true | | placeholder | string | "Select" |

Example

<SearchableDropdown
  searchable={false}
  value={country}
  data={countries}
  onChange={setCountry}
/>

Create New Option

Enable users to create options that don't exist.

| Prop | Type | | ----------- | ----------------------- | | allowAddNew | boolean | | onAddNew | (value: string) => void |

Example

<SearchableDropdown
  allowAddNew
  onAddNew={(value) => {
    console.log("Create:", value);
  }}
  value={country}
  data={countries}
  onChange={setCountry}
/>

Custom Values

Allow values that are not part of the options list.

| Prop | Type | | ---------------- | ------- | | allowCustomValue | boolean |

Example

<SearchableDropdown
  allowCustomValue
  value={country}
  data={countries}
  onChange={setCountry}
/>

State Props

| Prop | Type | Default | | -------- | ------- | ------- | | disabled | boolean | false |

Example

<SearchableDropdown
  disabled
  value={country}
  data={countries}
  onChange={setCountry}
/>

Label Props

| Prop | Type | | -------- | ------- | | label | string | | required | boolean |

Example

<SearchableDropdown
  label="Country"
  required
  value={country}
  data={countries}
  onChange={setCountry}
/>

Icon Props

All icons accept any ReactNode.

| Prop | | --------- | | leftIcon | | rightIcon | | arrowIcon | | clearIcon | | addIcon |

Example

<SearchableDropdown
  leftIcon={<CountryIcon />}
  arrowIcon={<ArrowDown />}
  clearIcon={<CloseIcon />}
  value={country}
  data={countries}
  onChange={setCountry}
/>

Styling Props

| Prop | Type | | ------------ | --------- | | style | ViewStyle | | wrapperStyle | ViewStyle | | inputStyle | TextStyle |

Example

<SearchableDropdown
  style={{ marginTop: 20 }}
  wrapperStyle={{ borderRadius: 12 }}
  inputStyle={{ color: "blue" }}
  value={country}
  data={countries}
  onChange={setCountry}
/>

Theme Customization

The component supports a custom theme.

Example

<SearchableDropdown
  theme={{
    colors: {
      primary: "#2563eb",
      error: "#ef4444",
      border: "#d1d5db",
      background: "#ffffff",
      text: "#111827",
      placeholder: "#9ca3af",
      disabled: "#f3f4f6"
    }
  }}
  value={country}
  data={countries}
  onChange={setCountry}
/>

Type Definitions

interface DropdownOption {
  label: string;
  value: string;
}

TypeScript definitions are automatically available via:

import { SearchableDropdown } from "react-native-searchable-select";

Validation Behavior

Validation is fully opt-in.

No Validation

<SearchableDropdown
  value={value}
  data={data}
  onChange={setValue}
/>

With Validation

<SearchableDropdown
  required
  showError={submitted}
  value={value}
  data={data}
  onChange={setValue}
/>

This ensures consumers can decide whether the field should behave as required.

License

MIT