Provider: add onOpen/onClose callbacks (#84)

example/src/App.tsx

@@ -54,6 +54,14 @@ const App = () => {
     };
   }, [state]);
 
+  const onOpen = useCallback(() => {
+    console.log('App onOpen')
+  }, []);
+
+  const onClose = useCallback(() => {
+    console.log('App onClose')
+  }, []);
+
   return (
     <>
       <AppContext.Provider value={appContextVariables}>
@@ -64,6 +72,8 @@ const App = () => {
           iconComponent={FeatherIcon}
           theme={state.theme}
           safeAreaInsets={safeAreaInsets}
+          onOpen={onOpen}
+          onClose={onClose}
         >
           <NavigationContainer>
             <Stack.Navigator

src/components/provider/Provider.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useMemo } from 'react';
 import { PortalProvider } from '@gorhom/portal';
-import Animated, { useSharedValue } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 // Components
@@ -26,6 +26,8 @@ const ProviderComponent = ({
   theme: selectedTheme,
   iconComponent,
   safeAreaInsets,
+  onOpen,
+  onClose,
 }: HoldMenuProviderProps) => {
   if (iconComponent)
     AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
@@ -51,6 +53,25 @@ const ProviderComponent = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTheme]);
 
+  useAnimatedReaction(
+    () => state.value,
+    state => {
+      switch (state) {
+        case CONTEXT_MENU_STATE.ACTIVE: {
+          if (onOpen)
+            runOnJS(onOpen)();
+          break
+        }
+        case CONTEXT_MENU_STATE.END: {
+          if (onClose)
+            runOnJS(onClose)();
+          break
+        }
+      }
+    },
+    [state]
+  );
+
   const internalContextVariables = useMemo(
     () => ({
       state,

src/components/provider/types.d.ts

@@ -27,4 +27,7 @@ export interface HoldMenuProviderProps {
     bottom: number;
     left: number;
   };
+
+  onOpen?: function;
+  onClose?: function;
 }

website/docs/props.md

@@ -48,6 +48,34 @@ const safeAreaInsets = useSafeAreaProvider();
 <HoldMenuProvider safeAreaInsets={safeAreaInsets} />;
 ```
 
+### `onOpen`
+
+Fires callback when menu is opened
+
+#### Example
+
+```tsx
+const onOpen = useCallback(() => {
+  console.log('App onOpen')
+}, []);
+
+<HoldMenuProvider onOpen={onOpen} />;
+```
+
+### `onClose`
+
+Fires callback when menu is opened
+
+#### Example
+
+```tsx
+const onClose = useCallback(() => {
+  console.log('App onClose')
+}, []);
+
+<HoldMenuProvider onClose={onClose} />;
+```
+
 ## HoldItem
 
 ### `items`