add theme prop (#165)

Author: Ahmed-Alsalim

README.md

@@ -285,6 +285,7 @@ yarn android
 | `direction`                    | "up" or "down"                                                                                                   | string              | down + auto calculate                    |
 | `matchFrom`                    | Whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start"    | string              | any                                      |
 | `bottomOffset`                 | For calculate dropdown direction (e.g., tabbar)                                                                  | number              | 0                                        |
+| `theme`           | Color scheme. Possible values are "light" or "dark"  | string            |  OS's color scheme                                        |
 | `onChangeText`                 | Event textInput onChangeText                                                                                     | function            |                                          |
 | `onSelectItem`                 | Event onSelectItem                                                                                               | function            |                                          |
 | `onOpenSuggestionsList`        | Event onOpenSuggestionsList                                                                                      | function            |                                          |

README^2.md

@@ -239,6 +239,7 @@ npm run ios
 | `direction` 	| "up" or "down" 	| string 	| down + auto calculate 	|
 | `position` 	| "relative" or "absolute" 	| string 	| relative 	|
 | `bottomOffset` 	| for calculate dropdown direction (e.g. tabbar) 	| number 	| 0 	|
+| `theme`           | Color scheme. Possible values are "light" or "dark"  | string            |  OS's color scheme                                        |
 | `onChangeText` 	| event textInput onChangeText 	| function 	|  	|
 | `onSelectItem` 	| event onSelectItem 	| function 	|  	|
 | `onOpenSuggestionsList` 	| event onOpenSuggestionsList 	| function 	|  	|

README^3.md

@@ -277,6 +277,7 @@ yarn ios
 | `direction` 	| "up" or "down" 	                                                                                                | string 	| down + auto calculate 	                       |
 | `matchFrom` 	| whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" 	 | string 	| any 	                                         |
 | `bottomOffset` 	| for calculate dropdown direction (e.g. tabbar) 	                                                                | number 	| 0 	                                           |
+| `theme`           | Color scheme. Possible values are "light" or "dark"  | string            |  OS's color scheme                                        |
 | `onChangeText` 	| event textInput onChangeText 	                                                                                  | function 	| 	                                             |
 | `onSelectItem` 	| event onSelectItem 	                                                                                            | function 	| 	                                             |
 | `onOpenSuggestionsList` 	| event onOpenSuggestionsList 	                                                                                   | function 	| 	                                             |

src/Dropdown.tsx

@@ -18,9 +18,10 @@ export const Dropdown = memo((props: DropdownProps) => {
     ListEmptyComponent,
     ItemSeparatorComponent,
     direction,
+    theme,
     ...rest
   } = props
-  const themeName = useColorScheme()
+  const themeName = theme || useColorScheme()
   const styles = useMemo(() => getStyles(themeName || 'light'), [themeName])
 
   const defaultItemSeparator = useMemo(() => {

src/types/index.ts

@@ -46,6 +46,7 @@ export interface IAutocompleteDropdownProps {
   position?: 'absolute' | 'relative'
   bottomOffset?: number
   textInputProps?: TextInputProps
+  theme?: 'light' | 'dark'
   onChangeText?: (text: string) => void
   onSelectItem?: (item: AutocompleteDropdownItem | null) => void
   renderItem?: (item: AutocompleteDropdownItem, searchText: string) => React.ReactElement | null