react-native-input-select 0.18.0 → 0.20.0

package/lib/module/{Input.js.map → components/Input/index.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["Input.tsx"],"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","input","inputFocusState","borderColor","create","margin"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,IAAhC,QAA4C,cAA5C;AACA,SAASC,WAAT,QAA4B,gBAA5B;AAEA,OAAO,MAAMC,KAAK,GAAG,QAOV;AAAA,MAPW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpBC,IAAAA,YALoB;AAMpB,OAAGC;AANiB,GAOX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwBb,QAAQ,CAAC,KAAD,CAAtC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEc,MAAM,CAACC;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLF,WAAW,CAACY,KADP,EAELJ,SAAS,IACPR,WAAW,CAACa,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAER;AAAf,KAH5B,EAILD,KAJK,CAFT;AAQE,IAAA,OAAO,EAAE,MAAM;AACbI,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAVH;AAWE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAXxB;AAYE,IAAA,KAAK,EAAEN,KAZT;AAaE,IAAA,YAAY,EAAEC;AAbhB,KAcMG,IAdN,EADF,CADF;AAoBD,CA9BM;AAgCP,MAAMG,MAAM,GAAGZ,UAAU,CAACiB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AAAEK,IAAAA,MAAM,EAAE;AAAV;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useState } from 'react';\nimport { TextInput, StyleSheet, View } from 'react-native';\nimport { inputStyles } from './styles/input';\n\nexport const Input = ({\n  placeholder,\n  value,\n  onChangeText,\n  style,\n  primaryColor,\n  ...rest\n}: any) => {\n  const [isFocused, setFocus] = useState(false);\n\n  return (\n    <View style={styles.container}>\n      <TextInput\n        placeholder={placeholder}\n        style={[\n          inputStyles.input,\n          isFocused &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\n          style,\n        ]}\n        onFocus={() => {\n          setFocus(true);\n        }}\n        onBlur={() => setFocus(false)}\n        value={value}\n        onChangeText={onChangeText}\n        {...rest}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { margin: 23 },\n});\n"]}
+{"version":3,"sources":["index.tsx"],"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","input","inputFocusState","borderColor","create","margin"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,IAAhC,QAA4C,cAA5C;AACA,SAASC,WAAT,QAA4B,oBAA5B;AAEA,OAAO,MAAMC,KAAK,GAAG,QAOV;AAAA,MAPW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpBC,IAAAA,YALoB;AAMpB,OAAGC;AANiB,GAOX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwBb,QAAQ,CAAC,KAAD,CAAtC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEc,MAAM,CAACC;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLF,WAAW,CAACY,KADP,EAELJ,SAAS,IACPR,WAAW,CAACa,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAER;AAAf,KAH5B,EAILD,KAJK,CAFT;AAQE,IAAA,OAAO,EAAE,MAAM;AACbI,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAVH;AAWE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAXxB;AAYE,IAAA,KAAK,EAAEN,KAZT;AAaE,IAAA,YAAY,EAAEC;AAbhB,KAcMG,IAdN,EADF,CADF;AAoBD,CA9BM;AAgCP,MAAMG,MAAM,GAAGZ,UAAU,CAACiB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AAAEK,IAAAA,MAAM,EAAE;AAAV;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useState } from 'react';\nimport { TextInput, StyleSheet, View } from 'react-native';\nimport { inputStyles } from '../../styles/input';\n\nexport const Input = ({\n  placeholder,\n  value,\n  onChangeText,\n  style,\n  primaryColor,\n  ...rest\n}: any) => {\n  const [isFocused, setFocus] = useState(false);\n\n  return (\n    <View style={styles.container}>\n      <TextInput\n        placeholder={placeholder}\n        style={[\n          inputStyles.input,\n          isFocused &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\n          style,\n        ]}\n        onFocus={() => {\n          setFocus(true);\n        }}\n        onBlur={() => setFocus(false)}\n        value={value}\n        onChangeText={onChangeText}\n        {...rest}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { margin: 23 },\n});\n"]}

package/lib/module/constants/index.js

@@ -1,3 +1,4 @@
 export const DEFAULT_OPTION_LABEL = 'label';
 export const DEFAULT_OPTION_VALUE = 'value';
+export const CHECKBOX_SIZE = 14;
 //# sourceMappingURL=index.js.map

