refactor: use tap gesture for both platforms

enesozturk · Jul 19, 2022 · fc99dea · fc99dea
1 parent 6ddcc9d
commit fc99dea
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 38 deletions.
diff --git a/src/components/backdrop/Backdrop.tsx b/src/components/backdrop/Backdrop.tsx
@@ -1,4 +1,5 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
+import { StyleSheet } from 'react-native';
 import Animated, {
   useAnimatedGestureHandler,
   useAnimatedProps,
@@ -27,10 +28,6 @@ import {
   BACKDROP_DARK_BACKGROUND_COLOR,
 } from './constants';
 import { useInternal } from '../../hooks';
-import { Pressable, StyleSheet } from 'react-native';
-import { GestureHandlerProps } from '../holdItem/types';
-
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 const AnimatedBlurView = IS_IOS
   ? Animated.createAnimatedComponent(BlurView)
@@ -115,31 +112,8 @@ 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 (
-    <GestureHandler>
+    <TapGestureHandler onHandlerStateChange={tapGestureEvent}>
       <AnimatedBlurView
         // @ts-ignore
         tint="default"
@@ -153,7 +127,7 @@ const BackdropComponent = () => {
           ]}
         />
       </AnimatedBlurView>
-    </GestureHandler>
+    </TapGestureHandler>
   );
 };
 

diff --git a/src/components/provider/Provider.tsx b/src/components/provider/Provider.tsx
@@ -1,17 +1,19 @@
 import React, { memo, useEffect, useMemo } from 'react';
 import { PortalProvider } from '@gorhom/portal';
 import Animated, { useSharedValue } from 'react-native-reanimated';
-import { InternalContext } from '../../context/internal';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 // Components
 import { Backdrop } from '../backdrop';
 
 // Utils
+import { InternalContext } from '../../context/internal';
 import { HoldMenuProviderProps } from './types';
 import { StateProps, Action } from './reducer';
 import { CONTEXT_MENU_STATE } from '../../constants';
 import { MenuInternalProps } from '../menu/types';
 import Menu from '../menu';
+
 export interface Store {
   state: StateProps;
   dispatch?: React.Dispatch<Action>;
@@ -60,13 +62,15 @@ const ProviderComponent = ({
   );
 
   return (
-    <InternalContext.Provider value={internalContextVariables}>
-      <PortalProvider>
-        {children}
-        <Backdrop />
-        <Menu />
-      </PortalProvider>
-    </InternalContext.Provider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <InternalContext.Provider value={internalContextVariables}>
+        <PortalProvider>
+          {children}
+          <Backdrop />
+          <Menu />
+        </PortalProvider>
+      </InternalContext.Provider>
+    </GestureHandlerRootView>
   );
 };