react-native-input-select 1.1.1 → 1.1.3

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
 export type CheckboxProps = {
     label?: string;
@@ -12,5 +13,6 @@ export type CheckboxProps = {
         checkboxStyle?: ViewStyle;
         checkboxLabelStyle?: TextStyle;
     };
+    checkboxComponent?: React.ReactNode;
     onChange?: (value: boolean | string | number) => void;
 };

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

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

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

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

package/lib/typescript/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, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, }: any) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ item, optionLabel, optionValue, isMultiple, selectedOption, onChange, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, checkboxComponent, }: any) => JSX.Element>;
 export default _default;

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

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

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

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

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

@@ -35,6 +35,7 @@ export type DropdownProps = {
         checkboxStyle?: ViewStyle;
         checkboxLabelStyle?: TextStyle;
     };
+    checkboxComponent?: React.ReactNode;
     placeholderStyle?: TextStyle;
     listHeaderComponent?: React.ReactNode;
     listFooterComponent?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-select",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "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",
@@ -26,7 +26,7 @@
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
-    "release": "release-it -- patch --ci",
+    "release": "release-it --ci",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",

package/src/components/CheckBox/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import { Pressable, Text, StyleSheet, Image, View } from 'react-native';
 import { colors } from '../../styles/colors';
@@ -6,10 +5,22 @@ import { CHECKBOX_SIZE } from '../../constants';
 import type { CheckboxProps } from './types';
 
 /**
- *
- *`checkboxSize`, `checkboxStyle`,`checkboxLabelStyle` Will be deleted in version 1.0.
- * and replaced with `checkboxComponentStyles`
- */
+  * Individual props `checkboxSize`, `checkboxStyle`, `checkboxLabelStyle` would be replaced in future releases
+  * and replaced with a single object `checkboxComponentStyles` e.g
+
+```js
+const checkboxComponentStyles = {
+  checkboxSize: 20,
+  checkboxStyle: {
+    backgroundColor: 'purple',
+    borderRadius: 30,
+    padding: 10,
+    borderColor: 'red',
+  },
+  checkboxLabelStyle: { color: 'red', fontSize: 20 },
+};
+```
+  */
 
 const CheckBox = ({
   label,
@@ -20,10 +31,11 @@ const CheckBox = ({
   checkboxStyle,
   checkboxLabelStyle,
   checkboxComponentStyles,
+  checkboxComponent,
   onChange,
 }: CheckboxProps) => {
   // const { checkboxSize, checkboxStyle, checkboxLabelStyle } =
-  //   checkboxComponentStyles;
+  //   checkboxComponentStyles || undefined;
   const fillColor = {
     backgroundColor: disabled
       ? '#d3d3d3'
@@ -46,22 +58,30 @@ const CheckBox = ({
       style={[styles.checkboxContainer]}
       disabled={disabled}
     >
-      <View style={[styles.checkbox, checkboxStyle, fillColor]}>
-        <Image
-          source={require('../../asset/check.png')}
-          style={[
-            {
-              height:
-                checkboxComponentStyles?.checkboxSize ||
-                checkboxSize ||
-                CHECKBOX_SIZE,
-              width:
-                checkboxComponentStyles?.checkboxSize ||
-                checkboxSize ||
-                CHECKBOX_SIZE,
-            },
-          ]}
-        />
+      <View
+        style={[
+          styles.checkbox,
+          checkboxComponentStyles?.checkboxStyle || checkboxStyle,
+          fillColor,
+        ]}
+      >
+        {checkboxComponent || (
+          <Image
+            source={require('../../asset/check.png')}
+            style={[
+              {
+                height:
+                  checkboxComponentStyles?.checkboxSize ||
+                  checkboxSize ||
+                  CHECKBOX_SIZE,
+                width:
+                  checkboxComponentStyles?.checkboxSize ||
+                  checkboxSize ||
+                  CHECKBOX_SIZE,
+              },
+            ]}
+          />
+        )}
       </View>
       {label && (
         <Text

package/src/components/CheckBox/types.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
 
 export type CheckboxProps = {
@@ -13,5 +14,6 @@ export type CheckboxProps = {
     checkboxStyle?: ViewStyle;
     checkboxLabelStyle?: TextStyle;
   };
+  checkboxComponent?: React.ReactNode;
   onChange?: (value: boolean | string | number) => void;
 };

package/src/components/Dropdown/Dropdown.tsx

@@ -27,12 +27,14 @@ const Dropdown = ({
   dropdownHelperTextStyle,
   primaryColor,
   disabled,
+  setIndexOfSelectedItem,
 }: any) => {
   return (
     <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
       {label && label !== '' && (
         <Text style={[styles.label, labelStyle]}>{label}</Text>
       )}
+
       <DropdownSelectedItemsView
         placeholder={placeholder}
         error={error}
@@ -50,6 +52,7 @@ const Dropdown = ({
         primaryColor={primaryColor}
         disabled={disabled}
         placeholderStyle={placeholderStyle}
+        setIndexOfSelectedItem={setIndexOfSelectedItem}
       />
 
       {error && error !== '' && (

package/src/components/Dropdown/DropdownFlatList.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react-native/no-inline-styles */
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 import DropdownListItem from './DropdownListItem';
 import { ItemSeparatorComponent, ListEmptyComponent } from '../Others';
+import { TFlatList } from 'src/types/index.types';
 
 const DropdownFlatList = ({
   options,
@@ -19,9 +20,24 @@ const DropdownFlatList = ({
   checkboxStyle, // kept for backwards compatibility to be removed in future release
   checkboxLabelStyle, // kept for backwards compatibility to be removed  in future release
   checkboxComponentStyles,
+  checkboxComponent,
   listComponentStyles,
+  listIndex,
   ...rest
 }: any) => {
+  const flatlistRef = useRef<FlatList<TFlatList>>(null);
+
+  const scrollToItem = (index: number) => {
+    flatlistRef.current?.scrollToIndex({
+      index,
+      animated: true,
+    });
+  };
+
+  useEffect(() => {
+    scrollToItem(listIndex.itemIndex);
+  }, [listIndex]);
+
   return (
     <FlatList
       data={options}
@@ -49,14 +65,22 @@ const DropdownFlatList = ({
           onChange: isMultiple
             ? handleMultipleSelections
             : handleSingleSelection,
+          scrollToItem,
           primaryColor,
           checkboxSize, // kept for backwards compatibility
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
           checkboxComponentStyles,
+          checkboxComponent
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
+      ref={flatlistRef}
+      onScrollToIndexFailed={({ index }) => {
+        setTimeout(() => {
+          scrollToItem(index);
+        }, 500);
+      }}
       {...rest}
     />
   );
@@ -75,7 +99,9 @@ const _renderItem = ({ item }: any, props: any) => {
       checkboxSize={props.checkboxSize}
       checkboxStyle={props.checkboxStyle}
       checkboxLabelStyle={props.checkboxLabelStyle}
+      scrollToItem={props.scrollToItem}
       checkboxComponentStyles={props.checkboxComponentStyles}
+      checkboxComponent={props.checkboxComponent}
     />
   );
 };

package/src/components/Dropdown/DropdownListItem.tsx

@@ -14,6 +14,7 @@ const DropdownListItem = ({
   checkboxStyle,
   checkboxLabelStyle,
   checkboxComponentStyles,
+  checkboxComponent,
 }: any) => {
   return (
     <TouchableOpacity
@@ -37,6 +38,7 @@ const DropdownListItem = ({
           checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle
         }
         disabled={item.disabled}
+        checkboxComponent={checkboxComponent}
       />
     </TouchableOpacity>
   );

package/src/components/Dropdown/DropdownSectionList.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { SectionList, StyleSheet } from 'react-native';
 import DropdownListItem from './DropdownListItem';
 import {
@@ -8,6 +8,7 @@ import {
   SectionHeaderTitle,
 } from '../Others';
 import { extractPropertyFromArray } from '../../utils';
+import { TSectionList } from 'src/types/index.types';
 
 const DropdownSectionList = ({
   options,
@@ -24,7 +25,9 @@ const DropdownSectionList = ({
   checkboxStyle,
   checkboxLabelStyle,
   checkboxComponentStyles,
+  checkboxComponent,
   listComponentStyles,
+  listIndex,
   ...rest
 }: any) => {
   const [expandedSections, setExpandedSections] = useState(new Set());
@@ -53,6 +56,24 @@ const DropdownSectionList = ({
     });
   };
 
+  /**
+   * @description Scroll to item location
+   */
+
+  const sectionlistRef = useRef<SectionList<TSectionList>>(null);
+
+  const scrollToLocation = (listIndex: any) => {
+    sectionlistRef.current?.scrollToLocation({
+      sectionIndex: listIndex.sectionIndex,
+      animated: true,
+      itemIndex: listIndex.itemIndex,
+    });
+  };
+
+  useEffect(() => {
+    scrollToLocation(listIndex);
+  }, [listIndex]);
+
   return (
     <SectionList
       sections={options}
@@ -85,6 +106,7 @@ const DropdownSectionList = ({
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
           checkboxComponentStyles,
+          checkboxComponent,
           expandedSections,
         })
       }
@@ -100,6 +122,12 @@ const DropdownSectionList = ({
       }
       keyExtractor={(_item, index) => `Options${index}`}
       stickySectionHeadersEnabled={false}
+      ref={sectionlistRef}
+      onScrollToIndexFailed={() => {
+        setTimeout(() => {
+          scrollToLocation(listIndex);
+        }, 500);
+      }}
       {...rest}
     />
   );
@@ -124,6 +152,7 @@ const _renderItem = ({ section: { title }, item }: any, props: any) => {
       checkboxStyle={props.checkboxStyle}
       checkboxLabelStyle={props.checkboxLabelStyle}
       checkboxComponentStyles={props.checkboxComponentStyles}
+      checkboxComponent={props.checkboxComponent}
     />
   );
 };

package/src/components/Dropdown/DropdownSelectedItemsView.tsx

@@ -6,6 +6,7 @@ import {
   ScrollView,
   StyleSheet,
   Image,
+  TouchableOpacity,
 } from 'react-native';
 import { colors } from '../../styles/colors';
 import { inputStyles } from '../../styles/input';
@@ -27,6 +28,7 @@ const DropdownSelectedItemsView = ({
   dropdownErrorStyle,
   primaryColor,
   disabled,
+  setIndexOfSelectedItem,
 }: any) => {
   return (
     <Pressable
@@ -36,8 +38,7 @@ const DropdownSelectedItemsView = ({
           ...inputStyles.inputFocusState,
           borderColor: primaryColor,
         },
-        inputStyles.input,
-        dropdownStyle,
+        { ...inputStyles.input, ...dropdownStyle },
         error && //this must be last
           error !== '' &&
           !pressed && {
@@ -57,27 +58,37 @@ const DropdownSelectedItemsView = ({
           onStartShouldSetResponder={() => true}
         >
           {isMultiple ? (
-            getSelectedItemsLabel()?.map((item: any, i: Number) => (
-              <Text
+            getSelectedItemsLabel()?.map((label: string, i: Number) => (
+              <DropdownContent
+                onPress={() => {
+                  handleToggleModal();
+                  setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal
+                }}
                 key={`react-native-input-select-${Math.random()}-${i}`}
                 style={[
                   styles.selectedItems,
                   { backgroundColor: primaryColor },
                   multipleSelectedItemStyle,
                 ]}
-              >
-                {item}
-              </Text>
+                label={label}
+              />
             ))
           ) : (
-            <Text style={[styles.blackText, selectedItemStyle]}>
-              {getSelectedItemsLabel()}
-            </Text>
+            <DropdownContent
+              onPress={() => {
+                handleToggleModal();
+                setIndexOfSelectedItem(getSelectedItemsLabel()); // immediately scrolls to list item with the specified label when modal
+              }}
+              style={[styles.blackText, selectedItemStyle]}
+              label={getSelectedItemsLabel()}
+            />
           )}
           {!selectedItem && selectedItems?.length === 0 && (
-            <Text style={[styles.blackText, placeholderStyle]}>
-              {placeholder ?? 'Select an option'}
-            </Text>
+            <DropdownContent
+              onPress={() => handleToggleModal()}
+              style={[styles.blackText, placeholderStyle]}
+              label={placeholder ?? 'Select an option'}
+            />
           )}
         </View>
       </ScrollView>
@@ -90,6 +101,14 @@ const DropdownSelectedItemsView = ({
   );
 };
 
+const DropdownContent = ({ onPress, style, label, ...rest }: any) => {
+  return (
+    <TouchableOpacity onPress={() => onPress()} {...rest}>
+      <Text style={style}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
 const styles = StyleSheet.create({
   iconStyle: { position: 'absolute', right: 25, top: 25 },
   selectedItemsContainer: {

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { TouchableOpacity, StyleSheet, View } from 'react-native';
 import Input from './components/Input';
 import CheckBox from './components/CheckBox';
@@ -52,6 +52,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   checkboxStyle, // kept for backwards compatibility
   checkboxLabelStyle, // kept for backwards compatibility
   checkboxComponentStyles,
+  checkboxComponent,
   listHeaderComponent,
   listFooterComponent,
   listComponentStyles,
@@ -62,9 +63,13 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
   const [open, setOpen] = useState<boolean>(false);
   const [selectAll, setSelectAll] = useState<boolean>(false);
-  const [selectedItem, setSelectedItem] = useState<any>(''); //for single selection
-  const [selectedItems, setSelectedItems] = useState<any[]>([]); //for multiple selection
+  const [selectedItem, setSelectedItem] = useState<any>(''); // for single selection
+  const [selectedItems, setSelectedItems] = useState<any[]>([]); // for multiple selection
   const [searchValue, setSearchValue] = useState<string>('');
+  const [listIndex, setListIndex] = useState<{
+    sectionIndex?: number;
+    itemIndex: number;
+  }>({ itemIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist
 
   useEffect(() => {
     if (options) {
@@ -92,11 +97,15 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const ListTypeComponent = isSectionList
     ? DropdownSectionList
     : DropdownFlatList;
-  let modifiedSectionData = extractPropertyFromArray(newOptions, 'data').flat();
-  let modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
+  const modifiedSectionData = extractPropertyFromArray(
+    newOptions,
+    'data'
+  ).flat();
+  const modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
 
   const optLabel = optionLabel || DEFAULT_OPTION_LABEL;
   const optValue = optionValue || DEFAULT_OPTION_VALUE;
+  const optionsCopy = JSON.parse(JSON.stringify(options)); //copy of the original options array
 
   /*===========================================
    * Selection handlers
@@ -121,19 +130,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       } else {
         selectedValues.push(value);
       }
-
-      setSelectedItems(selectedValues);
       onValueChange(selectedValues); //send value to parent
-
-      //select all checkbox should not be checked if the list contains disabled values
-      if (
-        modifiedOptions.filter((item: TFlatListItem) => !item.disabled)
-          .length === selectedValues.length
-      ) {
-        setSelectAll(true);
-      } else {
-        setSelectAll(false);
-      }
       return selectedValues;
     });
   };
@@ -159,6 +156,32 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     });
   };
 
+  /*===========================================
+   * Handle side effects
+   *==========================================*/
+  const checkSelectAll = useCallback(
+    (selectedValues: any[]) => {
+      //if the list contains disabled values, those values will not be selected
+      if (
+        modifiedOptions.filter((item: TFlatListItem) => !item.disabled)
+          .length === selectedValues.length
+      ) {
+        setSelectAll(true);
+      } else {
+        setSelectAll(false);
+      }
+    },
+    [modifiedOptions]
+  );
+
+  // anytime the selected items change, check if it is time to set `selectAll` to true
+  useEffect(() => {
+    if (isMultiple) {
+      checkSelectAll(selectedItems);
+    }
+    return () => {};
+  }, [checkSelectAll, isMultiple, selectedItems]);
+
   /*===========================================
    * Get label handler
    *==========================================*/
@@ -192,7 +215,6 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     const regexFilter = new RegExp(searchText, 'i');
 
     //Because Search mutates the initial state, we have to search with a copy of the original array
-    const optionsCopy = JSON.parse(JSON.stringify(options));
     const searchResults = isSectionList
       ? searchSectionList(optionsCopy as TSectionList, regexFilter)
       : searchFlatList(optionsCopy as TFlatList, regexFilter);
@@ -241,6 +263,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     setOpen(!open);
     setSearchValue('');
     setNewOptions(options);
+    setListIndex({ itemIndex: 0, sectionIndex: 0 });
   };
 
   useEffect(() => {
@@ -261,6 +284,25 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     ? sectionListMaxLength > 1
     : newOptions.length > 1;
 
+  /*===========================================
+   * setIndexOfSelectedItem - For ScrollToIndex
+   *==========================================*/
+  const setIndexOfSelectedItem = (selectedLabel: string) => {
+    isSectionList
+      ? optionsCopy.map((item: TSectionListItem, sectionIndex: number) => {
+          item.data?.find((dataItem: TFlatListItem, itemIndex: number) => {
+            if (dataItem[optLabel] === selectedLabel) {
+              setListIndex({ sectionIndex, itemIndex });
+            }
+          });
+        })
+      : optionsCopy?.find((item: TFlatListItem, itemIndex: number) => {
+          if (item[optLabel] === selectedLabel) {
+            setListIndex({ itemIndex });
+          }
+        });
+  };
+
   return (
     <>
       <Dropdown
@@ -286,6 +328,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         primaryColor={primary}
         disabled={disabled}
         placeholderStyle={placeholderStyle}
+        setIndexOfSelectedItem={setIndexOfSelectedItem}
         {...rest}
       />
       <CustomModal
@@ -320,6 +363,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                       checkboxStyle={checkboxStyle}
                       checkboxLabelStyle={checkboxLabelStyle}
                       checkboxComponentStyles={checkboxComponentStyles}
+                      checkboxComponent={checkboxComponent}
                     />
                   </TouchableOpacity>
                 </View>
@@ -342,6 +386,8 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxStyle={checkboxStyle}
           checkboxLabelStyle={checkboxLabelStyle}
           checkboxComponentStyles={checkboxComponentStyles}
+          checkboxComponent={checkboxComponent}
+          listIndex={listIndex}
         />
       </CustomModal>
     </>

package/src/types/index.types.ts

@@ -47,6 +47,7 @@ export type DropdownProps = {
     checkboxStyle?: ViewStyle;
     checkboxLabelStyle?: TextStyle;
   };
+  checkboxComponent?: React.ReactNode;
   placeholderStyle?: TextStyle;
   listHeaderComponent?: React.ReactNode;
   listFooterComponent?: React.ReactNode;