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;