package/lib/module/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE"],"mappings":"AAAA,OAAO,MAAMA,oBAAoB,GAAG,OAA7B;AACP,OAAO,MAAMC,oBAAoB,GAAG,OAA7B","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\n"]}
+{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","CHECKBOX_SIZE"],"mappings":"AAAA,OAAO,MAAMA,oBAAoB,GAAG,OAA7B;AACP,OAAO,MAAMC,oBAAoB,GAAG,OAA7B;AACP,OAAO,MAAMC,aAAa,GAAG,EAAtB","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\nexport const CHECKBOX_SIZE = 14;\n"]}

package/lib/module/index.js

@@ -1,12 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useState } from 'react';
-import Dropdown from './Dropdown';
-import CustomModal from './Modal';
-import DropdownList from './DropdownList';
+import Dropdown from './components/Dropdown/Dropdown';
+import DropdownList from './components/Dropdown/DropdownList';
+import CustomModal from './components/CustomModal';
 import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
-import { Input } from './Input';
-export const DropdownSelect = (_ref, rest) => {
+import { Input } from './components/Input';
+import { colors } from './styles/colors';
+export const DropdownSelect = _ref => {
   let {
     placeholder,
     label,
@@ -31,7 +32,11 @@ export const DropdownSelect = (_ref, rest) => {
     modalOptionsContainer,
     searchInputStyle,
     primaryColor,
-    disabled
+    disabled,
+    checkboxSize,
+    checkboxStyle,
+    checkboxLabelStyle,
+    ...rest
   } = _ref;
   const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
@@ -65,6 +70,7 @@ export const DropdownSelect = (_ref, rest) => {
     }
 
     setSelectedItems(selectedValues);
+    onValueChange(selectedValues); //send value to parent
   };
   /*===========================================
    * Get label handler
@@ -113,6 +119,7 @@ export const DropdownSelect = (_ref, rest) => {
     setNewOptions(options);
   };
 
+  let primary = primaryColor || colors.gray;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
     label: label,
     placeholder: placeholder,
@@ -131,7 +138,7 @@ export const DropdownSelect = (_ref, rest) => {
     selectedItemStyle: selectedItemStyle,
     multipleSelectedItemStyle: multipleSelectedItemStyle,
     isMultiple: isMultiple,
-    primaryColor: primaryColor,
+    primaryColor: primary,
     disabled: disabled
   }, rest)), /*#__PURE__*/React.createElement(CustomModal, {
     open: open,
@@ -143,7 +150,7 @@ export const DropdownSelect = (_ref, rest) => {
     value: searchValue,
     onChangeText: text => onSearch(text),
     style: searchInputStyle,
-    primaryColor: primaryColor
+    primaryColor: primary
   }), /*#__PURE__*/React.createElement(DropdownList, {
     options: newOptions,
     optionLabel: optionLabel,
@@ -153,7 +160,10 @@ export const DropdownSelect = (_ref, rest) => {
     selectedItem: selectedItem,
     handleMultipleSelections: handleMultipleSelections,
     handleSingleSelection: handleSingleSelection,
-    primaryColor: primaryColor
+    primaryColor: primary,
+    checkboxSize: checkboxSize,
+    checkboxStyle: checkboxStyle,
+    checkboxLabelStyle: checkboxLabelStyle
   })));
 };
 export default DropdownSelect;

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","DropdownSelect","rest","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","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","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","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 type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\n\nexport const DropdownSelect = (\n  {\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    dropdownErrorStyle,\n    dropdownErrorTextStyle,\n    dropdownHelperTextStyle,\n    selectedItemStyle,\n    multipleSelectedItemStyle,\n    modalBackgroundStyle,\n    modalOptionsContainer,\n    searchInputStyle,\n    primaryColor,\n    disabled,\n  }: DropdownProps,\n  rest: any\n) => {\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: any) =>\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: any) =>\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\n    let searchText = value.toString().toLocaleLowerCase().trim();\n\n    const regexFilter = new RegExp(searchText, 'i');\n\n    const searchResults = options.filter((item: any) => {\n      if (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .search(regexFilter) !== -1 ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(regexFilter)\n          .toLowerCase()\n          .search(regexFilter) !== -1\n      ) {\n        return item;\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        dropdownErrorStyle={dropdownErrorStyle}\n        dropdownErrorTextStyle={dropdownErrorTextStyle}\n        dropdownHelperTextStyle={dropdownHelperTextStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        isMultiple={isMultiple}\n        primaryColor={primaryColor}\n        disabled={disabled}\n        {...rest}\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"]}
+{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","DropdownList","CustomModal","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","colors","DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","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","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","primary","gray","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './components/Dropdown/Dropdown';\nimport DropdownList from './components/Dropdown/DropdownList';\nimport CustomModal from './components/CustomModal';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './components/Input';\nimport { colors } from './styles/colors';\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  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  modalBackgroundStyle,\n  modalOptionsContainer,\n  searchInputStyle,\n  primaryColor,\n  disabled,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n  ...rest\n}: DropdownProps) => {\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    onValueChange(selectedValues); //send value to parent\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: any) =>\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: any) =>\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\n    let searchText = value.toString().toLocaleLowerCase().trim();\n\n    const regexFilter = new RegExp(searchText, 'i');\n\n    const searchResults = options.filter((item: any) => {\n      if (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .search(regexFilter) !== -1 ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(regexFilter)\n          .toLowerCase()\n          .search(regexFilter) !== -1\n      ) {\n        return item;\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  let primary = primaryColor || colors.gray;\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        dropdownErrorStyle={dropdownErrorStyle}\n        dropdownErrorTextStyle={dropdownErrorTextStyle}\n        dropdownHelperTextStyle={dropdownHelperTextStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        isMultiple={isMultiple}\n        primaryColor={primary}\n        disabled={disabled}\n        {...rest}\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={primary}\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={primary}\n          checkboxSize={checkboxSize}\n          checkboxStyle={checkboxStyle}\n          checkboxLabelStyle={checkboxLabelStyle}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}

package/lib/typescript/components/CheckBox/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { CheckboxProps } from './types';
+declare const CheckBox: ({ label, value, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, onChange, }: CheckboxProps) => JSX.Element;
+export default CheckBox;

package/lib/typescript/components/CheckBox/types.d.ts

@@ -0,0 +1,10 @@
+import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
+export declare type CheckboxProps = {
+    label?: string;
+    value?: boolean;
+    primaryColor?: ColorValue;
+    checkboxSize?: number;
+    checkboxStyle?: ViewStyle;
+    checkboxLabelStyle?: TextStyle;
+    onChange?: (value: boolean | string | number) => void;
+};

package/lib/typescript/{Modal.d.ts → components/CustomModal/index.d.ts}

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const CustomModal: ({ open, handleToggleModal, onRequestClose, modalBackgroundStyle, modalOptionsContainerStyle, children, }: any) => JSX.Element;
 export default CustomModal;

package/lib/typescript/{Dropdown.d.ts → components/Dropdown/Dropdown.d.ts}

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, dropdownErrorStyle, dropdownErrorTextStyle, dropdownHelperTextStyle, primaryColor, disabled, }: any) => JSX.Element;
 export default Dropdown;

package/lib/typescript/{DropdownList.d.ts → components/Dropdown/DropdownList.d.ts}

@@ -1,2 +1,3 @@
-declare const DropdownList: ({ options, optionLabel, optionValue, isMultiple, selectedItems, selectedItem, handleMultipleSelections, handleSingleSelection, primaryColor, }: any) => JSX.Element;
+/// <reference types="react" />
+declare const DropdownList: ({ options, optionLabel, optionValue, isMultiple, selectedItems, selectedItem, handleMultipleSelections, handleSingleSelection, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, }: any) => JSX.Element;
 export default DropdownList;

package/lib/typescript/{DropdownListItem.d.ts → components/Dropdown/DropdownListItem.d.ts}

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

package/lib/typescript/components/Dropdown/SelectedItemsView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SelectedItemsView: ({ placeholder, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, dropdownStyle, selectedItemStyle, multipleSelectedItemStyle, dropdownErrorStyle, primaryColor, disabled, }: any) => JSX.Element;
+export default SelectedItemsView;

package/lib/typescript/{Input.d.ts → components/Input/index.d.ts}

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Input: ({ placeholder, value, onChangeText, style, primaryColor, ...rest }: any) => JSX.Element;

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

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

package/lib/typescript/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DropdownProps } from './types/index.types';
-export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, dropdownErrorStyle, dropdownErrorTextStyle, dropdownHelperTextStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, disabled, }: DropdownProps, rest: any) => JSX.Element;
+export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, dropdownErrorStyle, dropdownErrorTextStyle, dropdownHelperTextStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, disabled, checkboxSize, checkboxStyle, checkboxLabelStyle, ...rest }: DropdownProps) => JSX.Element;
 export default DropdownSelect;

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

