react-native-input-select 0.4.0 → 0.8.0

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","modalBackgroundStyle","modalOptionsContainer","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\n\nexport const DropdownSelect = ({\n  placeholder,\n  label,\n  error,\n  helperText,\n  options,\n  optionLabel,\n  optionValue,\n  onValueChange,\n  selectedValue,\n  isMultiple,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  modalBackgroundStyle,\n  modalOptionsContainer,\n}: any) => {\n  const [open, setOpen] = useState(false);\n  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n  const [selectedItems, setSelectedItems] = useState(\n    Array.isArray(selectedValue)\n      ? selectedValue\n      : selectedValue === '' || selectedValue === undefined\n      ? []\n      : [selectedValue]\n  ); //for multiple selection\n\n  /*===========================================\n   * Selection handlers\n   *==========================================*/\n  const handleSingleSelection = (value: any) => {\n    if (selectedItem === value) {\n      setSelectedItem(null);\n    } else {\n      setSelectedItem(value);\n      onValueChange(value); //send value to parent\n      setOpen(false); //close modal upon selection\n    }\n  };\n\n  const handleMultipleSelections = (value: any) => {\n    let selectedValues = [...selectedItems];\n\n    if (selectedValues.includes(value)) {\n      selectedValues = selectedValues.filter((item) => item !== value);\n    } else {\n      selectedValues.push(value);\n    }\n    setSelectedItems(selectedValues);\n  };\n\n  /*===========================================\n   * Get label handler\n   *==========================================*/\n  const getSelectedItemsLabel = () => {\n    if (isMultiple) {\n      let selectedLabels: Array<string> = [];\n      selectedItems &&\n        selectedItems.forEach((element) => {\n          let selectedItemLabel =\n            options &&\n            options.find(\n              (item: string) => item[optionValue ?? 'value'] === element\n            )?.[optionLabel];\n          selectedLabels.push(selectedItemLabel);\n        });\n      return selectedLabels;\n    }\n\n    let selectedItemLabel =\n      options &&\n      options.find(\n        (item: string) => item[optionValue ?? 'value'] === selectedItem\n      );\n    return selectedItemLabel?.[optionLabel];\n  };\n\n  return (\n    <>\n      <Dropdown\n        label={label}\n        placeholder={placeholder}\n        helperText={helperText}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        setOpen={setOpen}\n        open={open}\n        labelStyle={labelStyle}\n        dropdownStyle={dropdownStyle}\n        dropdownContainerStyle={dropdownContainerStyle}\n        selectedItemStyle={selectedItemStyle}\n        isMultiple={isMultiple}\n      />\n      <CustomModal\n        open={open}\n        setOpen={setOpen}\n        modalBackgroundStyle={modalBackgroundStyle}\n        modalOptionsContainer={modalOptionsContainer}\n        onRequestClose={() => {}}\n      >\n        <DropdownList\n          options={options}\n          optionLabel={optionLabel}\n          optionValue={optionValue}\n          isMultiple={isMultiple}\n          selectedItems={selectedItems}\n          selectedItem={selectedItem}\n          handleMultipleSelections={handleMultipleSelections}\n          handleSingleSelection={handleSingleSelection}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}
+{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","onSearch","searchTerm","toString","toLocaleLowerCase","searchResults","toLowerCase","handleToggleModal","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport { Input } from './Input';\n\nexport const DropdownSelect = ({\n  placeholder,\n  label,\n  error,\n  helperText,\n  options,\n  optionLabel,\n  optionValue,\n  onValueChange,\n  selectedValue,\n  isMultiple,\n  isSearchable,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  modalBackgroundStyle,\n  modalOptionsContainer,\n  searchInputStyle,\n  primaryColor,\n}: any) => {\n  const [newOptions, setNewOptions] = useState(options ? options : []);\n  const [open, setOpen] = useState(false);\n  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n  const [selectedItems, setSelectedItems] = useState(\n    Array.isArray(selectedValue)\n      ? selectedValue\n      : selectedValue === '' || selectedValue === undefined\n      ? []\n      : [selectedValue]\n  ); //for multiple selection\n  const [searchValue, setSearchValue] = useState('');\n\n  /*===========================================\n   * Selection handlers\n   *==========================================*/\n  const handleSingleSelection = (value: any) => {\n    if (selectedItem === value) {\n      setSelectedItem(null);\n    } else {\n      setSelectedItem(value);\n      onValueChange(value); //send value to parent\n      setOpen(false); //close modal upon selection\n    }\n  };\n\n  const handleMultipleSelections = (value: any) => {\n    let selectedValues = [...selectedItems];\n\n    if (selectedValues.includes(value)) {\n      selectedValues = selectedValues.filter((item) => item !== value);\n    } else {\n      selectedValues.push(value);\n    }\n    setSelectedItems(selectedValues);\n  };\n\n  /*===========================================\n   * Get label handler\n   *==========================================*/\n  const getSelectedItemsLabel = () => {\n    if (isMultiple) {\n      let selectedLabels: Array<string> = [];\n      selectedItems &&\n        selectedItems.forEach((element) => {\n          let selectedItemLabel =\n            options &&\n            options.find(\n              (item: string) =>\n                item[optionValue ?? DEFAULT_OPTION_VALUE] === element\n            )?.[optionLabel];\n          selectedLabels.push(selectedItemLabel);\n        });\n      return selectedLabels;\n    }\n\n    let selectedItemLabel =\n      options &&\n      options.find(\n        (item: string) =>\n          item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n      );\n    return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n  };\n\n  /*===========================================\n   * Search\n   *==========================================*/\n  const onSearch = (value: string) => {\n    setSearchValue(value);\n    let searchTerm = value.toString().toLocaleLowerCase();\n    const searchResults = options.filter((item: any) => {\n      return (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .includes(searchTerm) ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(searchTerm)\n          .toLowerCase()\n          .includes()\n      );\n    });\n\n    setNewOptions(searchResults);\n  };\n\n  /*===========================================\n   * Modal\n   *==========================================*/\n  const handleToggleModal = () => {\n    setOpen(!open);\n    setSearchValue('');\n    setNewOptions(options);\n  };\n\n  return (\n    <>\n      <Dropdown\n        label={label}\n        placeholder={placeholder}\n        helperText={helperText}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        handleToggleModal={handleToggleModal}\n        labelStyle={labelStyle}\n        dropdownStyle={dropdownStyle}\n        dropdownContainerStyle={dropdownContainerStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        isMultiple={isMultiple}\n        primaryColor={primaryColor}\n      />\n      <CustomModal\n        open={open}\n        handleToggleModal={handleToggleModal}\n        modalBackgroundStyle={modalBackgroundStyle}\n        modalOptionsContainer={modalOptionsContainer}\n        onRequestClose={() => {}}\n      >\n        {isSearchable && (\n          <Input\n            value={searchValue}\n            onChangeText={(text: string) => onSearch(text)}\n            style={searchInputStyle}\n            primaryColor={primaryColor}\n          />\n        )}\n        <DropdownList\n          options={newOptions}\n          optionLabel={optionLabel}\n          optionValue={optionValue}\n          isMultiple={isMultiple}\n          selectedItems={selectedItems}\n          selectedItem={selectedItem}\n          handleMultipleSelections={handleMultipleSelections}\n          handleSingleSelection={handleSingleSelection}\n          primaryColor={primaryColor}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}

package/lib/module/styles/colors.js

@@ -1,5 +1,6 @@
 export const colors = {
   primary: '#EF8031',
+  red: '#FA4169',
   black: '#000000',
   white: '#FFFFFF',
   dark: '#11142D',

package/lib/module/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["colors.ts"],"names":["colors","primary","black","white","dark","gray","lightGray"],"mappings":"AAAA,OAAO,MAAMA,MAAW,GAAG;AACzBC,EAAAA,OAAO,EAAE,SADgB;AAEzBC,EAAAA,KAAK,EAAE,SAFkB;AAGzBC,EAAAA,KAAK,EAAE,SAHkB;AAIzBC,EAAAA,IAAI,EAAE,SAJmB;AAKzBC,EAAAA,IAAI,EAAE,SALmB;AAMzBC,EAAAA,SAAS,EAAE;AANc,CAApB","sourcesContent":["export const colors: any = {\n  primary: '#EF8031',\n  black: '#000000',\n  white: '#FFFFFF',\n  dark: '#11142D',\n  gray: '#808191',\n  lightGray: '#F7F7F7',\n};\n"]}
+{"version":3,"sources":["colors.ts"],"names":["colors","primary","red","black","white","dark","gray","lightGray"],"mappings":"AAAA,OAAO,MAAMA,MAAW,GAAG;AACzBC,EAAAA,OAAO,EAAE,SADgB;AAEzBC,EAAAA,GAAG,EAAE,SAFoB;AAGzBC,EAAAA,KAAK,EAAE,SAHkB;AAIzBC,EAAAA,KAAK,EAAE,SAJkB;AAKzBC,EAAAA,IAAI,EAAE,SALmB;AAMzBC,EAAAA,IAAI,EAAE,SANmB;AAOzBC,EAAAA,SAAS,EAAE;AAPc,CAApB","sourcesContent":["export const colors: any = {\n  primary: '#EF8031',\n  red: '#FA4169',\n  black: '#000000',\n  white: '#FFFFFF',\n  dark: '#11142D',\n  gray: '#808191',\n  lightGray: '#F7F7F7',\n};\n"]}

package/lib/module/styles/input.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { colors } from './colors';
+export const inputStyles = StyleSheet.create({
+  input: {
+    paddingVertical: 18,
+    paddingHorizontal: 23,
+    backgroundColor: colors.lightGray,
+    borderRadius: 8,
+    borderColor: colors.dark,
+    borderWidth: 1,
+    color: colors.dark,
+    width: '100%',
+    minHeight: 64
+  },
+  inputFocusState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.primary
+  }
+});
+//# sourceMappingURL=input.js.map

package/lib/module/styles/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["input.ts"],"names":["StyleSheet","colors","inputStyles","create","input","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusState","borderStyle","primary"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,OAAO,MAAMC,WAAgB,GAAGF,UAAU,CAACG,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEN,MAAM,CAACO,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAET,MAAM,CAACU,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEZ,MAAM,CAACU,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,eAAe,EAAE;AACfJ,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAET,MAAM,CAACiB;AAHL;AAZ+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\n  input: {\n    paddingVertical: 18,\n    paddingHorizontal: 23,\n    backgroundColor: colors.lightGray,\n    borderRadius: 8,\n    borderColor: colors.dark,\n    borderWidth: 1,\n    color: colors.dark,\n    width: '100%',\n    minHeight: 64,\n  },\n  inputFocusState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.primary,\n  },\n});\n"]}

