React Native Drop Select

A highly customizable dropdown select component for React Native.

Features

• 🎨 Themeable design with light and dark themes
• 📱 Responsive positioning (appears above or below based on available space)
• ⌨️ Keyboard aware positioning
• 🎯 Customizable styles through theme or direct props
• 💫 Smooth animations
• 🎭 Multiple variants with border support
• 🔄 Controlled selection options

Installation

npm install react-native-drop-select
# or
yarn add react-native-drop-select

Dependencies

This package requires the following dependencies:

yarn add react-native-haptic-feedback react-native-safe-area-context react-native-text-size-latest

Usage

Basic Usage

import React from "react";
import { View } from "react-native";
import DropSelect from "react-native-drop-select";

const App = () => {
  const items = [
    { label: "Option 1", value: 1 },
    { label: "Option 2", value: 2 },
    { label: "Option 3", value: 3 },
  ];

  return (
    <View style={{ padding: 20 }}>
      <DropSelect
        items={items}
        onSelect={(item) => console.log(item)}
        label="Select an option"
      />
    </View>
  );
};

export default App;

With Theme Customization

import React from "react";
import { View } from "react-native";
import DropSelect, { lightTheme, darkTheme } from "react-native-drop-select";

const App = () => {
  const items = [
    { label: "Option 1", value: 1 },
    { label: "Option 2", value: 2 },
    { label: "Option 3", value: 3 },
  ];

  // Using the light theme
  return (
    <View style={{ padding: 20 }}>
      <DropSelect
        items={items}
        onSelect={(item) => console.log(item)}
        label="Light Theme"
        theme={lightTheme}
      />

      {/* With custom theme */}
      <DropSelect
        items={items}
        onSelect={(item) => console.log(item)}
        label="Custom Theme"
        theme={{
          ...darkTheme,
          colors: {
            ...darkTheme.colors,
            primary: "#7047EB",
            buttonText: "#FFFFFF",
          },
          borders: {
            enabled: true,
          },
        }}
      />
    </View>
  );
};

export default App;

With Placeholder (No Auto-Selection)

import React from "react";
import { View } from "react-native";
import DropSelect from "react-native-drop-select";

const App = () => {
  const items = [
    { label: "Option 1", value: 1 },
    { label: "Option 2", value: 2 },
    { label: "Option 3", value: 3 },
  ];

  return (
    <View style={{ padding: 20 }}>
      <DropSelect
        items={items}
        onSelect={(item) => console.log(item)}
        label="Select an option"
        autoSelectFirst={false}
        placeholder="Choose an option..."
      />
    </View>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------ | ------------------ | -------------------------------------------- | | items | Array<{label: string, value: any}> | - | Array of items to display in the dropdown | | defaultValue | {label: string, value: any} | - | Default selected item | | onSelect | (item) => void | - | Function called when an item is selected | | label | string | - | Label text displayed above the dropdown | | containerStyle | ViewStyle | - | Style for the container | | parentRef | React.RefObject<View> | - | Reference to parent component | | fullWidth | boolean | false | Whether to take full width of parent | | fixedSize | boolean | false | Whether to calculate width based on content | | theme | ThemeType | darkTheme | Theme object for styling | | customValue | string | - | Custom text to display | | includeSelected | boolean | false | Whether to include selected item in dropdown | | disabled | boolean | false | Whether the dropdown is disabled | | height | number | - | Custom height for the dropdown button | | textStyle | TextStyle | - | Style for the button text | | labelStyle | TextStyle | - | Style for the label text | | dropdownTextStyle | TextStyle | - | Style for the dropdown text | | autoSelectFirst | boolean | true | Whether to auto-select the first item | | placeholder | string | 'Select an option' | Placeholder text when no item is selected |

License

MIT