React-native-drop-select NPM

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

react-native-safe-area-context react-native-text-size-latest

1.0.1

8 months ago

1.0.0

8 months ago