tweak

src/components/Button.tsx

@@ -15,7 +15,9 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -115,11 +117,22 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
-      Component = Pressable,
+      Component,
       ...rest
     },
     ref,
   ) => {
+    // This will pick the correct default pressable to use. If we are inside a dialog, we need to use the RNGH
+    // pressable so that it is usable inside the dialog.
+    const dialogContext = useDialogContext()
+    if (!Component) {
+      if (dialogContext) {
+        Component = NormalizedRNGHPressable
+      } else {
+        Component = Pressable
+      }
+    }
+
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,

src/components/NormalizedRNGHPressable.tsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import {
   GestureResponderEvent,
+  MeasureOnSuccessCallback,
   NativeMouseEvent,
   NativeSyntheticEvent,
   PressableProps,
-  View,
 } from 'react-native'
 import {Pressable as BSPressable} from 'react-native-gesture-handler'
 import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 
 function pressableEventToGestureResponderEvent(
   event: PressableEvent,
+  target: NormalizedRNGHPressable,
 ): GestureResponderEvent {
   return {
     nativeEvent: {
@@ -20,8 +21,10 @@ function pressableEventToGestureResponderEvent(
       identifier: event.nativeEvent.identifier.toString(),
       target: event.nativeEvent.target.toString(),
     },
-    target: null,
+    // @ts-expect-error
-    currentTarget: null,
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
     preventDefault() {},
     stopPropagation() {},
     cancelable: false,
@@ -43,11 +46,14 @@ function pressableEventToGestureResponderEvent(
 
 function pressableEventToMouseEvent(
   event: PressableEvent,
+  target: NormalizedRNGHPressable,
 ): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
   return {
     ...event.nativeEvent,
-    target: null,
+    // @ts-expect-error
-    currentTarget: null,
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
     preventDefault() {},
     stopPropagation() {},
     cancelable: false,
@@ -59,62 +65,64 @@ function pressableEventToMouseEvent(
   }
 }
 
-export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
+export class NormalizedRNGHPressable extends React.Component<PressableProps> {
-  function NormalizedPressable(
+  static displayName = 'Pressable'
-    {
+
-      onPress,
+  measure = (_: MeasureOnSuccessCallback) => {}
-      onLongPress,
+
-      onPressIn,
+  measureLayout = (_: number) => {}
-      onPressOut,
+
-      onHoverIn,
+  measureInWindow = (
-      onHoverOut,
+    _: (x: number, y: number, width: number, height: number) => void,
-      onFocus: _onFocus,
+  ) => {}
-      ...rest
+
-    },
+  setNativeProps = (_: PressableProps) => {}
-    ref,
+
-  ) {
+  focus = () => {}
-    const onNormalizedPress = (event: PressableEvent) => {
+
-      if (!onPress) return
+  blur = () => {}
-      onPress(pressableEventToGestureResponderEvent(event))
+
+  onPress = (event: PressableEvent) => {
+    if (!this.props.onPress) return
+    this.props.onPress(pressableEventToGestureResponderEvent(event, this))
   }
 
-    const onNormalizedLongPress = (event: PressableEvent) => {
+  onLongPress = (event: PressableEvent) => {
-      if (!onLongPress) return
+    if (!this.props.onLongPress) return
-      onLongPress(pressableEventToGestureResponderEvent(event))
+    this.props.onLongPress(pressableEventToGestureResponderEvent(event, this))
   }
 
-    const onNormalizedPressIn = (event: PressableEvent) => {
+  onPressIn = (event: PressableEvent) => {
-      if (!onPressIn) return
+    if (!this.props.onPressIn) return
-      onPressIn(pressableEventToGestureResponderEvent(event))
+    this.props.onPressIn(pressableEventToGestureResponderEvent(event, this))
   }
 
-    const onNormalizedPressOut = (event: PressableEvent) => {
+  onPressOut = (event: PressableEvent) => {
-      if (!onPressOut) return
+    if (!this.props.onPressOut) return
-      onPressOut(pressableEventToGestureResponderEvent(event))
+    this.props.onPressOut(pressableEventToGestureResponderEvent(event, this))
   }
 
-    const onNormalizedHoverIn = (event: PressableEvent) => {
+  onHoverIn = (event: PressableEvent) => {
-      if (!onHoverIn) return
+    if (!this.props.onHoverIn) return
-      onHoverIn(pressableEventToMouseEvent(event))
+    this.props.onHoverIn(pressableEventToMouseEvent(event, this))
   }
 
-    const onNormalizedHoverOut = (event: PressableEvent) => {
+  onHoverOut = (event: PressableEvent) => {
-      if (!onHoverOut) return
+    if (!this.props.onHoverOut) return
-      onHoverOut(pressableEventToMouseEvent(event))
+    this.props.onHoverOut(pressableEventToMouseEvent(event, this))
   }
 
+  render() {
     return (
-      <View ref={ref}>
       <BSPressable
-          onPress={onNormalizedPress}
+        {...this.props}
-          onLongPress={onNormalizedLongPress}
+        onPress={this.onPress}
-          onPressIn={onNormalizedPressIn}
+        onLongPress={this.onLongPress}
-          onPressOut={onNormalizedPressOut}
+        onPressIn={this.onPressIn}
-          onHoverIn={onNormalizedHoverIn}
+        onPressOut={this.onPressOut}
-          onHoverOut={onNormalizedHoverOut}
+        onHoverIn={this.onHoverIn}
-          {...rest}
+        onHoverOut={this.onHoverOut}
       />
-      </View>
     )
-  },
+  }
-)
+}