Add searchBothFieldFunction to labelField, valueField and Empty result message

README.md

@@ -62,6 +62,7 @@ yarn add react-native-element-dropdown
 | itemTextStyle      | TextStyle                                       | No        | Styling for text item in list                                       |
 | activeColor        | String                                          | No        | Background color for item selected in list container                |
 | search             | Boolean                                         | No        | Show or hide input search                                           |
+| searchBothFields   | Boolean                                         | No        | Search by valueField and labelField                                 |
 | searchQuery        | (keyword: string, labelValue: string) => Boolean| No        | Callback used to filter the list of items                           |
 | inputSearchStyle   | ViewStyle                                       | No        | Styling for input search                                            |
 | searchPlaceholder  | String                                          | No        | The string that will be rendered before text input has been entered |

src/components/Dropdown/index.tsx

@@ -72,6 +72,7 @@ const DropdownComponent: <T>(
       searchPlaceholderTextColor = 'gray',
       placeholder = 'Select item',
       search = false,
+      searchBothFields = false,
       maxHeight = 340,
       minHeight = 0,
       disable = false,
@@ -373,14 +374,38 @@ const DropdownComponent: <T>(
             return item.indexOf(key) >= 0;
           };
 
+          const searchBothFieldFunction = (e: any) => {
+            const item = _get(e, labelField)
+              ?.toLowerCase()
+              .replace(/\s/g, '')
+              .normalize('NFD')
+              .replace(/[\u0300-\u036f]/g, '');
+            const key = text
+              .toLowerCase()
+              .replace(/\s/g, '')
+              .normalize('NFD')
+              .replace(/[\u0300-\u036f]/g, '');
+
+            const item1 = _get(e, valueField)
+              ?.toLowerCase()
+              .replace(/\s/g, '')
+              .normalize('NFD')
+              .replace(/[\u0300-\u036f]/g, '');
+
+              const isLabelMatch = item.indexOf(key) >= 0;
+              const isValueMatch = item1.indexOf(key) >= 0;
+
+            return isLabelMatch || isValueMatch;
+          };
+
           const propSearchFunction = (e: any) => {
             const labelText = _get(e, searchField || labelField);
 
             return searchQuery?.(text, labelText);
           };
 
           const dataSearch = data.filter(
-            searchQuery ? propSearchFunction : defaultFilterFunction
+            searchQuery ? propSearchFunction : searchBothFields ? searchBothFieldFunction: defaultFilterFunction
           );
 
           if (excludeSearchItems.length > 0 || excludeItems.length > 0) {
@@ -403,6 +428,7 @@ const DropdownComponent: <T>(
       [
         data,
         searchQuery,
+        searchBothFields,
         excludeSearchItems,
         excludeItems,
         searchField,
@@ -606,6 +632,19 @@ const DropdownComponent: <T>(
               ref={refList}
               onScrollToIndexFailed={scrollIndex}
               data={listData}
+              ListEmptyComponent={
+                <View style={styles.item}>
+                <Text
+                  style={StyleSheet.flatten([
+                    styles.textItem,
+                    itemTextStyle,
+                    font(),
+                  ])}
+                >
+                No Result Found
+                </Text>
+              </View>
+              }
               inverted={isTopPosition ? inverted : false}
               renderItem={_renderItem}
               keyExtractor={(_item, index) => index.toString()}

src/components/Dropdown/model.ts

@@ -41,6 +41,7 @@ export interface DropdownProps<T> {
   valueField: keyof T;
   searchField?: keyof T;
   search?: boolean;
+  searchBothFields?: boolean;
   searchPlaceholder?: string;
   searchPlaceholderTextColor?: string;
   disable?: boolean;