Remove extra view in GenericTouchable

Author: janicduplessis

packages/react-native-gesture-handler/src/components/touchables/GenericTouchable.tsx

@@ -12,6 +12,8 @@ import {
 import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 
+const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+
 /**
  * Each touchable is a states' machine which preforms transitions.
  * On very beginning (and on the very end or recognition) touchable is
@@ -29,6 +31,11 @@ type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
 
 interface InternalProps {
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
+  borderless?: boolean;
+  rippleColor?: string | number | null;
+  rippleRadius?: number | null;
+  foreground?: boolean;
+  exclusive?: boolean;
 }
 
 // TODO: maybe can be better
@@ -45,10 +52,8 @@ export default class GenericTouchable extends Component<
 > {
   static defaultProps = {
     delayLongPress: 600,
-    extraButtonProps: {
-      rippleColor: 'transparent',
-      exclusive: true,
-    },
+    rippleColor: 'transparent',
+    exclusive: true,
   };
 
   // Timeout handlers
@@ -248,11 +253,20 @@ export default class GenericTouchable extends Component<
       onAccessibilityAction: this.props.onAccessibilityAction,
       nativeID: this.props.nativeID,
       onLayout: this.props.onLayout,
+      borderless: this.props.borderless,
+      rippleColor: this.props.rippleColor,
+      exclusive: this.props.exclusive,
+      rippleRadius: this.props.rippleRadius,
+      foreground: this.props.foreground,
+      // rn-web
+      className: (this.props as any).className,
+      href: (this.props as any).href,
+      onClick: (this.props as any).onClick,
+      onMouseEnter: (this.props as any).onMouseEnter,
     };
 
     return (
-      <BaseButton
-        style={this.props.containerStyle}
+      <AnimatedBaseButton
         onHandlerStateChange={
           // TODO: not sure if it can be undefined instead of null
           this.props.disabled ? undefined : this.onHandlerStateChange
@@ -265,11 +279,10 @@ export default class GenericTouchable extends Component<
         testID={this.props.testID}
         touchSoundDisabled={this.props.touchSoundDisabled ?? false}
         enabled={!this.props.disabled}
-        {...this.props.extraButtonProps}>
-        <Animated.View {...coreProps} style={this.props.style}>
-          {this.props.children}
-        </Animated.View>
-      </BaseButton>
+        {...coreProps}
+        style={this.props.style}>
+        {this.props.children}
+      </AnimatedBaseButton>
     );
   }
 }

packages/react-native-gesture-handler/src/components/touchables/GenericTouchableProps.ts

@@ -1,9 +1,4 @@
-import type {
-  StyleProp,
-  ViewStyle,
-  TouchableWithoutFeedbackProps,
-  Insets,
-} from 'react-native';
+import type { TouchableWithoutFeedbackProps, Insets } from 'react-native';
 import type { UserSelect } from '../../handlers/gestureHandlerCommon';
 import { ExtraButtonProps } from './ExtraButtonProps';
 
@@ -21,7 +16,6 @@ export interface GenericTouchableProps
   shouldActivateOnStart?: boolean;
   disallowInterruption?: boolean;
 
-  containerStyle?: StyleProp<ViewStyle>;
   hitSlop?: Insets | number;
   userSelect?: UserSelect;
   extraButtonProps?: ExtraButtonProps;

packages/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -19,10 +19,8 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
   static defaultProps = {
     ...GenericTouchable.defaultProps,
     useForeground: true,
-    extraButtonProps: {
-      // Disable hiding ripple on Android
-      rippleColor: null,
-    },
+    // Disable hiding ripple on Android
+    rippleColor: null,
   };
 
   // Could be taken as RNTouchableNativeFeedback.SelectableBackground etc. but the API may change
@@ -76,7 +74,7 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
       <GenericTouchable
         {...rest}
         style={style}
-        extraButtonProps={this.getExtraButtonProps()}
+        {...this.getExtraButtonProps()}
       />
     );
   }