@@ -1,27 +1,30 @@
-import type { CSSProperties } from 'react';
+import type { ViewStyle, ColorValue, TextStyle } from 'react-native';
 export declare type DropdownProps = {
-    placeholder: string;
-    label: string;
-    error: string;
-    helperText: string;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
     options: any[];
     optionLabel: string;
-    optionValue: string;
+    optionValue?: string;
     onValueChange: Function;
-    selectedValue: string | any[] | null;
-    isMultiple: boolean;
-    isSearchable: boolean;
-    labelStyle: string;
-    dropdownStyle: CSSProperties;
-    dropdownContainerStyle: CSSProperties;
-    dropdownErrorStyle: CSSProperties;
-    dropdownErrorTextStyle: CSSProperties;
-    dropdownHelperTextStyle: CSSProperties;
-    selectedItemStyle: CSSProperties;
-    multipleSelectedItemStyle: CSSProperties;
-    modalBackgroundStyle: CSSProperties;
-    modalOptionsContainer: CSSProperties;
-    searchInputStyle: CSSProperties;
-    primaryColor: string;
-    disabled: boolean;
+    selectedValue?: string | any[] | null;
+    isMultiple?: boolean;
+    isSearchable?: boolean;
+    labelStyle?: TextStyle;
+    dropdownStyle?: ViewStyle;
+    dropdownContainerStyle?: ViewStyle;
+    dropdownErrorStyle?: ViewStyle;
+    dropdownErrorTextStyle?: TextStyle;
+    dropdownHelperTextStyle?: TextStyle;
+    selectedItemStyle?: ViewStyle;
+    multipleSelectedItemStyle?: ViewStyle;
+    modalBackgroundStyle?: ViewStyle;
+    modalOptionsContainer?: ViewStyle;
+    searchInputStyle?: ViewStyle;
+    primaryColor?: ColorValue;
+    disabled?: boolean;
+    checkboxSize?: number;
+    checkboxStyle?: ViewStyle;
+    checkboxLabelStyle?: TextStyle;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-select",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -32,14 +32,17 @@
     "bootstrap": "yarn example && yarn && yarn pods",
     "start": "yarn example start",
     "android": "yarn example android",
-    "ios": "yarn example ios"
+    "ios": "yarn example ios",
+    "clean": "yarn example clean",
+    "watchman:clear": "watchman watch-del-all"
   },
   "keywords": [
     "react-native",
     "ios",
     "android",
     "dropdown",
-    "selection"
+    "selection",
+    "multiple select"
   ],
   "repository": "https://github.com/azeezat/react-native-select",
   "author": "Azeezat <azeezat94@gmail.com> (https://github.com/azeezat)",
