Adds onOpen / onClose callback props

README.md

@@ -135,6 +135,8 @@ For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@danish1658/react-native-d
 | ---- | ---- | ----------- |
 | save| string | Pass ('key' or 'value') to save data of your choice in your local state variable
 | onSelect| Function | Pass any function that you want to trigger immediately after a value is selected
+| onOpen| Function | Pass any function that you want to trigger when the dropdown is opened
+| onClose| Function | Pass any function that you want to trigger when the dropdown is closed
 | placeholder | String | Placeholder text that will be displayed in the select box
 | search | boolean | set to false if you dont want to use search functionality
 | maxHeight| Number | Maximum height of the dropdown wrapper to occupy

components/MultipleSelectList.tsx

@@ -34,6 +34,8 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
         search = true,
         searchPlaceholder = "search",
         onSelect = () => {},
+        onOpen = () => {},
+        onClose = () => {},
         label,
         notFoundText = "No data found",
         disabledItemStyles,
@@ -58,22 +60,22 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
 
     const slidedown = () => {
         setDropdown(true)
-
         Animated.timing(animatedvalue,{
             toValue:height,
             duration:500,
             useNativeDriver:false,
 
         }).start()
+        onOpen()
     }
     const slideup = () => {
-
         Animated.timing(animatedvalue,{
             toValue:0,
             duration:500,
             useNativeDriver:false,
 
         }).start(() => setDropdown(false))
+        onClose()
     }
 
     React.useEffect( () => {

components/SelectList.tsx

@@ -35,6 +35,8 @@ const SelectList: React.FC<SelectListProps> =  ({
         disabledItemStyles,
         disabledTextStyles,
         onSelect = () => {},
+        onOpen = () => {},
+        onClose = () => {},
         save = 'key',
         dropdownShown = false,
         fontFamily
@@ -57,15 +59,16 @@ const SelectList: React.FC<SelectListProps> =  ({
             useNativeDriver:false,
 
         }).start()
+        onOpen()
     }
     const slideup = () => {
-
         Animated.timing(animatedvalue,{
             toValue:0,
             duration:500,
             useNativeDriver:false,
 
         }).start(() => setDropdown(false))
+        onClose()
     }
 
     React.useEffect( () => {

index.d.ts

@@ -78,6 +78,16 @@ export interface SelectListProps  {
     */
     onSelect?: () => void,
 
+    /**
+     * Trigger an action when dropdown is opened
+     */
+    onOpen?: () => void,
+
+    /**
+     * Trigger an action when dropdown is closed
+     */
+    onClose?: () => void,
+
     /**
     * set fontFamily of whole component Text 
     */
@@ -191,6 +201,16 @@ export interface MultipleSelectListProps  {
     */
     onSelect?: () => void,
 
+    /**
+    * Trigger an action when dropdown is opened
+    */
+    onOpen?: () => void,
+
+    /**
+    * Trigger an action when dropdown is closed
+    */
+    onClose?: () => void,
+
     /**
     * set text of label which appears soon after multiple values are selected
     */