@rn-components-dropdown/dropdown

A lightweight, customizable, and fully typed Dropdown and DropdownController component for React Native.
Supports single & multiple selection, custom icons, styling, and easy integration with React Hook Form.

---

Example

---

📦 Installation

$3

``bash title="install.sh" copy
npm install @rn-components-dropdown/dropdown
`

$3

`bash title="install.sh" copy
npm install react-hook-form
`

---

✨ Components Provided

This package includes two components:

$3

`tsx
import { Dropdown } from "@rn-components-dropdown/dropdown";

export default function MyScreen() {
return (
data={[
{ id: 1, label: "Apple" },
{ id: 2, label: "Banana" },
]}
labelField="label"
valueField="id"
placeholder="Select fruit"
/>
);
}
`

---

🔧 Dropdown Props

| Prop | Type | Description |
|-------------------|-------------------------|--------------------------------------------------|
| data | Array | List of dropdown items |
| labelField | string | Key used for item label |
| valueField | string | Key used for item value |
| value | any | Current selected item/value |
| placeholder | string | Placeholder text |
| multiple | boolean | Enable multi-select |
| onChange | (item) => void | Callback when value changes |
| disable | boolean | Disable the dropdown |
| renderIcon | () => JSX.Element | Custom icon renderer |
| style | ViewStyle | Wrapper container style |
| selectedStyle | ViewStyle | Style for selected value display |
| dropdownStyle | ViewStyle | Dropdown list container style |
| placeholderStyle | TextStyle | Style for placeholder text |
| itemStyle | ViewStyle | Style for each dropdown item |
| ...others | any | Additional props |

---

🎯 DropdownController (React Hook Form Support)

A form-friendly dropdown that automatically:
- updates values
- handles errors
- applies validation rules

---

📘 Usage with React Hook Form

`tsx
import { useForm } from "react-hook-form";
import { DropdownController } from "@rn-components-dropdown/dropdown";

export default function FormScreen() {
const { control } = useForm();

return (
control={control}
controller="fruit"
dropProps={{
data: [
{ id: 1, label: "Apple" },
{ id: 2, label: "Banana" },
],
labelField: "label",
valueField: "id",
placeholder: "Pick a fruit",
}}
/>
);
}
`

---

🧩 DropdownController Props

| Prop | Type | Description |
|---------------|-------------|-----------------------------------------------|
| control | Control | React Hook Form control object |
| controller | string | Field name in the form |
| rules | object | Validation rules (optional) |
| dropProps | object | All dropdown props |
| defaultValue | any | Initial/default value |

---

📝 Notes

- Works on iOS and Android
- Supports custom icons, SVG or any JSX via renderIcon`
- Fully customizable styles
- TypeScript supported

---

📄 License

MIT