@@ -56,8 +59,8 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.66.11",
+    "@types/react": "17.0.14",
+    "@types/react-native": "^0.66.27",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",
@@ -73,7 +76,6 @@
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
-    "@react-native-community/checkbox": "^0.5.9",
     "react": "*",
     "react-native": "*"
   },
@@ -149,8 +151,5 @@
         }
       ]
     ]
-  },
-  "dependencies": {
-    "@react-native-community/checkbox": "^0.5.9"
   }
 }

package/src/components/CheckBox/index.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { Pressable, Text, StyleSheet, Image, View } from 'react-native';
+import { CHECKBOX_SIZE } from '../../constants';
+import type { CheckboxProps } from './types';
+
+const CheckBox = ({
+  label,
+  value,
+  primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
+  onChange,
+}: CheckboxProps) => {
+  const fillColor = {
+    backgroundColor: value ? primaryColor || 'green' : 'white',
+  };
+  return (
+    <Pressable
+      onPress={onChange ? () => onChange(!value) : () => {}}
+      style={[styles.checkboxContainer]}
+    >
+      <View style={[styles.checkbox, checkboxStyle, fillColor]}>
+        <Image
+          source={require('../../asset/check.png')}
+          style={[
+            {
+              height: checkboxSize || CHECKBOX_SIZE,
+              width: checkboxSize || CHECKBOX_SIZE,
+            },
+          ]}
+        />
+      </View>
+      {label && (
+        <Text style={[checkboxLabelStyle, styles.labelStyle]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  checkboxContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+  },
+  checkbox: {
+    padding: 4,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 4,
+    borderColor: 'black',
+  },
+  labelStyle: { marginLeft: 10 },
+});
+
+export default CheckBox;

package/src/components/CheckBox/types.ts

@@ -0,0 +1,11 @@
+import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
+
+export type CheckboxProps = {
+  label?: string;
+  value?: boolean;
+  primaryColor?: ColorValue;
+  checkboxSize?: number;
+  checkboxStyle?: ViewStyle;
+  checkboxLabelStyle?: TextStyle;
+  onChange?: (value: boolean | string | number) => void;
+};

package/src/{Modal.tsx → components/CustomModal/index.tsx}

@@ -5,7 +5,7 @@ import {
   SafeAreaView,
   StyleSheet,
 } from 'react-native';
-import { colors } from './styles/colors';
+import { colors } from '../../styles/colors';
 
 const CustomModal = ({
   open,

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import SelectedItemsView from './SelectedItemsView';
+import { colors } from '../../styles/colors';
+import { typography } from '../../styles/typography';
+
+const Dropdown = ({
+  label,
+  placeholder,
+  helperText,
+  error,
+  getSelectedItemsLabel,
+  handleToggleModal,
+  isMultiple,
+  selectedItem,
+  selectedItems,
+  labelStyle,
+  dropdownStyle,
+  dropdownContainerStyle,
+  selectedItemStyle,
+  multipleSelectedItemStyle,
+  dropdownErrorStyle,
+  dropdownErrorTextStyle,
+  dropdownHelperTextStyle,
+  primaryColor,
+  disabled,
+}: any) => {
+  return (
+    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
+      {label && label !== '' && (
+        <Text style={[styles.label, labelStyle]}>{label}</Text>
+      )}
+      <SelectedItemsView
+        placeholder={placeholder}
+        error={error}
+        getSelectedItemsLabel={getSelectedItemsLabel}
+        handleToggleModal={handleToggleModal}
+        isMultiple={isMultiple}
+        selectedItem={selectedItem}
+        selectedItems={selectedItems}
+        dropdownStyle={dropdownStyle}
+        selectedItemStyle={selectedItemStyle}
+        multipleSelectedItemStyle={multipleSelectedItemStyle}
+        dropdownErrorStyle={dropdownErrorStyle}
+        primaryColor={primaryColor}
+        disabled={disabled}
+      />
+
+      {error && error !== '' && (
+        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>
+      )}
+
+      {helperText && helperText !== '' && !error && (
+        <Text style={[styles.helper, dropdownHelperTextStyle]}>
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: { marginBottom: 16, color: colors.gray, ...typography.caption },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.red,
+  },
+  error: { color: colors.red, marginTop: 8, ...typography.caption },
+  helper: { marginTop: 8, color: colors.primary, ...typography.caption },
+  dropdownInputContainer: { marginBottom: 23, width: '100%' },
+  blackText: { color: colors.black },
+});
+
+export default Dropdown;

package/src/{DropdownList.tsx → components/Dropdown/DropdownList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, FlatList, StyleSheet, Text } from 'react-native';
 import DropdownListItem from './DropdownListItem';
-import { colors } from './styles/colors';
+import { colors } from '../../styles/colors';
 
 const DropdownList = ({
   options,
@@ -13,6 +13,9 @@ const DropdownList = ({
   handleMultipleSelections,
   handleSingleSelection,
   primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
 }: any) => {
   return (
     <FlatList
@@ -35,6 +38,9 @@ const DropdownList = ({
             ? handleMultipleSelections
             : handleSingleSelection,
           primaryColor,
+          checkboxSize,
+          checkboxStyle,
+          checkboxLabelStyle,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -52,6 +58,9 @@ const _renderItem = ({ item }: any, props: any) => {
       selectedOption={props.selectedOption}
       onChange={props.onChange}
       primaryColor={props.primaryColor}
+      checkboxSize={props.checkboxSize}
+      checkboxStyle={props.checkboxStyle}
+      checkboxLabelStyle={props.checkboxLabelStyle}
     />
   );
 };

package/src/components/Dropdown/DropdownListItem.tsx

@@ -0,0 +1,50 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import CheckBox from '../CheckBox';
+import { colors } from '../../styles/colors';
+
+const DropdownListItem = ({
+  item,
+  optionLabel,
+  optionValue,
+  isMultiple,
+  selectedOption,
+  onChange,
+  primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
+}: any) => {
+  const selectedOptionValue = optionValue ?? 'value';
+  return (
+    <TouchableOpacity
+      style={styles.modalOptions}
+      onPress={() => onChange(item[selectedOptionValue])}
+    >
+      <CheckBox
+        value={
+          isMultiple
+            ? selectedOption.includes(item[selectedOptionValue])
+            : [selectedOption].includes(item[selectedOptionValue])
+        }
+        label={item[optionLabel ?? '']}
+        onChange={() => onChange(item[selectedOptionValue])}
+        primaryColor={primaryColor || colors.primary}
+        checkboxSize={checkboxSize}
+        checkboxStyle={checkboxStyle}
+        checkboxLabelStyle={checkboxLabelStyle}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOptions: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default memo(DropdownListItem);