remove use of pointerEvents on iOS profile header (#3694)

bluesky-social · Apr 25, 2024 · 5b82b15 · 5b82b15
1 parent c3fcd48
commit 5b82b15
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
@@ -21,6 +21,7 @@ import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useRequireAuth, useSession} from '#/state/session'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useHaptics} from 'lib/haptics'
+import {isIOS} from 'platform/detection'
 import {useProfileShadow} from 'state/cache/profile-shadow'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
@@ -164,10 +165,12 @@ let ProfileHeaderLabeler = ({
       moderation={moderation}
       hideBackButton={hideBackButton}
       isPlaceholderProfile={isPlaceholderProfile}>
-      <View style={[a.px_lg, a.pt_md, a.pb_sm]} pointerEvents="box-none">
+      <View
+        style={[a.px_lg, a.pt_md, a.pb_sm]}
+        pointerEvents={isIOS ? 'auto' : 'box-none'}>
         <View
           style={[a.flex_row, a.justify_end, a.gap_sm, a.pb_lg]}
-          pointerEvents="box-none">
+          pointerEvents={isIOS ? 'auto' : 'box-none'}>
           {isMe ? (
             <Button
               testID="profileHeaderEditProfileButton"

diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
@@ -12,7 +12,7 @@ import {useLingui} from '@lingui/react'
 
 import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
+import {isIOS, isWeb} from '#/platform/detection'
 import {Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
 import {
@@ -152,10 +152,12 @@ let ProfileHeaderStandard = ({
       moderation={moderation}
       hideBackButton={hideBackButton}
       isPlaceholderProfile={isPlaceholderProfile}>
-      <View style={[a.px_lg, a.pt_md, a.pb_sm]} pointerEvents="box-none">
+      <View
+        style={[a.px_lg, a.pt_md, a.pb_sm]}
+        pointerEvents={isIOS ? 'auto' : 'box-none'}>
         <View
           style={[a.flex_row, a.justify_end, a.gap_sm, a.pb_sm]}
-          pointerEvents="box-none">
+          pointerEvents={isIOS ? 'auto' : 'box-none'}>
           {isMe ? (
             <Button
               testID="profileHeaderEditProfileButton"

diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx
@@ -12,6 +12,7 @@ import {useSession} from '#/state/session'
 import {BACK_HITSLOP} from 'lib/constants'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {NavigationProp} from 'lib/routes/types'
+import {isIOS} from 'platform/detection'
 import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {UserBanner} from 'view/com/util/UserBanner'
@@ -61,8 +62,8 @@ let ProfileHeaderShell = ({
   )
 
   return (
-    <View style={t.atoms.bg} pointerEvents="box-none">
-      <View pointerEvents="none">
+    <View style={t.atoms.bg} pointerEvents={isIOS ? 'auto' : 'box-none'}>
+      <View pointerEvents={isIOS ? 'auto' : 'none'}>
         {isPlaceholderProfile ? (
           <LoadingPlaceholder
             width="100%"
@@ -80,7 +81,9 @@ let ProfileHeaderShell = ({
 
       {children}
 
-      <View style={[a.px_lg, a.pb_sm]} pointerEvents="box-none">
+      <View
+        style={[a.px_lg, a.pb_sm]}
+        pointerEvents={isIOS ? 'auto' : 'box-none'}>
         <ProfileHeaderAlerts moderation={moderation} />
         {isMe && (
           <LabelsOnMe details={{did: profile.did}} labels={profile.labels} />

diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
@@ -1,26 +1,28 @@
 import * as React from 'react'
 import {
   LayoutChangeEvent,
+  NativeScrollEvent,
   ScrollView,
   StyleSheet,
   View,
-  NativeScrollEvent,
 } from 'react-native'
 import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
+  AnimatedRef,
   runOnJS,
   runOnUI,
   scrollTo,
-  useAnimatedRef,
-  AnimatedRef,
   SharedValue,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
 } from 'react-native-reanimated'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {TabBar} from './TabBar'
+
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {ListMethods} from '../util/List'
 import {ScrollProvider} from '#/lib/ScrollContext'
+import {isIOS} from 'platform/detection'
+import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {ListMethods} from '../util/List'
+import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {
   headerHeight: number
@@ -236,9 +238,12 @@ let PagerTabBar = ({
   const headerRef = React.useRef(null)
   return (
     <Animated.View
-      pointerEvents="box-none"
+      pointerEvents={isIOS ? 'auto' : 'box-none'}
       style={[styles.tabBarMobile, headerTransform]}>
-      <View ref={headerRef} pointerEvents="box-none" collapsable={false}>
+      <View
+        ref={headerRef}
+        pointerEvents={isIOS ? 'auto' : 'box-none'}
+        collapsable={false}>
         {renderHeader?.()}
         {
           // It wouldn't be enough to place `onLayout` on the parent node because