react-native-flexiselect

react-native-flexiselect is a flexible dropdown modal component for React Native.
It supports single or multi-select, searchable options, and external additions (like emails). Perfect for forms, participant selection, and dynamic lists.

Fully typed with TypeScript and fully customizable for colors and styles.

Dropdown (./src/assest/assest4.jpg)

Features

| Feature | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------- | | Single & Multi-Select | Supports selecting one or multiple items from the list. | | Searchable Dropdown | Users can search for items in the dropdown. | | External Entries | Automatically adds external entries like emails if valid. | | Dynamic Styling | Customize colors for selected items, placeholder, input background, modal background, and tick icon. | | Lightweight & Flexible | Easy to integrate and extend in React Native apps. | | Fully Typed | TypeScript support with proper type safety for props and options. |

Installation

npm install react-native-flexiselect
# or
yarn add react-native-flexiselect

Usage

import React, { useState } from "react";
import { View } from "react-native";
import DropdownModal from "react-native-flexiselect";

const Example = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [selected, setSelected] = useState<(string | number)[]>([]);

  return (
    <View style={{ padding: 20 }}>
      <DropdownModal
        visible={isVisible}
        onClose={() => setIsVisible(false)}
        onOpen={() => setIsVisible(true)}
        title="Fruits"
        data={[
          { label: "Apple", value: "apple" },
          { label: "Banana", value: "banana" },
          { label: "Orange", value: "orange" },
        ]}
        selectedValue={selected}
        onSelect={(item) => setSelected((prev) => [...prev, item.value])}
        isMulti={true}
        primaryColor="#10B981"
        placeholderColor="#9CA3AF"
        inputBackgroundColor="#F3F4F6"
        modalBackgroundColor="#FFFFFF"
        tickColor="#EF4444"
        placeholder="Select fruits..."
      />
    </View>
  );
};

export default Example;

Props

| Prop | Type | Default | Description | | ---------------------- | ------------------------------------------ | ----------------- | ---------------------------------------------------------- | | visible | boolean | — | Controls modal visibility. | | onClose | () => void | — | Callback when modal is closed. | | onOpen | () => void | — | Callback when modal is opened. | | title | string | — | Title of the dropdown. | | data | DropdownOption[] | — | Array of options with { label, value, key?, external? }. | | selectedValue | string \| number \| (string \| number)[] | — | Currently selected value(s). | | onSelect | (item: DropdownOption) => void | — | Callback when an option is selected. | | isMulti | boolean | false | Enables multi-select mode. | | placeholder | string | "Select option" | Placeholder text shown when nothing is selected. | | primaryColor | string | #4F46E5 | Main accent color for selected text & tick. | | placeholderColor | string | #9CA3AF | Placeholder text color. | | inputBackgroundColor | string | #fff | Background color of the input box. | | modalBackgroundColor | string | #fff | Background color of the modal container. | | tickColor | string | primaryColor | Color of the check/tick icon. | | |

                 ```