diff --git a/src/components/backdrop/Backdrop.tsx b/src/components/backdrop/Backdrop.tsx
index 72e7d33..599ce07 100644
--- a/src/components/backdrop/Backdrop.tsx
+++ b/src/components/backdrop/Backdrop.tsx
@@ -1,7 +1,7 @@
-import React, { memo } from 'react';
-import { StyleSheet } from 'react-native';
+import React, { memo, useMemo } from 'react';
import Animated, {
useAnimatedGestureHandler,
+ useAnimatedProps,
useAnimatedStyle,
withDelay,
withTiming,
@@ -19,6 +19,7 @@ import { styles } from './styles';
import {
CONTEXT_MENU_STATE,
HOLD_ITEM_TRANSFORM_DURATION,
+ IS_IOS,
WINDOW_HEIGHT,
} from '../../constants';
import {
@@ -26,8 +27,14 @@ import {
BACKDROP_DARK_BACKGROUND_COLOR,
} from './constants';
import { useInternal } from '../../hooks';
+import { Pressable, StyleSheet } from 'react-native';
+import { GestureHandlerProps } from '../holdItem/types';
-const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const AnimatedBlurView = IS_IOS
+ ? Animated.createAnimatedComponent(BlurView)
+ : Animated.View;
type Context = {
startPosition: {
@@ -88,6 +95,17 @@ const BackdropComponent = () => {
};
});
+ const animatedContainerProps = useAnimatedProps(() => {
+ return {
+ intensity: withTiming(
+ state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0,
+ {
+ duration: HOLD_ITEM_TRANSFORM_DURATION,
+ }
+ ),
+ };
+ });
+
const animatedInnerContainerStyle = useAnimatedStyle(() => {
const backgroundColor =
theme.value === 'light'
@@ -97,15 +115,35 @@ const BackdropComponent = () => {
return { backgroundColor };
}, [theme]);
+ // TODO: TapGestureHandler is now working on Android. Check later.
+ const GestureHandler = useMemo(() => {
+ if (IS_IOS) {
+ return ({ children }: GestureHandlerProps) => (
+
+ {children}
+
+ );
+ } else {
+ return ({ children }: GestureHandlerProps) => (
+ {
+ 'worklet';
+ state.value = CONTEXT_MENU_STATE.END;
+ }}
+ >
+ {children}
+
+ );
+ }
+ }, []);
+
return (
-
+
{
]}
/>
-
+
);
};
diff --git a/src/components/menu/types.d.ts b/src/components/menu/types.d.ts
index 9ad9e6c..514e5c9 100644
--- a/src/components/menu/types.d.ts
+++ b/src/components/menu/types.d.ts
@@ -2,7 +2,7 @@ import { TransformOriginAnchorPosition } from '../../utils/calculations';
export type MenuItemProps = {
text: string;
- icon?: string;
+ icon?: string | (() => React.ReactElement);
onPress?: (...args: any[]) => void;
isTitle?: boolean;
isDestructive?: boolean;