@rn-components-dropdown/dropdown 1.0.14 → 1.0.16

package/README.md

@@ -3,6 +3,13 @@
 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
+
+![Single Selection](./assets/images/single_select.png)
+![Multi Selection](./assets/images/multi_select.png)
+
+
 ---
 
 ## 📦 Installation

package/dist/assets/svg/ArrowDown.d.ts

@@ -1,6 +1,4 @@
 import React from "react";
-declare const ArrowDown: ({ size, color }: {
-    size?: number | undefined;
-    color?: string | undefined;
-}) => React.JSX.Element;
+import { SvgInterface } from "../../interface/svg.interface";
+declare const ArrowDown: ({ size, color }: SvgInterface) => React.JSX.Element;
 export default ArrowDown;

package/dist/components/dropdown/DropdownStyle.d.ts

@@ -1,7 +1,8 @@
+import { ColorValue } from 'react-native';
 interface Props {
     size?: number;
-    radioIconColor?: string;
-    checkIconColor?: string;
+    radioIconColor?: ColorValue;
+    checkIconColor?: ColorValue;
 }
 export declare const useDropdownStyle: (props: Props) => {
     styles: {
@@ -97,13 +98,13 @@ export declare const useDropdownStyle: (props: Props) => {
             alignItems: "center";
             justifyContent: "center";
             padding: number;
-            borderColor: string;
+            borderColor: ColorValue;
         };
         iconSubContainer: {
             width: "100%";
             height: "100%";
             borderRadius: number;
-            backgroundColor: string;
+            backgroundColor: ColorValue;
         };
         styleHorizontal: {
             width: number | "100%";
@@ -121,7 +122,7 @@ export declare const useDropdownStyle: (props: Props) => {
             height: number;
             alignItems: "center";
             justifyContent: "center";
-            borderColor: string;
+            borderColor: ColorValue;
         };
         showMultiSelectContainer: {
             width: "90%";

package/dist/components/dropdown/interface/ChipInterface.d.ts

@@ -1,8 +1,8 @@
 import { ColorValue } from "react-native";
 export interface ChipInterface {
     label?: string;
-    onClearPress?: () => void;
     chipColor?: ColorValue;
     textColor?: ColorValue;
+    onClearPress?: () => void;
     clearIcon?: React.JSX.Element;
 }

package/dist/components/dropdown/interface/DropdownInterface.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, TextStyle, ViewStyle, TextProps, ImageStyle, FlatListProps } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle, TextProps, ImageStyle, FlatListProps, ColorValue } from 'react-native';
 import { ChipInterface } from './ChipInterface';
 export type IDropdownRef = {
     open: () => void;
@@ -13,7 +13,6 @@ export type DropdownProps<S, T extends SelectionType> = {
     disable?: boolean;
     selectionType?: T;
     maxHeight?: number;
-    iconColor?: string;
     minHeight?: number;
     inverted?: boolean;
     fontFamily?: string;
@@ -23,18 +22,19 @@ export type DropdownProps<S, T extends SelectionType> = {
     placeholder?: string;
     onFocus?: () => void;
     autoScroll?: boolean;
-    activeColor?: string;
     searchField?: keyof S;
+    iconColor?: ColorValue;
     value?: S[] | undefined;
-    checkIconColor?: string;
-    radioIconColor?: string;
+    activeColor?: ColorValue;
     itemTestIDField?: string;
-    backgroundColor?: string;
     keyboardAvoiding?: boolean;
     searchPlaceholder?: string;
     label?: string | undefined;
+    checkIconColor?: ColorValue;
+    radioIconColor?: ColorValue;
     confirmSelectItem?: boolean;
     accessibilityLabel?: string;
+    backgroundColor?: ColorValue;
     style?: StyleProp<ViewStyle>;
     selectedTextProps?: TextProps;
     subfixIcon?: React.JSX.Element;

package/dist/controller/dropDownController/DropdownController.js

@@ -14,10 +14,10 @@ const AppDropdownController = (props) => {
     const { styles } = (0, DropdownControllerStyle_1.useDropdownControllerStyle)();
     return (<react_hook_form_1.Controller control={control} name={controller} render={({ fieldState: { error }, field: { onBlur, onChange, value }, }) => (<react_native_1.View style={styles.mainContainer}>
           <Dropdown_1.default data={data} value={value} label={label} onBlur={onBlur} onChange={(selectValue, selectedItem) => {
-                if (selectionType === 'single') {
-                    return onChange(selectValue);
+                if (selectionType === 'multi') {
+                    return onChange(selectedItem);
                 }
-                return onChange(selectedItem);
+                return onChange(selectValue);
             }} labelField={labelField} valueField={valueField} placeholder={placeholder} selectionType={selectionType} containerStyle={containerStyle} labelTextStyle={styles.labelText} itemTextStyle={styles.dropdownText} placeholderStyle={styles.itemContainer} selectedTextStyle={styles.selectionText} style={[styles.dropdownContainer, error && styles.errorWrapper]} {...rest}/>
           {error && <AppText_1.default style={styles.error}>{error?.message}</AppText_1.default>}
         </react_native_1.View>)}/>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -15,12 +15,14 @@
   },
   "keywords": [
     "react",
+    "dropdown",
     "react-native",
+    "rn-components",
     "react-components"
   ],
-  "author": "",
-  "license": "ISC",
-  "description": "",
+  "author": "Himmat Suthar",
+  "license": "MIT",
+  "description": "Package use for dropdown for single and multi selection with radio and checkbox",
   "devDependencies": {
     "@types/lodash": "^4.17.20",
     "@types/react": "^19.2.2",

package/src/assets/svg/ArrowDown.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Svg, { Path, Mask, Rect, G } from "react-native-svg";
+import { SvgInterface } from "../../interface/svg.interface";
 
-const ArrowDown = ({ size = 16, color = "black" }) => (
+const ArrowDown = ({ size = 16, color = "black" }: SvgInterface) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Mask
       id="mask0_2371_2505"

package/src/components/dropdown/DropdownStyle.ts

@@ -5,13 +5,13 @@ import {
   DEFAULT_COLORS,
 } from '../../style';
 import { useMemo } from 'react';
-import { I18nManager, StyleSheet } from 'react-native';
+import { ColorValue, I18nManager, StyleSheet } from 'react-native';
 import { useDeviceOrientation } from './hooks/useOrientation';
 
 interface Props {
   size?: number;
-  radioIconColor?: string;
-  checkIconColor?: string;
+  radioIconColor?: ColorValue;
+  checkIconColor?: ColorValue;
 }
 
 export const useDropdownStyle = (props: Props) => {

package/src/components/dropdown/interface/ChipInterface.ts

@@ -1,10 +1,9 @@
 import { ColorValue } from "react-native";
 
-
 export interface ChipInterface {
   label?: string;
-  onClearPress?: () => void;
   chipColor?: ColorValue;
   textColor?: ColorValue;
+  onClearPress?: () => void;
   clearIcon?: React.JSX.Element;
 }

package/src/components/dropdown/interface/DropdownInterface.ts

@@ -6,6 +6,7 @@ import type {
   TextProps,
   ImageStyle,
   FlatListProps,
+  ColorValue,
 } from 'react-native';
 import { ChipInterface } from './ChipInterface';
 
@@ -23,7 +24,6 @@ export type DropdownProps<S, T extends SelectionType> = {
   disable?: boolean;
   selectionType?: T;
   maxHeight?: number;
-  iconColor?: string;
   minHeight?: number;
   inverted?: boolean;
   fontFamily?: string;
@@ -33,18 +33,19 @@ export type DropdownProps<S, T extends SelectionType> = {
   placeholder?: string;
   onFocus?: () => void;
   autoScroll?: boolean;
-  activeColor?: string;
   searchField?: keyof S;
+  iconColor?: ColorValue;
   value?: S[] | undefined;
-  checkIconColor?: string;
-  radioIconColor?: string;
+  activeColor?: ColorValue;
   itemTestIDField?: string;
-  backgroundColor?: string;
   keyboardAvoiding?: boolean;
   searchPlaceholder?: string;
   label?: string | undefined;
+  checkIconColor?: ColorValue;
+  radioIconColor?: ColorValue;
   confirmSelectItem?: boolean;
   accessibilityLabel?: string;
+  backgroundColor?: ColorValue;
   style?: StyleProp<ViewStyle>;
   selectedTextProps?: TextProps;
   subfixIcon?: React.JSX.Element;

package/src/controller/dropDownController/DropdownController.tsx

@@ -54,10 +54,10 @@ const AppDropdownController = <
             label={label}
             onBlur={onBlur}
             onChange={(selectValue: any, selectedItem: any) => {
-              if (selectionType === 'single') {
-                return onChange(selectValue);
+              if (selectionType === 'multi') {
+                return onChange(selectedItem);
               }
-              return onChange(selectedItem);
+              return onChange(selectValue);
             }}
             labelField={labelField}
             valueField={valueField}

package/src/style/index.ts

@@ -1,7 +1,7 @@
 export * from './colors';
 export * from './spacing';
 export * from './shadow';
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions } from 'react-native';
 
 export const SCREEN_WIDTH = Dimensions.get('window').width;
 export const SCREEN_HEIGHT = Dimensions.get('window').height;