refactor: update backdrop for android

enesozturk · Jul 19, 2022 · ba2fc1f · ba2fc1f
1 parent 6127770
commit ba2fc1f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 deletions.
diff --git 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,15 +19,22 @@ import { styles } from './styles';
 import {
   CONTEXT_MENU_STATE,
   HOLD_ITEM_TRANSFORM_DURATION,
+  IS_IOS,
   WINDOW_HEIGHT,
 } from '../../constants';
 import {
   BACKDROP_LIGHT_BACKGROUND_COLOR,
   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) => (
+        <TapGestureHandler onHandlerStateChange={tapGestureEvent}>
+          {children}
+        </TapGestureHandler>
+      );
+    } else {
+      return ({ children }: GestureHandlerProps) => (
+        <AnimatedPressable
+          style={[styles.container, animatedContainerStyle]}
+          onPress={() => {
+            'worklet';
+            state.value = CONTEXT_MENU_STATE.END;
+          }}
+        >
+          {children}
+        </AnimatedPressable>
+      );
+    }
+  }, []);
+
   return (
-    <TapGestureHandler
-      onGestureEvent={tapGestureEvent}
-      onHandlerStateChange={tapGestureEvent}
-    >
+    <GestureHandler>
       <AnimatedBlurView
         // @ts-ignore
-        intensity={100}
         tint="default"
+        animatedProps={animatedContainerProps}
         style={[styles.container, animatedContainerStyle]}
       >
         <Animated.View
@@ -115,7 +153,7 @@ const BackdropComponent = () => {
           ]}
         />
       </AnimatedBlurView>
-    </TapGestureHandler>
+    </GestureHandler>
   );
 };
 

diff --git 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;