package/lib/typescript/Dropdown.d.ts

@@ -1,2 +1,2 @@
-declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, setOpen, open, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, }: any) => JSX.Element;
+declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, primaryColor, }: any) => JSX.Element;
 export default Dropdown;

package/lib/typescript/DropdownList.d.ts

@@ -1,2 +1,2 @@
-declare const DropdownList: ({ options, optionLabel, optionValue, isMultiple, selectedItems, selectedItem, handleMultipleSelections, handleSingleSelection, }: any) => JSX.Element;
+declare const DropdownList: ({ options, optionLabel, optionValue, isMultiple, selectedItems, selectedItem, handleMultipleSelections, handleSingleSelection, primaryColor, }: any) => JSX.Element;
 export default DropdownList;

package/lib/typescript/DropdownListItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<({ item, optionLabel, optionValue, isMultiple, selectedOption, onChange, }: any) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ item, optionLabel, optionValue, isMultiple, selectedOption, onChange, primaryColor, }: any) => JSX.Element>;
 export default _default;

package/lib/typescript/Input.d.ts

@@ -0,0 +1 @@
+export declare const Input: ({ placeholder, value, onChangeText, style, primaryColor, ...rest }: any) => JSX.Element;

package/lib/typescript/Modal.d.ts

@@ -1,2 +1,2 @@
-declare const CustomModal: ({ open, setOpen, onRequestClose, modalBackgroundStyle, modalOptionsContainerStyle, children, }: any) => JSX.Element;
+declare const CustomModal: ({ open, handleToggleModal, onRequestClose, modalBackgroundStyle, modalOptionsContainerStyle, children, }: any) => JSX.Element;
 export default CustomModal;

