@rn-components-dropdown/dropdown 1.0.2 → 1.0.4

package/README.md

@@ -1,118 +1,146 @@
 # @rn-components-dropdown/dropdown
 
-A lightweight and customizable dropdown component for React Native. Includes a flexible `Dropdown` component and a simple `AppText` component.
+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**.
 
 ---
 
-## 🚀 Installation
+## 📦 Installation
 
-Install the package using npm or yarn:
+### Install Package
 
 ```bash
 npm install @rn-components-dropdown/dropdown
 ```
 
-or
+### React Hook Form (optional — required only for DropdownController)
 
 ```bash
-yarn add @rn-components-dropdown/dropdown
+npm install react-hook-form
 ```
 
 ---
 
-## 📦 Importing Components
+## ✨ Components Provided
 
-```js
-import { Dropdown, AppText } from '@rn-components-dropdown/dropdown';
-```
+This package includes two components:
 
----
+### 🔹 Dropdown  
+A standalone dropdown with:
+- Single or multi selection  
+- Custom icons  
+- Full styling customization  
+- Works independently  
 
-## 🧩 Usage Example
+### 🔹 DropdownController  
+A wrapper designed for **React Hook Form**, handling form values automatically.
 
-```jsx
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { Dropdown, AppText } from '@rn-components-dropdown/dropdown';
+---
 
-export default function App() {
-  const [value, setValue] = useState(null);
+# 🔽 Dropdown Usage
 
-  const data = [
-    { label: 'Apple', value: 1 },
-    { label: 'Banana', value: 2 },
-    { label: 'Mango', value: 3 },
-  ];
+```tsx
+import { Dropdown } from "@rn-components-dropdown/dropdown";
 
+export default function MyScreen() {
   return (
-    <View style={{ padding: 20 }}>
-      <AppText>Choose a fruit:</AppText>
-
-      <Dropdown
-        data={data}
-        labelField="label"
-        valueField="value"
-        value={value}
-        onChange={(item) => setValue(item.value)}
-        placeholder="Select item"
-      />
-    </View>
+    <Dropdown
+      data={[
+        { id: 1, label: "Apple" },
+        { id: 2, label: "Banana" },
+      ]}
+      labelField="label"
+      valueField="id"
+      placeholder="Select fruit"
+    />
   );
 }
 ```
 
 ---
 
-## 🛠️ Dropdown Props
-
-| Prop            | Type       | Default         | Description                                           |
-| --------------- | ---------- | --------------- | ----------------------------------------------------- |
-| `data`          | `array`    | `[]`            | The list of options for the dropdown.                 |
-| `labelField`    | `string`   | `'label'`       | The key in each data object for displaying the label. |
-| `valueField`    | `string`   | `'value'`       | The key used as the selected value.                   |
-| `value`         | `any`      | `null`          | The selected value.                                   |
-| `placeholder`   | `string`   | `'Select item'` | Placeholder text.                                     |
-| `onChange`      | `function` | `() => {}`      | Callback when a value is selected.                    |
-| `style`         | `object`   | `{}`            | Custom style for the dropdown container.              |
-| `textStyle`     | `object`   | `{}`            | Custom style for the selected text.                   |
-| `dropdownStyle` | `object`   | `{}`            | Style for the dropdown list.                          |
+# 🔧 Dropdown Props
+
+| Prop              | Type                    | Description                                      |
+|-------------------|-------------------------|--------------------------------------------------|
+| data              | Array<any>             | 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                                  |
 
 ---
 
-## ✨ Features
+# 🎯 DropdownController (React Hook Form Support)
 
-* Fully customizable dropdown UI
-* Simple API
-* Works with any React Native project
-* Includes reusable `AppText` component
+A form-friendly dropdown that automatically:
+- updates values  
+- handles errors  
+- applies validation rules  
 
 ---
 
-## 📄 AppText Component
+## 📘 Usage with React Hook Form
 
-A simple wrapper around the standard `Text` component.
+```tsx
+import { useForm } from "react-hook-form";
+import { DropdownController } from "@rn-components-dropdown/dropdown";
 
