rn-dropdown-select

A lightweight, customizable dropdown selector component for React Native built with pure React Native components - no external UI library dependencies required.

Features

• 🎨 Zero external UI dependencies - Built with pure React Native components
• 🎯 TypeScript support - Fully typed with TypeScript
• 🌓 Theme support - Built-in light/dark theme with customization options
• ♿ Accessible - Follows React Native accessibility best practices
• 📱 Cross-platform - Works on iOS, Android, and Web
• 🎛️ Customizable - Extensive styling and theming options
• 🔄 React Hook Form compatible - Easy integration with form libraries

Installation

npm install rn-dropdown-select
# or
yarn add rn-dropdown-select
# or
pnpm add rn-dropdown-select

Basic Usage

import React, { useState } from "react";
import { View } from "react-native";
import { DropdownSelector, DropdownOption } from "rn-dropdown-select";

const options: DropdownOption[] = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
  { value: "3", label: "Option 3" },
];

export default function App() {
  const [value, setValue] = useState<string>();

  return (
    <View style={{ padding: 20 }}>
      <DropdownSelector
        value={value}
        onValueChange={setValue}
        options={options}
        label="Select an option"
        placeholder="Choose..."
      />
    </View>
  );
}

Usage with React Hook Form

import React from "react";
import { useForm, Controller } from "react-hook-form";
import { DropdownSelector, DropdownOption } from "rn-dropdown-select";

const options: DropdownOption[] = [
  { value: "1", label: "Option 1" },
  { value: "2", label: "Option 2" },
];

interface FormData {
  selection: string;
}

export default function FormExample() {
  const { control, handleSubmit } = useForm<FormData>();

  return (
    <Controller
      control={control}
      name="selection"
      render={({ field: { onChange, value }, fieldState: { error } }) => (
        <DropdownSelector
          value={value}
          onValueChange={onChange}
          options={options}
          label="Select"
          error={!!error}
          errorMessage={error?.message}
        />
      )}
    />
  );
}

Props

DropdownSelector

| Prop | Type | Default | Description | | --------------- | ------------------------------ | ------------------ | ----------------------------------------------- | | value | string \| undefined | - | Selected value | | onValueChange | (value: string) => void | - | Callback when value changes | | options | readonly DropdownOption[] | - | Array of options | | label | string \| undefined | - | Label text (shown above input in outlined mode) | | placeholder | string | "Seleccionar..." | Placeholder text | | error | boolean | false | Show error state | | errorMessage | string \| undefined | - | Error message text | | disabled | boolean | false | Disable the selector | | mode | "outlined" \| "flat" | "flat" | Input style mode | | theme | DropdownTheme \| undefined | - | Custom theme object | | style | ViewStyle \| undefined | - | Container style | | inputStyle | ViewStyle \| undefined | - | Input container style | | textStyle | TextStyle \| undefined | - | Text input style | | labelStyle | TextStyle \| undefined | - | Label text style | | errorStyle | TextStyle \| undefined | - | Error message style | | iconComponent | React.ReactNode \| undefined | - | Custom icon component |

DropdownOption

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

Theming

The component includes built-in light and dark themes. You can customize the theme by passing a theme prop:

import { DropdownSelector, DropdownTheme } from "rn-dropdown-select";

const customTheme: DropdownTheme = {
  colors: {
    background: "#ffffff",
    backgroundSelected: "#f0f0f0",
    text: "#000000",
    textSelected: "#000000",
    textDisabled: "#999999",
    border: "#cccccc",
    borderFocused: "#007AFF",
    borderError: "#ff0000",
    errorText: "#ff0000",
    placeholder: "#999999",
    shadow: "#000000",
    icon: "#666666",
    iconDisabled: "#cccccc",
  },
};

<DropdownSelector
  theme={customTheme}
  // ... other props
/>;

Or use the useDropdownTheme hook:

import { useDropdownTheme } from "rn-dropdown-select";

const theme = useDropdownTheme({ mode: "dark" });

Advanced Usage

Custom Icon

import { Ionicons } from "@expo/vector-icons";

<DropdownSelector
  iconComponent={<Ionicons name="chevron-down" size={20} color="#666" />}
  // ... other props
/>;

Accessing Sub-components

For advanced use cases, you can use the sub-components directly:

import { OptionsList, SelectorItem } from "rn-dropdown-select";

Requirements

• React >= 16.8.0
• React Native >= 0.70.0

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.