package/lib/typescript/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_OPTION_LABEL = "label";
+export declare const DEFAULT_OPTION_VALUE = "value";

package/lib/typescript/index.d.ts

@@ -1,2 +1,2 @@
-export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, modalBackgroundStyle, modalOptionsContainer, }: any) => JSX.Element;
+export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, }: any) => JSX.Element;
 export default DropdownSelect;

package/lib/typescript/styles/input.d.ts

@@ -0,0 +1 @@
+export declare const inputStyles: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-select",
-  "version": "0.4.0",
+  "version": "0.8.0",
   "description": "Dropdown package for react-native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -29,12 +29,17 @@
     "release": "release-it -- minor --ci",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
-    "bootstrap": "yarn example && yarn && yarn pods"
+    "bootstrap": "yarn example && yarn && yarn pods",
+    "start": "yarn example start",
+    "android": "yarn example android",
+    "ios": "yarn example ios"
   },
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "dropdown",
+    "selection"
   ],
   "repository": "https://github.com/azeezat/react-native-select",
   "author": "Azeezat <azeezat94@gmail.com> (https://github.com/azeezat)",

package/src/Dropdown.tsx

@@ -6,8 +6,10 @@ import {
   ScrollView,
   StyleSheet,
   Image,
+  TouchableOpacity,
 } from 'react-native';
 import { colors } from './styles/colors';
