feature: add blur props

src/components/backdrop/Backdrop.tsx

@@ -1,33 +1,36 @@
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
+import {
+  TapGestureHandler,
+  TapGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedGestureHandler,
   useAnimatedProps,
   useAnimatedStyle,
   withDelay,
   withTiming,
 } from 'react-native-reanimated';
-import {
-  TapGestureHandler,
-  TapGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';
 
 // Components
 import { BlurView } from 'expo-blur';
 
 // Utils
-import { styles } from './styles';
 import {
   CONTEXT_MENU_STATE,
   HOLD_ITEM_TRANSFORM_DURATION,
   IS_IOS,
   WINDOW_HEIGHT,
 } from '../../constants';
+import { useInternal } from '../../hooks';
 import {
-  BACKDROP_LIGHT_BACKGROUND_COLOR,
   BACKDROP_DARK_BACKGROUND_COLOR,
+  BACKDROP_LIGHT_BACKGROUND_COLOR,
 } from './constants';
-import { useInternal } from '../../hooks';
+import { styles } from './styles';
+
+// Types
+import { BackdropProps } from './types';
 
 const AnimatedBlurView = IS_IOS
   ? Animated.createAnimatedComponent(BlurView)
@@ -40,7 +43,10 @@ type Context = {
   };
 };
 
-const BackdropComponent = () => {
+const BackdropComponent = ({
+  enableBlur = true,
+  blurIntensity = 100,
+}: BackdropProps) => {
   const { state, theme } = useInternal();
 
   const tapGestureEvent = useAnimatedGestureHandler<
@@ -95,7 +101,11 @@ const BackdropComponent = () => {
   const animatedContainerProps = useAnimatedProps(() => {
     return {
       intensity: withTiming(
-        state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,
+        state.value === CONTEXT_MENU_STATE.ACTIVE
+          ? enableBlur
+            ? blurIntensity
+            : 0
+          : 0,
         {
           duration: HOLD_ITEM_TRANSFORM_DURATION,
         }
@@ -109,7 +119,7 @@ const BackdropComponent = () => {
         ? BACKDROP_LIGHT_BACKGROUND_COLOR
         : BACKDROP_DARK_BACKGROUND_COLOR;
 
-    return { backgroundColor };
+    return { backgroundColor: enableBlur ? backgroundColor : 'transparent' };
   }, [theme]);
 
   return (

src/components/backdrop/index.ts

@@ -1 +1,2 @@
 export { default as Backdrop } from './Backdrop';
+export type { BackdropProps } from './types';

src/components/backdrop/types.d.ts

@@ -0,0 +1,18 @@
+export type BackdropProps = {
+  /**
+   * Blur enabled. Optional.
+   * @type "true" | "false"
+   * @default "true"
+   * @examples
+   * enableBlur="false"
+   */
+  enableBlur?: boolean;
+  /**
+   * Blur radius. Optional.
+   * @type number
+   * @default 100
+   * @examples
+   * blurIntensity={20}
+   */
+  blurIntensity?: number;
+};

src/components/provider/Provider.tsx

@@ -23,6 +23,8 @@ export let AnimatedIcon: any;
 
 const ProviderComponent = ({
   children,
+  enableBlur,
+  blurIntensity,
   theme: selectedTheme,
   iconComponent,
   safeAreaInsets,
@@ -92,7 +94,7 @@ const ProviderComponent = ({
       <InternalContext.Provider value={internalContextVariables}>
         <PortalProvider>
           {children}
-          <Backdrop />
+          <Backdrop enableBlur={enableBlur} blurIntensity={blurIntensity} />
           <Menu />
         </PortalProvider>
       </InternalContext.Provider>

src/components/provider/types.d.ts

@@ -1,4 +1,6 @@
-export interface HoldMenuProviderProps {
+import type { BackdropProps } from '../backdrop';
+
+export interface HoldMenuProviderProps extends BackdropProps {
   /**
    * Theme of hold menu. Effects to backdrop and context menu styles. Optional.
    * @type "light" | "dark"

website/docs/props.md

@@ -37,6 +37,34 @@ Values:
 <HoldMenuProvider theme={"dark"}>
 ```
 
+### `enableBlur`
+
+Enable or disable the backdrop blur
+
+#### Example
+
+```tsx
+<HoldMenuProvider enableBlur={false}>
+```
+
+| type    | default | required |
+| ------- | ------- | -------- |
+| boolean | true    | NO       |
+
+### `blurIntensity`
+
+the intensity of the backdrop blur
+
+#### Example
+
+```tsx
+<HoldMenuProvider blurIntensity={20}>
+```
+
+| type   | default | required |
+| ------ | ------- | -------- |
+| number | 100     | NO       |
+
 ### `safeAreaInsets`
 
 Set object of safe area inset values to prevent the menu to be opened under the unsafe area
@@ -56,7 +84,7 @@ Fires callback when menu is opened
 
 ```tsx
 const onOpen = useCallback(() => {
-  console.log('App onOpen')
+  console.log('App onOpen');
 }, []);
 
 <HoldMenuProvider onOpen={onOpen} />;
@@ -70,7 +98,7 @@ Fires callback when menu is opened
 
 ```tsx
 const onClose = useCallback(() => {
-  console.log('App onClose')
+  console.log('App onClose');
 }, []);
 
 <HoldMenuProvider onClose={onClose} />;
@@ -244,9 +272,9 @@ Set true if you want to close menu when tap to HoldItem
 
 Set delay before long tap will activate gesture. May be useful to increase this value in lists
 
-| type    | default | required |
-| ------- | ------- | -------- |
-| number  | 150     | NO       |
+| type   | default | required |
+| ------ | ------- | -------- |
+| number | 150     | NO       |
 
 #### Example