@rn-components-dropdown/dropdown 1.0.4 → 1.0.6

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

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

package/dist/assets/svg/ArrowDown.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 react_native_svg_1 = __importStar(require("react-native-svg"));
+const ArrowDown = ({ size = 24, color = "black" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Mask id="mask0_2371_2505" maskUnits="userSpaceOnUse" x={0} y={0} width={24} height={24}>
+      <react_native_svg_1.Rect width={24} height={24} rx={1} fill="#fff"/>
+    </react_native_svg_1.Mask>
+    <react_native_svg_1.G mask="url(#mask0_2371_2505)">
+      <react_native_svg_1.Path d="M12.7071 14.6929C12.3166 15.0834 11.6834 15.0834 11.2929 14.6929L6.7 10.1C6.3134 9.7134 6.3134 9.0866 6.7 8.7C7.0866 8.3134 7.7134 8.3134 8.1 8.7L11.2929 11.8929C11.6834 12.2834 12.3166 12.2834 12.7071 11.8929L15.9 8.7C16.2866 8.3134 16.9134 8.3134 17.3 8.7C17.6866 9.0866 17.6866 9.7134 17.3 10.1L12.7071 14.6929Z" fill={color}/>
+    </react_native_svg_1.G>
+  </react_native_svg_1.default>);
+exports.default = ArrowDown;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { SvgInterface } from "../../interface/svg.interface";
+declare const ArrowUp: ({ size, color }: SvgInterface) => React.JSX.Element;
+export default ArrowUp;

package/dist/assets/svg/ArrowUp.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 react_native_svg_1 = __importStar(require("react-native-svg"));
+const ArrowUp = ({ size = 24, color = "#1C1B1F" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Mask id="mask0_2375_2500" maskUnits="userSpaceOnUse" x={0} y={0} width={24} height={24}>
+      <react_native_svg_1.Rect x={24} y={24} width={24} height={24} rx={1} transform="rotate(-180 24 24)" fill={color}/>
+    </react_native_svg_1.Mask>
+    <react_native_svg_1.G mask="url(#mask0_2375_2500)">
+      <react_native_svg_1.Path d="M11.2929 9.30711C11.6834 8.91658 12.3166 8.91658 12.7071 9.30711L17.3 13.9C17.6866 14.2866 17.6866 14.9134 17.3 15.3C16.9134 15.6866 16.2866 15.6866 15.9 15.3L12.7071 12.1071C12.3166 11.7166 11.6834 11.7166 11.2929 12.1071L8.1 15.3C7.7134 15.6866 7.0866 15.6866 6.7 15.3C6.3134 14.9134 6.3134 14.2866 6.7 13.9L11.2929 9.30711Z" fill={color}/>
+    </react_native_svg_1.G>
+  </react_native_svg_1.default>);
+exports.default = ArrowUp;

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

@@ -0,0 +1,3 @@
+import { SvgInterface } from "../../interface/svg.interface";
+declare const CheckIcon: ({ size, color }: SvgInterface) => import("react").JSX.Element;
+export default CheckIcon;

package/dist/assets/svg/CheckIcon.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const CheckIcon = ({ size, color }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 17 12" fill={color}>
+    <react_native_svg_1.Path d="M7.27431 11.4818C6.88907 11.8992 6.23401 11.9123 5.8324 11.5106L0.292433 5.97067C-0.104655 5.57358 -0.0969935 4.92745 0.309397 4.53989L0.9927 3.88825C1.38569 3.51347 2.00596 3.52082 2.38995 3.90481L5.3544 6.86927C5.70921 7.22407 6.27201 7.261 6.67014 6.95561L15.5294 0.160008C15.8378 -0.0765669 16.2738 -0.0479552 16.5487 0.226898C16.84 0.518236 16.8523 0.986646 16.5767 1.29289L12.5684 5.7466L7.27431 11.4818Z"/>
+  </react_native_svg_1.default>);
+exports.default = CheckIcon;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { SvgInterface } from "../../interface/svg.interface";
+declare const ClearIcon: ({ size, color }: SvgInterface) => React.JSX.Element;
+export default ClearIcon;

package/dist/assets/svg/ClearIcon.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 react_native_svg_1 = __importStar(require("react-native-svg"));
+const ClearIcon = ({ size, color }) => <react_native_svg_1.default width={size} height={size} viewBox="0 0 10 10" fill={color}>
+    <react_native_svg_1.Path d="M1.68984 8.86566C1.30324 9.25226 0.676443 9.25226 0.289844 8.86566C-0.0967558 8.47906 -0.0967556 7.85226 0.289844 7.46566L2.30288 5.45263C2.79223 4.96327 2.79085 4.16944 2.29979 3.68179L0.293503 1.68943C-0.0947195 1.30391 -0.0958139 0.676318 0.291063 0.289441C0.676989 -0.0964853 1.3027 -0.0964852 1.68862 0.289441L3.70288 2.30369C4.19223 2.79305 4.98607 2.79167 5.47372 2.30061L7.46729 0.293096C7.85214 -0.0944518 8.47864 -0.0955442 8.86484 0.29066C9.25105 0.676864 9.24996 1.30336 8.86241 1.68822L6.8549 3.68179C6.36384 4.16944 6.36245 4.96327 6.85181 5.45263L8.86606 7.46688C9.25199 7.85281 9.25199 8.47851 8.86606 8.86444C8.47919 9.25132 7.8516 9.25022 7.46607 8.862L5.47372 6.85571C4.98607 6.36465 4.19223 6.36327 3.70288 6.85263L1.68984 8.86566Z"/>
+  </react_native_svg_1.default>;
+exports.default = ClearIcon;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { SvgInterface } from "../../interface/svg.interface";
+declare const SearchIcon: ({ size, color }: SvgInterface) => React.JSX.Element;
+export default SearchIcon;

package/dist/assets/svg/SearchIcon.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 react_native_svg_1 = __importStar(require("react-native-svg"));
+const SearchIcon = ({ size = 24, color = "#1C1B1F" }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 18 18" fill={color}>
+    <react_native_svg_1.Path d="M17.3 17.3C16.9134 17.6866 16.2866 17.6866 15.9 17.3L11.6989 13.0989C10.9025 12.3025 9.63504 12.2695 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.2695 9.63504 12.3025 10.9025 13.0989 11.6989L17.3 15.9C17.6866 16.2866 17.6866 16.9134 17.3 17.3ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z"/>
+  </react_native_svg_1.default>);
+exports.default = SearchIcon;

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

@@ -0,0 +1,4 @@
+export { default as ArrowUp } from './ArrowUp';
+export { default as ArrowDown } from './ArrowDown';
+export { default as ClearIcon } from './ClearIcon';
+export { default as SearchIcon } from './SearchIcon';

package/dist/assets/svg/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchIcon = exports.ClearIcon = exports.ArrowDown = exports.ArrowUp = void 0;
+var ArrowUp_1 = require("./ArrowUp");
+Object.defineProperty(exports, "ArrowUp", { enumerable: true, get: function () { return __importDefault(ArrowUp_1).default; } });
+var ArrowDown_1 = require("./ArrowDown");
+Object.defineProperty(exports, "ArrowDown", { enumerable: true, get: function () { return __importDefault(ArrowDown_1).default; } });
+var ClearIcon_1 = require("./ClearIcon");
+Object.defineProperty(exports, "ClearIcon", { enumerable: true, get: function () { return __importDefault(ClearIcon_1).default; } });
+var SearchIcon_1 = require("./SearchIcon");
+Object.defineProperty(exports, "SearchIcon", { enumerable: true, get: function () { return __importDefault(SearchIcon_1).default; } });

package/dist/components/dropdown/Dropdown.js

@@ -37,21 +37,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react-hooks/exhaustive-deps */
-const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const lodash_1 = __importDefault(require("lodash"));
 const AppText_1 = __importDefault(require("../text/AppText"));
 const Chip_1 = __importDefault(require("./components/chip/Chip"));
+const react_1 = __importStar(require("react"));
 const useDropdown_1 = __importDefault(require("./hooks/useDropdown"));
 const SvgButton_1 = __importDefault(require("../svgButton/SvgButton"));
 const DropdownStyle_1 = require("./DropdownStyle");
+const svg_1 = require("../../assets/svg");
 const TextInput_1 = __importDefault(require("./components/input/TextInput"));
+const CheckIcon_1 = __importDefault(require("../../assets/svg/CheckIcon"));
 const DropdownComponent = (props) => {
     const { label, testID, iconStyle, renderItem, style = {}, subfixIcon, labelField, valueField, onChangeText, itemTextStyle, flatListProps, minHeight = 0, containerStyle, search = false, renderLeftIcon, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, backgroundColor, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, selectionType = 'single', activeColor = 'lightGray', keyboardAvoiding = true, dropdownPosition = 'auto', placeholder = 'Select item', itemAccessibilityLabelField, showsVerticalScrollIndicator = true, } = props;
     const { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({});
     const { ref, font, visible, refList, position, onSelect, listData, onSearch, onMeasure, searchText, showOrClose, scrollIndex, currentValue, onCheckPress, onClearPress, setSearchText, keyboardHeight, } = (0, useDropdown_1.default)({ ...props });
     const renderRight = () => {
-        return renderRightIcon ? (renderRightIcon(visible)) : (<SvgButton_1.default icon={subfixIcon} onPress={showOrClose} style={react_native_1.StyleSheet.flatten([
+        return renderRightIcon ? (renderRightIcon(visible)) : (<SvgButton_1.default icon={subfixIcon ? subfixIcon : visible ? <svg_1.ArrowDown color={iconColor}/> : <svg_1.ArrowUp color={iconColor}/>} onPress={showOrClose} style={react_native_1.StyleSheet.flatten([
                 iconStyle,
                 styles.icon,
                 { tintColor: iconColor },
@@ -93,7 +95,7 @@ const DropdownComponent = (props) => {
         return (<react_native_1.TouchableHighlight key={index.toString()} testID={lodash_1.default.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={lodash_1.default.get(item, itemAccessibilityLabelField || labelField)} underlayColor={colors[activeColor]} onPress={() => onCheckPress(item)}>
           <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
             {renderItem ? (renderItem(item, isSelected)) : (<react_native_1.View style={styles.item}>
-                <SvgButton_1.default icon={multiSelectIcon} onPress={() => onCheckPress(item)} style={[
+                <SvgButton_1.default icon={multiSelectIcon ? multiSelectIcon : <CheckIcon_1.default color={colors.white}/>} onPress={() => onCheckPress(item)} style={[
                     styles.checkContainer,
                     {
                         backgroundColor: isSelected ? colors.gray : colors.white,
@@ -171,7 +173,7 @@ const DropdownComponent = (props) => {
                 });
             }
             else {
-                return (<TextInput_1.default value={searchText} autoCorrect={false} testID={testID + ' input'} placeholder={searchPlaceholder} placeholderTextColor={colors.black} style={[styles.input, inputSearchStyle]} accessibilityLabel={accessibilityLabel + ' input'} onChangeText={(e) => {
+                return (<TextInput_1.default value={searchText} autoCorrect={false} testID={testID + ' input'} placeholderTextColor={colors.black} style={[styles.input, inputSearchStyle]} accessibilityLabel={accessibilityLabel + ' input'} placeholder={searchPlaceholder || 'Write here for search...'} onChangeText={(e) => {
                         if (onChangeText) {
                             setSearchText(e);
                             onChangeText(e);

package/dist/components/dropdown/components/chip/Chip.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_native_1 = require("react-native");
 const ChipStyle_1 = __importDefault(require("./ChipStyle"));
 const AppText_1 = __importDefault(require("../../../text/AppText"));
+const svg_1 = require("../../../../assets/svg");
 const SvgButton_1 = __importDefault(require("../../../svgButton/SvgButton"));
 const Chip = (props) => {
     const { styles } = (0, ChipStyle_1.default)({ ...props });
@@ -15,7 +16,7 @@ const Chip = (props) => {
         {label}
       </AppText_1.default>
       <react_native_1.View style={styles.clearContainer}>
-        <SvgButton_1.default icon={clearIcon} onPress={onClearPress} style={styles.clearIcon}/>
+        <SvgButton_1.default icon={clearIcon ? clearIcon : <svg_1.ClearIcon color={textColor}/>} onPress={onClearPress} style={styles.clearIcon}/>
       </react_native_1.View>
     </react_native_1.View>);
 };

package/dist/components/dropdown/components/input/TextInput.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextInputStyle_1 = require("./TextInputStyle");
 const react_1 = __importStar(require("react"));
+const svg_1 = require("../../../../assets/svg");
 const react_native_1 = require("react-native");
 const AppTextInput_1 = __importDefault(require("../../../textInput/AppTextInput"));
 const TextInputComponent = props => {
@@ -54,7 +55,7 @@ const TextInputComponent = props => {
         onChangeText(text);
     };
     return (<react_native_1.TouchableWithoutFeedback>
-      <AppTextInput_1.default {...props} value={searchtext} icon={searchIcon} style={styles.input} onChangeText={onChange} placeholder={placeholder} textStyle={styles.inputContainer} placeholderTextColor={placeholderTextColor}/>
+      <AppTextInput_1.default {...props} value={searchtext} style={styles.input} onChangeText={onChange} placeholder={placeholder} textStyle={styles.inputContainer} placeholderTextColor={placeholderTextColor} icon={searchIcon ? searchIcon : <svg_1.SearchIcon />}/>
     </react_native_1.TouchableWithoutFeedback>);
 };
 exports.default = TextInputComponent;

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

@@ -59,8 +59,8 @@ export type DropdownProps<S, T extends SelectionType> = {
     ref?: React.RefObject<IDropdownRef> | null | undefined;
     searchQuery?: (keyword: string, labelValue: string) => boolean;
     flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
-    renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
     renderLeftIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
+    renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
     renderItem?: (item: S, selected?: boolean) => React.JSX.Element | null | undefined;
     renderInputSearch?: (onSearch: (text: string) => void) => React.JSX.Element | null | undefined;
 };

package/dist/interface/svg.interface.d.ts

@@ -0,0 +1,4 @@
+export interface SvgInterface {
+    size?: number;
+    color?: string;
+}

package/dist/interface/svg.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-components-dropdown/dropdown",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.66.0"
+    "react-hook-form": "^7.66.0",
+    "react-native-svg": "^15.14.0"
   }
 }

package/src/assets/svg/ArrowDown.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Svg, { Path, Mask, Rect, G } from "react-native-svg";
+
+const ArrowDown = ({ size = 24, color = "black" }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Mask
+      id="mask0_2371_2505"
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={24}
+      height={24}
+    >
+      <Rect width={24} height={24} rx={1} fill="#fff" />
+    </Mask>
+    <G mask="url(#mask0_2371_2505)">
+      <Path
+        d="M12.7071 14.6929C12.3166 15.0834 11.6834 15.0834 11.2929 14.6929L6.7 10.1C6.3134 9.7134 6.3134 9.0866 6.7 8.7C7.0866 8.3134 7.7134 8.3134 8.1 8.7L11.2929 11.8929C11.6834 12.2834 12.3166 12.2834 12.7071 11.8929L15.9 8.7C16.2866 8.3134 16.9134 8.3134 17.3 8.7C17.6866 9.0866 17.6866 9.7134 17.3 10.1L12.7071 14.6929Z"
+        fill={color}
+      />
+    </G>
+  </Svg>
+);
+
+export default ArrowDown;

package/src/assets/svg/ArrowUp.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Svg, { Mask, Rect, G, Path } from "react-native-svg";
+import { SvgInterface } from "../../interface/svg.interface";
+
+const ArrowUp = ({ size = 24, color = "#1C1B1F" }: SvgInterface) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Mask
+      id="mask0_2375_2500"
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={24}
+      height={24}
+    >
+      <Rect
+        x={24}
+        y={24}
+        width={24}
+        height={24}
+        rx={1}
+        transform="rotate(-180 24 24)"
+        fill={color}
+      />
+    </Mask>
+    <G mask="url(#mask0_2375_2500)">
+      <Path
+        d="M11.2929 9.30711C11.6834 8.91658 12.3166 8.91658 12.7071 9.30711L17.3 13.9C17.6866 14.2866 17.6866 14.9134 17.3 15.3C16.9134 15.6866 16.2866 15.6866 15.9 15.3L12.7071 12.1071C12.3166 11.7166 11.6834 11.7166 11.2929 12.1071L8.1 15.3C7.7134 15.6866 7.0866 15.6866 6.7 15.3C6.3134 14.9134 6.3134 14.2866 6.7 13.9L11.2929 9.30711Z"
+        fill={color}
+      />
+    </G>
+  </Svg>
+);
+
+export default ArrowUp;

package/src/assets/svg/CheckIcon.tsx

@@ -0,0 +1,10 @@
+import Svg, { Path } from "react-native-svg";
+import { SvgInterface } from "../../interface/svg.interface";
+
+const CheckIcon = ({size, color}: SvgInterface) => (
+  <Svg width={size} height={size} viewBox="0 0 17 12" fill={color}>
+    <Path d="M7.27431 11.4818C6.88907 11.8992 6.23401 11.9123 5.8324 11.5106L0.292433 5.97067C-0.104655 5.57358 -0.0969935 4.92745 0.309397 4.53989L0.9927 3.88825C1.38569 3.51347 2.00596 3.52082 2.38995 3.90481L5.3544 6.86927C5.70921 7.22407 6.27201 7.261 6.67014 6.95561L15.5294 0.160008C15.8378 -0.0765669 16.2738 -0.0479552 16.5487 0.226898C16.84 0.518236 16.8523 0.986646 16.5767 1.29289L12.5684 5.7466L7.27431 11.4818Z"/>
+  </Svg>
+);
+
+export default CheckIcon;

package/src/assets/svg/ClearIcon.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { SvgInterface } from "../../interface/svg.interface";
+import Svg, { Path } from "react-native-svg";
+
+const ClearIcon = ({size, color}: SvgInterface) =>  
+  <Svg width={size} height={size} viewBox="0 0 10 10" fill={color}>
+    <Path d="M1.68984 8.86566C1.30324 9.25226 0.676443 9.25226 0.289844 8.86566C-0.0967558 8.47906 -0.0967556 7.85226 0.289844 7.46566L2.30288 5.45263C2.79223 4.96327 2.79085 4.16944 2.29979 3.68179L0.293503 1.68943C-0.0947195 1.30391 -0.0958139 0.676318 0.291063 0.289441C0.676989 -0.0964853 1.3027 -0.0964852 1.68862 0.289441L3.70288 2.30369C4.19223 2.79305 4.98607 2.79167 5.47372 2.30061L7.46729 0.293096C7.85214 -0.0944518 8.47864 -0.0955442 8.86484 0.29066C9.25105 0.676864 9.24996 1.30336 8.86241 1.68822L6.8549 3.68179C6.36384 4.16944 6.36245 4.96327 6.85181 5.45263L8.86606 7.46688C9.25199 7.85281 9.25199 8.47851 8.86606 8.86444C8.47919 9.25132 7.8516 9.25022 7.46607 8.862L5.47372 6.85571C4.98607 6.36465 4.19223 6.36327 3.70288 6.85263L1.68984 8.86566Z"/>
+  </Svg>
+export default ClearIcon;

package/src/assets/svg/SearchIcon.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+import { SvgInterface } from "../../interface/svg.interface";
+
+const SearchIcon = ({ size = 24, color = "#1C1B1F" }: SvgInterface) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill={color}>
+    <Path d="M17.3 17.3C16.9134 17.6866 16.2866 17.6866 15.9 17.3L11.6989 13.0989C10.9025 12.3025 9.63504 12.2695 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.2695 9.63504 12.3025 10.9025 13.0989 11.6989L17.3 15.9C17.6866 16.2866 17.6866 16.9134 17.3 17.3ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z"/>
+  </Svg>
+);
+
+export default SearchIcon;

package/src/assets/svg/index.ts

@@ -0,0 +1,4 @@
+export {default as ArrowUp } from './ArrowUp';
+export {default as ArrowDown } from './ArrowDown';
+export {default as ClearIcon } from './ClearIcon';
+export {default as SearchIcon } from './SearchIcon';

package/src/components/dropdown/Dropdown.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback } from 'react';
 import {
   View,
   Modal,
@@ -13,11 +12,14 @@ import {
 import _ from 'lodash';
 import AppText from '../text/AppText';
 import Chip from './components/chip/Chip';
+import React, { useCallback } from 'react';
 import useDropdown from './hooks/useDropdown';
 import SvgButton from '../svgButton/SvgButton';
 import { useDropdownStyle } from './DropdownStyle';
+import { ArrowDown, ArrowUp } from '../../assets/svg';
 import SearchInput from './components/input/TextInput';
 import { DropdownProps } from './interface/DropdownInterface';
+import CheckIcon from '../../assets/svg/CheckIcon';
 
 const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
   props: DropdownProps<T, Mode>,
@@ -90,7 +92,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
       renderRightIcon(visible)
     ) : (
       <SvgButton
-        icon={subfixIcon}
+        icon={subfixIcon ? subfixIcon : visible ? <ArrowDown color={iconColor} />  : <ArrowUp color={iconColor} />}
         onPress={showOrClose}
         style={StyleSheet.flatten([
           iconStyle,
@@ -189,7 +191,7 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
             ) : (
               <View style={styles.item}>
                 <SvgButton
-                  icon={multiSelectIcon}
+                  icon={multiSelectIcon ? multiSelectIcon : <CheckIcon color={colors.white}/> }
                   onPress={() => onCheckPress(item)}
                   style={[
                     styles.checkContainer,
@@ -303,10 +305,10 @@ const DropdownComponent = <T, Mode extends 'single' | 'multi'>(
             value={searchText}
             autoCorrect={false}
             testID={testID + ' input'}
-            placeholder={searchPlaceholder}
             placeholderTextColor={colors.black}
             style={[styles.input, inputSearchStyle]}
             accessibilityLabel={accessibilityLabel + ' input'}
+            placeholder={searchPlaceholder || 'Write here for search...'}
             onChangeText={(e: any) => {
               if (onChangeText) {
                 setSearchText(e);

package/src/components/dropdown/components/chip/Chip.tsx

@@ -1,6 +1,7 @@
 import { View } from 'react-native';
 import useChipStyle from './ChipStyle';
 import AppText from '../../../text/AppText';
+import { ClearIcon } from '../../../../assets/svg';
 import SvgButton from '../../../svgButton/SvgButton';
 import { ChipInterface } from '../../interface/ChipInterface';
 
@@ -19,7 +20,7 @@ const Chip = (props: ChipInterface) => {
       </AppText>
       <View style={styles.clearContainer}>
         <SvgButton
-          icon={clearIcon}
+          icon={clearIcon ? clearIcon : <ClearIcon color={textColor}/> } 
           onPress={onClearPress}
           style={styles.clearIcon}
         />

package/src/components/dropdown/components/input/TextInput.tsx

@@ -1,5 +1,6 @@
 import { useTextStyle } from './TextInputStyle';
 import React, { useEffect, useState } from 'react';
+import { SearchIcon } from '../../../../assets/svg';
 import { TouchableWithoutFeedback } from 'react-native';
 import AppTextInput from '../../../textInput/AppTextInput';
 import type { CTextInput } from '../../interface/InputProps';
@@ -32,12 +33,12 @@ const TextInputComponent: CTextInput = props => {
       <AppTextInput
         {...props}
         value={searchtext}
-        icon={searchIcon}
         style={styles.input}
         onChangeText={onChange}
         placeholder={placeholder}
         textStyle={styles.inputContainer}
         placeholderTextColor={placeholderTextColor}
+        icon={searchIcon ? searchIcon : <SearchIcon/> }
       />
     </TouchableWithoutFeedback>
   );

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

@@ -72,8 +72,8 @@ export type DropdownProps<S, T extends SelectionType> = {
   ref?: React.RefObject<IDropdownRef> | null | undefined;
   searchQuery?: (keyword: string, labelValue: string) => boolean;
   flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
-  renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
   renderLeftIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
+  renderRightIcon?: (visible?: boolean) => React.JSX.Element | null | undefined;
   renderItem?: (
     item: S,
     selected?: boolean,

package/src/interface/svg.interface.ts

@@ -0,0 +1,4 @@
+export interface SvgInterface {
+  size?: number;
+  color?: string;
+}