+import { inputStyles } from './styles/input';
 import { typography } from './styles/typography';
 
 const Dropdown = ({
@@ -16,8 +18,7 @@ const Dropdown = ({
   helperText,
   error,
   getSelectedItemsLabel,
-  setOpen,
-  open,
+  handleToggleModal,
   isMultiple,
   selectedItem,
   selectedItems,
@@ -25,6 +26,8 @@ const Dropdown = ({
   dropdownStyle,
   dropdownContainerStyle,
   selectedItemStyle,
+  multipleSelectedItemStyle,
+  primaryColor,
 }: any) => {
   return (
     <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
@@ -32,10 +35,11 @@ const Dropdown = ({
         <Text style={[styles.label, labelStyle]}>{label}</Text>
       )}
       <Pressable
-        onPress={() => setOpen(!open)}
+        onPress={() => handleToggleModal()}
         style={({ pressed }) => [
-          pressed && styles.inputFocusState,
-          styles.input,
+          pressed &&
+            inputStyles.inputFocusState && { borderColor: primaryColor },
+          inputStyles.input,
           dropdownStyle,
         ]}
       >
@@ -50,15 +54,23 @@ const Dropdown = ({
           >
             {isMultiple ? (
               getSelectedItemsLabel().map((item: any, i: Number) => (
-                <Text
-                  key={`SelectedItems${i}`}
-                  style={[styles.selectedItems, selectedItemStyle]}
-                >
-                  {item}
-                </Text>
+                <TouchableOpacity onPress={() => handleToggleModal()}>
+                  <Text
+                    key={`SelectedItems${i}`}
+                    style={[
+                      styles.selectedItems,
+                      { backgroundColor: primaryColor },
+                      multipleSelectedItemStyle,
+                    ]}
+                  >
+                    {item}
+                  </Text>
+                </TouchableOpacity>
               ))
             ) : (
-              <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>
+              <Text style={[styles.blackText, selectedItemStyle]}>
+                {getSelectedItemsLabel()}
+              </Text>
             )}
           </View>
 
@@ -84,30 +96,13 @@ const Dropdown = ({
 
 const styles = StyleSheet.create({
   label: { marginBottom: 16, color: colors.gray, ...typography.caption },
-  input: {
-    paddingVertical: 18,
-    paddingHorizontal: 23,
-    backgroundColor: colors.lightGray,
-    borderRadius: 8,
-    borderColor: colors.dark,
-    borderWidth: 1,
-    color: colors.dark,
-    width: '100%',
-    minHeight: 64,
-  },
-  inputFocusState: {
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: colors.primary,
-    borderRadius: 8,
-  },
   inputFocusErrorState: {
     borderWidth: 2,
     borderStyle: 'solid',
-    borderColor: colors.cliqkiRed,
+    borderColor: colors.red,
   },
   iconStyle: { position: 'absolute', right: 25, top: 25 },
-  error: { color: colors.cliqkiRed, marginTop: 8, ...typography.caption },
+  error: { color: colors.red, marginTop: 8, ...typography.caption },
   helper: { marginTop: 8, color: colors.primary, ...typography.caption },
   dropdownInputContainer: { marginBottom: 23, width: '100%' },
   selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },

package/src/DropdownList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, FlatList, StyleSheet } from 'react-native';
+import { View, FlatList, StyleSheet, Text } from 'react-native';
 import DropdownListItem from './DropdownListItem';
 import { colors } from './styles/colors';
 
@@ -12,18 +12,18 @@ const DropdownList = ({
   selectedItem,
   handleMultipleSelections,
   handleSingleSelection,
+  primaryColor,
 }: any) => {
   return (
     <FlatList
       data={options}
       extraData={isMultiple ? selectedItems : selectedItem}
       initialNumToRender={5}
-      // ListEmptyComponent={
-      //   <EmptyStateComponent
-      //     style={{alignItems: 'flex-start', marginTop: 30}}
-      //     message="Be the first to reply"
-      //   />
-      // }
+      ListEmptyComponent={
+        <View style={styles.emptyListStyle}>
+          <Text>No options available</Text>
+        </View>
+      }
       ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}
       renderItem={(item) =>
         _renderItem(item, {
@@ -34,6 +34,7 @@ const DropdownList = ({
           onChange: isMultiple
             ? handleMultipleSelections
             : handleSingleSelection,
+          primaryColor,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -50,6 +51,7 @@ const _renderItem = ({ item }: any, props: any) => {
       isMultiple={props.isMultiple}
       selectedOption={props.selectedOption}
       onChange={props.onChange}
+      primaryColor={props.primaryColor}
     />
   );
 };
@@ -71,6 +73,7 @@ const styles = StyleSheet.create({
     height: 1,
     opacity: 0.15,
   },
+  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },
 });
 
 export default DropdownList;

package/src/DropdownListItem.tsx

@@ -10,6 +10,7 @@ const DropdownListItem = ({
   isMultiple,
   selectedOption,
   onChange,
+  primaryColor,
 }: any) => {
   const selectedOptionValue = optionValue ?? 'value';
   return (
@@ -26,9 +27,9 @@ const DropdownListItem = ({
           }
           onChange={() => onChange(item[selectedOptionValue])}
           boxType="circle" //works on ios only
-          tintColors={{ true: colors.primary }} //android control
-          onCheckColor={colors.primary} //ios checkmark colour control
-          onTintColor={colors.primary} //ios box colour control
+          tintColors={{ true: primaryColor || colors.primary }} //android control
+          onCheckColor={primaryColor || colors.primary} //ios checkmark colour control
+          onTintColor={primaryColor || colors.primary} //ios box colour control
         />
       </View>
       <View>

package/src/Input.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { TextInput, StyleSheet, View } from 'react-native';
+import { inputStyles } from './styles/input';
+
+export const Input = ({
+  placeholder,
+  value,
+  onChangeText,
+  style,
+  primaryColor,
+  ...rest
+}: any) => {
+  const [isFocused, setFocus] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        placeholder={placeholder}
+        style={[
+          inputStyles.input,
+          isFocused &&
+            inputStyles.inputFocusState && { borderColor: primaryColor },
+          style,
+        ]}
+        onFocus={() => {
+          setFocus(true);
+        }}
+        onBlur={() => setFocus(false)}
+        value={value}
+        onChangeText={onChangeText}
+        {...rest}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { margin: 23 },
+});

package/src/Modal.tsx

@@ -9,7 +9,7 @@ import { colors } from './styles/colors';
 
 const CustomModal = ({
   open,
-  setOpen,
+  handleToggleModal,
   onRequestClose,
   modalBackgroundStyle,
   modalOptionsContainerStyle,
@@ -23,7 +23,7 @@ const CustomModal = ({
       animationType="fade"
     >
       <TouchableOpacity
-        onPress={() => setOpen(!open)}
+        onPress={() => handleToggleModal()}
         style={[
           styles.modalContainer,
           styles.modalBackgroundStyle,

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_OPTION_LABEL = 'label';
+export const DEFAULT_OPTION_VALUE = 'value';

package/src/index.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import Dropdown from './Dropdown';
 import CustomModal from './Modal';
 import DropdownList from './DropdownList';
+import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
+import { Input } from './Input';
 
 export const DropdownSelect = ({
   placeholder,
@@ -14,13 +16,18 @@ export const DropdownSelect = ({
   onValueChange,
   selectedValue,
   isMultiple,
+  isSearchable,
   labelStyle,
   dropdownStyle,
   dropdownContainerStyle,
   selectedItemStyle,
+  multipleSelectedItemStyle,
   modalBackgroundStyle,
   modalOptionsContainer,
+  searchInputStyle,
+  primaryColor,
 }: any) => {
+  const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
   const [selectedItems, setSelectedItems] = useState(
@@ -30,6 +37,7 @@ export const DropdownSelect = ({
       ? []
       : [selectedValue]
   ); //for multiple selection
+  const [searchValue, setSearchValue] = useState('');
 
   /*===========================================
    * Selection handlers
@@ -66,7 +74,8 @@ export const DropdownSelect = ({
           let selectedItemLabel =
             options &&
             options.find(
-              (item: string) => item[optionValue ?? 'value'] === element
+              (item: string) =>
+                item[optionValue ?? DEFAULT_OPTION_VALUE] === element
             )?.[optionLabel];
           selectedLabels.push(selectedItemLabel);
         });
@@ -76,9 +85,41 @@ export const DropdownSelect = ({
     let selectedItemLabel =
       options &&
       options.find(
-        (item: string) => item[optionValue ?? 'value'] === selectedItem
+        (item: string) =>
+          item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem
       );
-    return selectedItemLabel?.[optionLabel];
+    return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];
+  };
+
+  /*===========================================
+   * Search
+   *==========================================*/
+  const onSearch = (value: string) => {
+    setSearchValue(value);
+    let searchTerm = value.toString().toLocaleLowerCase();
+    const searchResults = options.filter((item: any) => {
+      return (
+        item[optionLabel ?? DEFAULT_OPTION_LABEL]
+          .toString()
+          .toLowerCase()
+          .includes(searchTerm) ||
+        item[optionValue ?? DEFAULT_OPTION_VALUE]
+          .toString(searchTerm)
+          .toLowerCase()
+          .includes()
+      );
+    });
+
+    setNewOptions(searchResults);
+  };
+
+  /*===========================================
+   * Modal
+   *==========================================*/
+  const handleToggleModal = () => {
+    setOpen(!open);
+    setSearchValue('');
+    setNewOptions(options);
   };
 
   return (
@@ -91,23 +132,32 @@ export const DropdownSelect = ({
         getSelectedItemsLabel={getSelectedItemsLabel}
         selectedItem={selectedItem}
         selectedItems={selectedItems}
-        setOpen={setOpen}
-        open={open}
+        handleToggleModal={handleToggleModal}
         labelStyle={labelStyle}
         dropdownStyle={dropdownStyle}
         dropdownContainerStyle={dropdownContainerStyle}
         selectedItemStyle={selectedItemStyle}
+        multipleSelectedItemStyle={multipleSelectedItemStyle}
         isMultiple={isMultiple}
+        primaryColor={primaryColor}
       />
       <CustomModal
         open={open}
-        setOpen={setOpen}
+        handleToggleModal={handleToggleModal}
         modalBackgroundStyle={modalBackgroundStyle}
         modalOptionsContainer={modalOptionsContainer}
         onRequestClose={() => {}}
       >
+        {isSearchable && (
+          <Input
+            value={searchValue}
+            onChangeText={(text: string) => onSearch(text)}
+            style={searchInputStyle}
+            primaryColor={primaryColor}
+          />
+        )}
         <DropdownList
-          options={options}
+          options={newOptions}
           optionLabel={optionLabel}
           optionValue={optionValue}
           isMultiple={isMultiple}
@@ -115,6 +165,7 @@ export const DropdownSelect = ({
           selectedItem={selectedItem}
           handleMultipleSelections={handleMultipleSelections}
           handleSingleSelection={handleSingleSelection}
+          primaryColor={primaryColor}
         />
       </CustomModal>
     </>

package/src/styles/colors.ts

@@ -1,5 +1,6 @@
 export const colors: any = {
   primary: '#EF8031',
+  red: '#FA4169',
   black: '#000000',
   white: '#FFFFFF',
   dark: '#11142D',

package/src/styles/input.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { colors } from './colors';
+
+export const inputStyles: any = StyleSheet.create({
+  input: {
+    paddingVertical: 18,
+    paddingHorizontal: 23,
+    backgroundColor: colors.lightGray,
+    borderRadius: 8,
+    borderColor: colors.dark,
+    borderWidth: 1,
+    color: colors.dark,
+    width: '100%',
+    minHeight: 64,
+  },
+  inputFocusState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.primary,
+  },
+});