diff --git a/src/components/backdrop/Backdrop.tsx b/src/components/backdrop/Backdrop.tsx
index dc5fa35a..21786fd5 100644
--- a/src/components/backdrop/Backdrop.tsx
+++ b/src/components/backdrop/Backdrop.tsx
@@ -1,5 +1,9 @@
import React, { memo } from 'react';
import { StyleSheet } from 'react-native';
+import {
+ TapGestureHandler,
+ TapGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
import Animated, {
useAnimatedGestureHandler,
useAnimatedProps,
@@ -7,27 +11,26 @@ import Animated, {
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 (
diff --git a/src/components/backdrop/index.ts b/src/components/backdrop/index.ts
index 70cf60d9..c29fbd01 100644
--- a/src/components/backdrop/index.ts
+++ b/src/components/backdrop/index.ts
@@ -1 +1,2 @@
export { default as Backdrop } from './Backdrop';
+export type { BackdropProps } from './types';
diff --git a/src/components/backdrop/types.d.ts b/src/components/backdrop/types.d.ts
new file mode 100644
index 00000000..a314e1fc
--- /dev/null
+++ b/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;
+};
diff --git a/src/components/provider/Provider.tsx b/src/components/provider/Provider.tsx
index 234ecf8e..aa2b3fb1 100644
--- a/src/components/provider/Provider.tsx
+++ b/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 = ({
{children}
-
+
diff --git a/src/components/provider/types.d.ts b/src/components/provider/types.d.ts
index 3ed79c8a..1c7998a5 100644
--- a/src/components/provider/types.d.ts
+++ b/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"
diff --git a/website/docs/props.md b/website/docs/props.md
index 6e1548e2..9e80e0b1 100644
--- a/website/docs/props.md
+++ b/website/docs/props.md
@@ -37,6 +37,34 @@ Values:
```
+### `enableBlur`
+
+Enable or disable the backdrop blur
+
+#### Example
+
+```tsx
+
+```
+
+| type | default | required |
+| ------- | ------- | -------- |
+| boolean | true | NO |
+
+### `blurIntensity`
+
+the intensity of the backdrop blur
+
+#### Example
+
+```tsx
+
+```
+
+| 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');
}, []);
;
@@ -70,7 +98,7 @@ Fires callback when menu is opened
```tsx
const onClose = useCallback(() => {
- console.log('App onClose')
+ console.log('App 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