-### Usage
+export default function FormScreen() {
+  const { control } = useForm();
 
-```jsx
-<AppText style={{ fontSize: 18 }}>Hello World</AppText>
+  return (
+    <DropdownController
+      control={control}
+      name="fruit"
+      rules={{ required: "Please select a fruit" }}
+      dropProps={{
+        data: [
+          { id: 1, label: "Apple" },
+          { id: 2, label: "Banana" },
+        ],
+        labelField: "label",
+        valueField: "id",
+        placeholder: "Pick a fruit",
+      }}
+    />
+  );
+}
 ```
 
-### Props
+---
+
+## 🧩 DropdownController Props
 
-| Prop       | Type     | Description    |                        |
-| ---------- | -------- | -------------- | ---------------------- |
-| `children` | `string  | ReactNode`     | Text content to render |
-| `style`    | `object` | Custom styling |                        |
+| Prop          | Type        | Description                                   |
+|---------------|-------------|-----------------------------------------------|
+| control       | Control     | React Hook Form control object                |
+| name          | string      | Field name in the form                        |
+| rules         | object      | Validation rules (optional)                   |
+| dropProps     | object      | All dropdown props                             |
+| defaultValue  | any         | Initial/default value                          |
 
 ---
 
-## 📚 Contributing
+## 📝 Notes
 
-Pull requests are welcome! If you want to improve the package, create an issue or PR.
+- Works on **iOS** and **Android**
+- Supports **custom icons**, SVG or any JSX via `renderIcon`
+- Fully customizable styles
+- TypeScript supported
 
 ---
 
-## 🪪 License
+## 📄 License
 
-MIT © 2025 @rn-components-dropdown
+MIT

package/dist/components/dropdown/Dropdown.js

@@ -75,7 +75,7 @@ const DropdownComponent = (props) => {
             </AppText_1.default>) : (<react_native_1.View style={styles.showMultiSelectContainer}>
               <react_native_1.ScrollView showsVerticalScrollIndicator={false}>
                 <react_native_1.View style={styles.wraps}>
-                  {currentValue?.map?.((i) => (<Chip_1.default label={i.name} chipColor={'red'} textColor={'white'} key={i?.[valueField]} onClearPress={() => onClearPress(i)}/>))}
+                  {currentValue?.map?.((i) => (<Chip_1.default chipColor={'red'} textColor={'white'} key={i?.[valueField]} label={i?.[labelField]} onClearPress={() => onClearPress(i)}/>))}
                 </react_native_1.View>
               </react_native_1.ScrollView>
             </react_native_1.View>)}

package/dist/index.d.ts

@@ -1,5 +1,2 @@
-export { default as AppText } from './components/text/AppText';
 export { default as Dropdown } from './components/dropdown/Dropdown';
-export { default as TextInput } from './components/textInput/AppTextInput';
 export { default as DropdownController } from './controller/dropDownController/DropdownController';
-export { default as TextInputController } from './controller/textInputController/AppTextInputController';

package/dist/index.js

@@ -3,14 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInputController = exports.DropdownController = exports.TextInput = exports.Dropdown = exports.AppText = void 0;
-var AppText_1 = require("./components/text/AppText");
-Object.defineProperty(exports, "AppText", { enumerable: true, get: function () { return __importDefault(AppText_1).default; } });
+exports.DropdownController = exports.Dropdown = void 0;
 var Dropdown_1 = require("./components/dropdown/Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
-var AppTextInput_1 = require("./components/textInput/AppTextInput");
-Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(AppTextInput_1).default; } });
 var DropdownController_1 = require("./controller/dropDownController/DropdownController");
 Object.defineProperty(exports, "DropdownController", { enumerable: true, get: function () { return __importDefault(DropdownController_1).default; } });
