Cleanup

src/App.native.tsx

···
   ensureGeolocationResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
+import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
 import {Provider as InvitesStateProvider} from '#/state/invites'
 import {Provider as LightboxStateProvider} from '#/state/lightbox'
···
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
-import {GlobalGestureEvents} from '#/state/shell/GlobalGestureEvents'
 
 SplashScreen.preventAutoHideAsync()
 if (isIOS) {
···
                                                 <HideBottomBarBorderProvider>
                                                   <GestureHandlerRootView
                                                     style={s.h100pct}>
-                                                    <GlobalGestureEvents>
+                                                    <GlobalGestureEventsProvider>
                                                       <IntentDialogProvider>
                                                         <TestCtrls />
                                                         <Shell />
                                                         <NuxDialogs />
                                                       </IntentDialogProvider>
-                                                    </GlobalGestureEvents>
+                                                    </GlobalGestureEventsProvider>
                                                   </GestureHandlerRootView>
                                                 </HideBottomBarBorderProvider>
                                               </ServiceAccountManager>

src/components/Tooltip/index.tsx

···
 import {
+  createContext,
   useCallback,
+  useContext,
   useMemo,
   useRef,
-  createContext,
-  useContext,
   useState,
 } from 'react'
-import {View, Dimensions} from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {Dimensions, View} from 'react-native'
 
-import {Portal} from '#/components/Portal'
 import {atoms as a, useTheme} from '#/alf'
-import {useOnInteract} from '#/state/shell/GlobalGestureEvents'
+import {useOnGesture} from '#/components/hooks/useOnGesture'
+// import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {Portal} from '#/components/Portal'
 import {TIP_SIZE} from '#/components/Tooltip/const'
 
 type TooltipContextType = {
···
   >
 }) {
   const t = useTheme()
-  const insets = useSafeAreaInsets()
+  // const insets = useSafeAreaInsets()
   const [bubbleMeasurements, setBubbleMeasurements] = useState<
     | {
         width: number
···
       }
 
     const win = Dimensions.get('window')
-    const {width: ww, height: wh} = win
-    const maxTop = insets.top
-    const maxBottom = wh - insets.bottom
+    const {width: ww, height: _wh} = win
+    // const maxTop = insets.top
+    // const maxBottom = wh - insets.bottom
     const {width: cw, height: ch} = bubbleMeasurements
     const minLeft = a.px_xl.paddingLeft
     const maxLeft = ww - minLeft
···
       tipTop,
       tipLeft,
     }
-  }, [targetMeasurements, bubbleMeasurements, insets])
+  }, [targetMeasurements, bubbleMeasurements])
 
   const requestCloseWrapped = useCallback(() => {
     setBubbleMeasurements(undefined)
     requestClose()
   }, [requestClose])
 
