What are you? A button sandwitch.

Author: j-piasecki

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerButtonWrapperShadowNode.cpp

@@ -9,6 +9,8 @@
  * @generated by codegen project: GenerateShadowNodeCpp.js
  */
 
+#include <react/renderer/components/rngesturehandler_codegen/ShadowNodes.h>
+
 #include "RNGestureHandlerButtonWrapperShadowNode.h"
 
 namespace facebook::react {
@@ -22,38 +24,70 @@ void RNGestureHandlerButtonWrapperShadowNode::initialize() {
 
   // When the button wrapper is cloned and has a child node, the child node
   // should be cloned as well to ensure it is mutable.
+  if (!getChildren().empty()) {
+    prepareChildren();
+  }
+}
+
+void RNGestureHandlerButtonWrapperShadowNode::prepareChildren() {
   const auto &children = getChildren();
-  if (!children.empty()) {
-    react_native_assert(
-        children.size() == 1 &&
-        "RNGestureHandlerButtonWrapper received more than one child");
+  react_native_assert(
+      children.size() == 1 &&
+      "RNGestureHandlerButtonWrapper received more than one child");
 
-    const auto clonedChild = children[0]->clone({});
-    replaceChild(*children[0], clonedChild);
-  }
+  const auto directChild = children[0];
+  react_native_assert(
+      directChild->getChildren().size() == 1 &&
+      "RNGestureHandlerButtonWrapper received more than one grandchild");
+
+  const auto clonedChild = directChild->clone({});
+
+  const auto childWithProtectedAccess =
+      std::static_pointer_cast<RNGestureHandlerButtonWrapperShadowNode>(
+          clonedChild);
+  childWithProtectedAccess->traits_.unset(ShadowNodeTraits::ForceFlattenView);
+
+  replaceChild(*directChild, clonedChild);
+
+  const auto grandChild = clonedChild->getChildren()[0];
+  const auto clonedGrandChild = grandChild->clone({});
+  clonedChild->replaceChild(*grandChild, clonedGrandChild);
+}
+
+void RNGestureHandlerButtonWrapperShadowNode::appendChild(
+    const ShadowNode::Shared &child) {
+  YogaLayoutableShadowNode::appendChild(child);
+  prepareChildren();
 }
 
 void RNGestureHandlerButtonWrapperShadowNode::layout(
     LayoutContext layoutContext) {
   YogaLayoutableShadowNode::layout(layoutContext);
-  // TODO: consider allowing more than one child and doing bounding box
   react_native_assert(getChildren().size() == 1);
+  react_native_assert(getChildren()[0]->getChildren().size() == 1);
 
   auto child = std::static_pointer_cast<const YogaLayoutableShadowNode>(
       getChildren()[0]);
+  auto grandChild = std::static_pointer_cast<const YogaLayoutableShadowNode>(
+      child->getChildren()[0]);
 
   child->ensureUnsealed();
+  grandChild->ensureUnsealed();
+
   auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
+  auto mutableGrandChild =
+      std::const_pointer_cast<YogaLayoutableShadowNode>(grandChild);
 
   // TODO: figure out the correct way to setup metrics between button wrapper
   // and the child
-  auto metrics = child->getLayoutMetrics();
-  metrics.frame = child->getLayoutMetrics().frame;
+  auto metrics = grandChild->getLayoutMetrics();
   setLayoutMetrics(metrics);
 
-  auto childmetrics = child->getLayoutMetrics();
-  childmetrics.frame.origin = Point{};
-  mutableChild->setLayoutMetrics(childmetrics);
+  auto metricsNoOrigin = grandChild->getLayoutMetrics();
+  metricsNoOrigin.frame.origin = Point{};
+
+  mutableChild->setLayoutMetrics(metricsNoOrigin);
+  mutableGrandChild->setLayoutMetrics(metricsNoOrigin);
 }
 
 } // namespace facebook::react

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerButtonWrapperShadowNode.h

@@ -49,9 +49,11 @@ class RNGestureHandlerButtonWrapperShadowNode final
   }
 
   void layout(LayoutContext layoutContext) override;
+  void appendChild(const ShadowNode::Shared &child) override;
 
  private:
   void initialize();
+  void prepareChildren();
 };
 
 } // namespace facebook::react

packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx

@@ -1,5 +1,30 @@
-import { HostComponent } from 'react-native';
+import { HostComponent, StyleSheet, View } from 'react-native';
 import type { RawButtonProps } from './GestureButtonsProps';
 import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
+import RNGestureHandlerButtonWrapperNativeComponent from '../specs/RNGestureHandlerButtonWrapperNativeComponent';
 
-export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;
+const ButtonComponent =
+  RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;
+
+export default function GestureHandlerButton({
+  style,
+  ...rest
+}: RawButtonProps) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const { width, height, ...restStyle } = flattenedStyle;
+
+  return (
+    <RNGestureHandlerButtonWrapperNativeComponent style={styles.contents}>
+      <View collapsable={false} style={[styles.contents, restStyle]}>
+        <ButtonComponent {...rest} style={{ width, height }} />
+      </View>
+    </RNGestureHandlerButtonWrapperNativeComponent>
+  );
+}
+
+const styles = StyleSheet.create({
+  contents: {
+    display: 'contents',
+  },
+});