-var AppTextInputController_1 = require("./controller/textInputController/AppTextInputController");
-Object.defineProperty(exports, "TextInputController", { enumerable: true, get: function () { return __importDefault(AppTextInputController_1).default; } });

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Daynight-Himmat/react-components.git"
+  },
   "scripts": {
     "build": "tsc",
     "patch": "npm version patch",

package/src/components/dropdown/Dropdown.tsx

@@ -138,10 +138,10 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
                 <View style={styles.wraps}>
                   {currentValue?.map?.((i: any) => (
                     <Chip
-                      label={i.name}
                       chipColor={'red'}
                       textColor={'white'}
                       key={i?.[valueField]}
+                      label={i?.[labelField]}
                       onClearPress={() => onClearPress(i)}
                     />
                   ))}

package/src/index.ts

@@ -1,5 +1,2 @@
-export { default as AppText } from './components/text/AppText';
 export { default as Dropdown } from './components/dropdown/Dropdown';
-export { default as TextInput } from './components/textInput/AppTextInput';
-export { default as DropdownController }from './controller/dropDownController/DropdownController';
-export { default as TextInputController } from './controller/textInputController/AppTextInputController';
+export { default as DropdownController }from './controller/dropDownController/DropdownController';

package/dist/controller/textInputController/AppTextInputController.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { AppTextProps } from '../../components/textInput/AppTextInput';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { Control, FieldValues, Path } from 'react-hook-form';
-interface Props<T extends FieldValues> extends AppTextProps {
-    textStyle?: TextStyle;
-    controllerName: Path<T>;
-    containerStyle?: ViewStyle;
-    control: Control<T> | undefined;
-    labelStyle?: StyleProp<TextStyle>;
-}
-declare const AppTextControlInput: <T extends FieldValues>({ control, textStyle, labelStyle, controllerName, containerStyle, ...rest }: Props<T>) => React.JSX.Element;
-export default AppTextControlInput;

package/dist/controller/textInputController/AppTextInputController.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const AppTextInput_1 = __importDefault(require("../../components/textInput/AppTextInput"));
-const InputControllerStyle_1 = require("./InputControllerStyle");
-const react_hook_form_1 = require("react-hook-form");
-const AppTextControlInput = ({ control, textStyle, labelStyle, controllerName, containerStyle, ...rest }) => {
-    const { styles } = (0, InputControllerStyle_1.useInputController)();
-    return (<react_hook_form_1.Controller control={control} name={controllerName} render={({ fieldState: { error }, field: { onChange, value, onBlur }, }) => (<AppTextInput_1.default value={value} onBlur={onBlur} error={error?.message} onChangeText={onChange} textStyle={[styles.inputText, textStyle]} labelStyle={[styles.labelText, labelStyle]} style={[styles.inputControlContainer, containerStyle]} {...rest}/>)}/>);
-};
-exports.default = AppTextControlInput;

package/dist/controller/textInputController/InputControllerStyle.d.ts

@@ -1,31 +0,0 @@
-export declare const useInputController: () => {
-    styles: {
-        labelText: {
-            color: string;
-        };
-        inputControlContainer: {
-            height: number;
-            borderWidth: number;
-            borderRadius: number;
-            alignItems: "center";
-            marginVertical: number;
-            borderColor: string;
-        };
-        inputText: {
-            color: string;
-        };
-    };
-    colors: {
-        blue: string;
-        gray: string;
-        error: string;
-        green: string;
-        white: string;
-        black: string;
-        primary: string;
-        lightGray: string;
-        grayishBlue: string;
-        red: string;
-        border: string;
-    };
-};

package/dist/controller/textInputController/InputControllerStyle.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInputController = void 0;
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const style_1 = require("../../style");
-const useInputController = () => {
-    const { ...colors } = style_1.LIGHT_COLORS;
-    const styles = (0, react_1.useMemo)(() => {
-        return react_native_1.StyleSheet.create({
-            labelText: {
-                color: colors.gray,
-            },
-            inputControlContainer: {
-                height: 48,
-                borderWidth: 1,
-                borderRadius: 6,
-                alignItems: 'center',
-                marginVertical: style_1.SPACING.s2,
-                borderColor: colors.border,
-            },
-            inputText: {
-                color: colors.black,
-            },
-        });
-    }, [colors]);
-    return { styles, colors };
-};
-exports.useInputController = useInputController;

package/src/controller/textInputController/AppTextInputController.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import AppTextInput, {
-  AppTextProps,
-} from '../../components/textInput/AppTextInput';
-import { useInputController } from './InputControllerStyle';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { Controller, Control, FieldValues, Path } from 'react-hook-form';
-
-interface Props<T extends FieldValues> extends AppTextProps {
-  textStyle?: TextStyle;
-  controllerName: Path<T>;
-  containerStyle?: ViewStyle;
-  control: Control<T> | undefined;
-  labelStyle?: StyleProp<TextStyle>;
-}
-
-const AppTextControlInput = <T extends FieldValues>({
-  control,
-  textStyle,
-  labelStyle,
-  controllerName,
-  containerStyle,
-  ...rest
-}: Props<T>) => {
-  const { styles } = useInputController();
-
-  return (
-    <Controller
-      control={control}
-      name={controllerName}
-      render={({
-        fieldState: { error },
-        field: { onChange, value, onBlur },
-      }) => (
-        <AppTextInput
-          value={value}
-          onBlur={onBlur}
-          error={error?.message}
-          onChangeText={onChange}
-          textStyle={[styles.inputText, textStyle]}
-          labelStyle={[styles.labelText, labelStyle]}
-          style={[styles.inputControlContainer, containerStyle]}
-          {...rest}
-        />
-      )}
-    />
-  );
-};
-
-export default AppTextControlInput;

package/src/controller/textInputController/InputControllerStyle.ts

@@ -1,28 +0,0 @@
-import { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { LIGHT_COLORS, SPACING } from '../../style';
-
-export const useInputController = () => {
-  const { ...colors } = LIGHT_COLORS;
-
-  const styles = useMemo(() => {
-    return StyleSheet.create({
-      labelText: {
-        color: colors.gray,
-      },
-      inputControlContainer: {
-        height: 48,
-        borderWidth: 1,
-        borderRadius: 6,
-        alignItems: 'center',
-        marginVertical: SPACING.s2,
-        borderColor: colors.border,
-      },
-      inputText: {
-        color: colors.black,
-      },
-    });
-  }, [colors]);
-
-  return { styles, colors };
-};