-  useOnInteract(
+  useOnGesture(
     useCallback(
       e => {
         const {x, y} = e
···
         a.align_start,
         {
           width: 200,
-          opacity: !!bubbleMeasurements ? 1 : 0,
+          opacity: bubbleMeasurements ? 1 : 0,
           top: coords.top,
           left: coords.left,
         },

src/components/hooks/useOnGesture/index.ts

···
+import {useEffect} from 'react'
+
+import {
+  type GlobalGestureEvents,
+  useGlobalGestureEvents,
+} from '#/state/global-gesture-events'
+
+/**
+ * Listen for global gesture events. Callback should be wrapped with
+ * `useCallback` or otherwise memoized to avoid unnecessary re-renders.
+ */
+export function useOnGesture(
+  onGestureCallback: (e: GlobalGestureEvents['begin']) => void,
+) {
+  const ctx = useGlobalGestureEvents()
+  useEffect(() => {
+    ctx.register()
+    ctx.events.on('begin', onGestureCallback)
+    return () => {
+      ctx.unregister()
+      ctx.events.off('begin', onGestureCallback)
+    }
+  }, [ctx, onGestureCallback])
+}

src/components/hooks/useOnGesture/index.web.ts

···
+export function useOnGesture() {}

src/state/global-gesture-events/index.tsx

···
+import {createContext, useContext, useMemo, useRef, useState} from 'react'
+import {
+  Gesture,
+  GestureDetector,
+  type GestureStateChangeEvent,
+  type GestureUpdateEvent,
+  type PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler'
+import EventEmitter from 'eventemitter3'
+
+export type GlobalGestureEvents = {
+  begin: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  update: GestureUpdateEvent<PanGestureHandlerEventPayload>
+  end: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  finalize: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+}
+
+const Context = createContext<{
+  events: EventEmitter<GlobalGestureEvents>
+  register: () => void
+  unregister: () => void
+}>({
+  events: new EventEmitter<GlobalGestureEvents>(),
+  register: () => {},
+  unregister: () => {},
+})
+
+export function GlobalGestureEventsProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const refCount = useRef(0)
+  const events = useMemo(() => new EventEmitter<GlobalGestureEvents>(), [])
+  const [enabled, setEnabled] = useState(false)
+  const ctx = useMemo(
+    () => ({
+      events,
+      register() {
+        refCount.current += 1
+        if (refCount.current === 1) {
+          setEnabled(true)
+        }
+      },
+      unregister() {
+        refCount.current -= 1
+        if (refCount.current === 0) {
+          setEnabled(false)
+        }
+      },
+    }),
+    [events, setEnabled],
+  )
+  const gesture = Gesture.Pan()
+    .runOnJS(true)
+    .enabled(enabled)
+    .simultaneousWithExternalGesture()
+    .onBegin(e => {
+      events.emit('begin', e)
+    })
+    .onUpdate(e => {
+      events.emit('update', e)
+    })
+    .onEnd(e => {
+      events.emit('end', e)
+    })
+    .onFinalize(e => {
+      events.emit('finalize', e)
+    })
+
+  return (
+    <Context.Provider value={ctx}>
+      <GestureDetector gesture={gesture}>{children}</GestureDetector>
+    </Context.Provider>
+  )
+}
+
+export function useGlobalGestureEvents() {
+  return useContext(Context)
+}

src/state/global-gesture-events/index.web.tsx

···
+export function GlobalGestureEventsProvider(_props: {
+  children: React.ReactNode
+}) {
+  throw new Error('GlobalGestureEventsProvider is not supported on web.')
+}
+
+export function useGlobalGestureEvents() {
+  throw new Error('useGlobalGestureEvents is not supported on web.')
+}

src/state/shell/GlobalGestureEvents.tsx

···
-import {createContext, useContext, useMemo, useEffect, useRef, useState} from 'react'
-import EventEmitter from 'eventemitter3'
-import {
-  GestureDetector,
-  Gesture,
-  GestureStateChangeEvent,
-  GestureUpdateEvent,
-  PanGestureHandlerEventPayload,
-} from 'react-native-gesture-handler'
-
-const events = new EventEmitter<{
-  begin: GestureStateChangeEvent<PanGestureHandlerEventPayload>
-  update: GestureUpdateEvent<PanGestureHandlerEventPayload>
-  end: GestureStateChangeEvent<PanGestureHandlerEventPayload>
-  finalize: GestureStateChangeEvent<PanGestureHandlerEventPayload>
-}>()
-
-const Context = createContext<{
-  register: () => void
-  unregister: () => void
-}>({
-  register: () => {},
-  unregister: () => {},
-})
-
-export function GlobalGestureEvents({
-  children,
-}: {
-  children: React.ReactNode
-}): React.ReactElement {
-  const refCount = useRef(0)
-  const [enabled, setEnabled] = useState(false)
-  const ctx = useMemo(() => ({
-    register() {
-      refCount.current += 1
-      if (refCount.current === 1) {
-        setEnabled(true)
-      }
-    },
-    unregister() {
-      refCount.current -= 1
-      if (refCount.current === 0) {
-        setEnabled(false)
-      }
-    },
-  }), [setEnabled])
-  const gesture = Gesture.Pan()
-    .runOnJS(true)
-    .enabled(enabled)
-    .simultaneousWithExternalGesture()
-    .onBegin(e => {
-      events.emit('begin', e)
-    })
-    .onUpdate(e => {
-      events.emit('update', e)
-    })
-    .onEnd(e => {
-      events.emit('end', e)
-    })
-    .onFinalize(e => {
-      events.emit('finalize', e)
-    })
-
-  return (
-    <Context.Provider value={ctx}>
-      <GestureDetector gesture={gesture}>{children}</GestureDetector>
-    </Context.Provider>
-  )
-}
-
-export function useOnInteract(
-  onInteract: (
-    e: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
-  ) => void,
-) {
-  const ctx = useContext(Context)
-  useEffect(() => {
-    ctx.register()
-    events.on('begin', onInteract)
-
-    return () => {
-      ctx.unregister()
-      events.off('begin', onInteract)
-    }
-  }, [ctx, onInteract])
-}