Change pan to tap gesture to make scrolls work again

Author: frankfe-amsterdam

src/components/features/header/HeaderBase.tsx

@@ -4,6 +4,7 @@ import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context'
 import {HideFromAccessibility} from '@/components/features/accessibility/HideFromAccessibility'
 import {HeaderProps} from '@/components/features/header/types'
 import {Box} from '@/components/ui/containers/Box'
+import {ExtendAccessCodeValidityOnTap} from '@/modules/access-code/components/ExtendAccessCodeValidityOnTap'
 import {useScreen} from '@/store/slices/screen'
 
 type BackgroundColorProp = {
@@ -27,7 +28,9 @@ export const HeaderBase = ({backgroundColor, children}: Props) => {
     <HideFromAccessibility
       hide={isContentHiddenFromAccessibility || isHiddenFromAccessibility}
       style={styles.header}>
-      <Box>{children}</Box>
+      <ExtendAccessCodeValidityOnTap>
+        <Box>{children}</Box>
+      </ExtendAccessCodeValidityOnTap>
     </HideFromAccessibility>
   )
 }

src/components/features/header/HeaderContent.tsx

@@ -7,7 +7,6 @@ import {Row} from '@/components/ui/layout/Row'
 import {ScreenHeaderTitle} from '@/components/ui/text/ScreenHeaderTitle'
 import {IconSize} from '@/components/ui/types'
 import {useAccessibilityAutoFocus} from '@/hooks/accessibility/useAccessibilityAutoFocus'
-import {ExtendAccessCodeValidityOnPanGesture} from '@/modules/access-code/components/ExtendAccessCodeValidityOnPanGesture'
 
 const chevronSize = 'ml'
 
@@ -36,34 +35,30 @@ export const HeaderContent = ({
   })
 
   return (
-    <ExtendAccessCodeValidityOnPanGesture>
-      <View collapsable={false}>
-        <Row
-          gutter="lg"
-          valign="center">
-          <View
-            accessible
-            ref={accessibilityAutoFocusRef}
-            style={styles.sideColumn}>
-            {!!back && (
-              <HeaderBackButton
-                iconSize={chevronSize}
-                onPress={onBackPress}
-              />
-            )}
-          </View>
-          <View style={styles.middleColumn}>
-            <ScreenHeaderTitle
-              accessibilityLanguage={accessibilityLanguage}
-              text={title}
-            />
-          </View>
-          <View style={styles.sideColumn}>
-            {!!SideComponent && <SideComponent />}
-          </View>
-        </Row>
+    <Row
+      gutter="lg"
+      valign="center">
+      <View
+        accessible
+        ref={accessibilityAutoFocusRef}
+        style={styles.sideColumn}>
+        {!!back && (
+          <HeaderBackButton
+            iconSize={chevronSize}
+            onPress={onBackPress}
+          />
+        )}
       </View>
-    </ExtendAccessCodeValidityOnPanGesture>
+      <View style={styles.middleColumn}>
+        <ScreenHeaderTitle
+          accessibilityLanguage={accessibilityLanguage}
+          text={title}
+        />
+      </View>
+      <View style={styles.sideColumn}>
+        {!!SideComponent && <SideComponent />}
+      </View>
+    </Row>
   )
 }
 

src/components/features/screen/ScreenBase.tsx

@@ -8,7 +8,7 @@ import {ScreenInnerWrapper} from '@/components/features/screen/ScreenInnerWrappe
 import {ScreenWrapper} from '@/components/features/screen/ScreenWrapper'
 import {AlertTopOfScreen} from '@/components/ui/feedback/alert/AlertTopOfScreen'
 import {Gutter} from '@/components/ui/layout/Gutter'
-import {ExtendAccessCodeValidityOnPanGesture} from '@/modules/access-code/components/ExtendAccessCodeValidityOnPanGesture'
+import {ExtendAccessCodeValidityOnTap} from '@/modules/access-code/components/ExtendAccessCodeValidityOnTap'
 import {DisableScrollProvider} from '@/providers/disableScroll.provider'
 import {useScreen} from '@/store/slices/screen'
 
@@ -60,7 +60,7 @@ export const ScreenBase = ({
 
   return (
     <DisableScrollProvider>
-      <ExtendAccessCodeValidityOnPanGesture>
+      <ExtendAccessCodeValidityOnTap>
         <HideFromAccessibility
           hide={isHiddenFromAccessibility}
           style={styles.screen}
@@ -90,7 +90,7 @@ export const ScreenBase = ({
           )}
           {!!spaceBottom && <View style={{height: spaceBottom}} />}
         </HideFromAccessibility>
-      </ExtendAccessCodeValidityOnPanGesture>
+      </ExtendAccessCodeValidityOnTap>
     </DisableScrollProvider>
   )
 }

src/modules/access-code/components/ExtendAccessCodeValidityOnPanGesture.tsx src/modules/access-code/components/ExtendAccessCodeValidityOnTap.tsx

@@ -7,12 +7,12 @@ type Props = {
   children: ReactNode
 }
 
-export const ExtendAccessCodeValidityOnPanGesture = ({children}: Props) => {
+export const ExtendAccessCodeValidityOnTap = ({children}: Props) => {
   const {onExtendAccessCodeValidity} = useEnterAccessCode()
 
   const gesture = useMemo(
     () =>
-      Gesture.Pan().onBegin(() => {
+      Gesture.Tap().onBegin(() => {
         runOnJS(onExtendAccessCodeValidity)()
       }),
     [onExtendAccessCodeValidity],