[General] Fix layout jumps with native detector (#3930)

## Description

Inside `GestureDetectorShadowNode`, we were checking whether a new
layout is available before doing any custom logic:
https://github.com/software-mansion/react-native-gesture-handler/blob/8e70b11a82fee38520761321cd67d341b2b4adf6/packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.cpp#L41-L43

However, `this->yogaNode_.getHasNewLayout()` is always `false` at this
point. `YogaLayoutableShadowNode::layout`, which goes over the child
nodes and updates their metrics, resets the flag immediately:
https://github.com/facebook/react-native/blob/490c5e8dcc6cdb19c334cc39e93a39a48ba71e96/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp#L701-L702

When visiting the detector node, the new layout information is available
in the child node but only before calling
`YogaLayoutableShadowNode::layout(layoutContext)`. If the child has no
new layout, the one from the previous revision should be reused. To
achieve that, I added a new optional value, keeping the layout metrics
from the source shadow node used to create the current revision.

## Test plan

Tested on this snipped which was able to consistently reproduce the
issue:

```jsx
import React from 'react';
import { View, StyleSheet, ScrollView, SectionList } from 'react-native';
import {
  GestureHandlerRootView,
  LegacySwitch,
  RectButton,
  Switch,
} from 'react-native-gesture-handler';

const EXAMPLES = [
  {
    sectionTitle: 'New api',
    data: Array.from({ length: 11 }).map((_, i) => ({ id: i })),
  },
];

export default function MainScreen() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <SectionList
        renderScrollComponent={(props) => <ScrollView {...props} />}
        sections={EXAMPLES}
        ListHeaderComponent={() => (
          <RectButton style={styles.autoOpenSetting}>
            {/* <LegacySwitch /> */}
            {/* <Switch /> */}
          </RectButton>
        )}
        renderItem={() => <></>}
        renderSectionHeader={() => <></>}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  separator: {
    height: 2,
  },
  autoOpenSetting: {
    margin: 16,
    height: 50,
    backgroundColor: 'red',
  },
});
```

Author: j-piasecki

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

@@ -34,18 +34,32 @@ void RNGestureHandlerDetectorShadowNode::initialize() {
 }
 
 void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
-  YogaLayoutableShadowNode::layout(layoutContext);
   // TODO: consider allowing more than one child and doing bounding box
   react_native_assert(getChildren().size() == 1);
 
   auto child = std::static_pointer_cast<const YogaLayoutableShadowNode>(
       getChildren()[0]);
+  auto childWithProtectedAccess =
+      std::static_pointer_cast<const RNGestureHandlerDetectorShadowNode>(child);
+
+  auto shouldSkipCustomLayout =
+      !childWithProtectedAccess->yogaNode_.getHasNewLayout();
+
+  // Do default layout after reading the new layout flag from the child.
+  // Default layout will reset the flag on the child nodes.
+  YogaLayoutableShadowNode::layout(layoutContext);
+
+  // The child node did not have its layout changed, we can reuse previous
+  // values
+  if (shouldSkipCustomLayout) {
+    react_native_assert(previousLayoutMetrics_.has_value());
+    setLayoutMetrics(previousLayoutMetrics_.value());
+    return;
+  }
 
   child->ensureUnsealed();
   auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
 
-  // TODO: figure out the correct way to setup metrics between detector and
-  // the child
   auto metrics = child->getLayoutMetrics();
   metrics.frame = child->getLayoutMetrics().frame;
   setLayoutMetrics(metrics);

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

@@ -45,13 +45,20 @@ class RNGestureHandlerDetectorShadowNode final
       const ShadowNode &sourceShadowNode,
       const ShadowNodeFragment &fragment)
       : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    const auto &sourceDetectorNode =
+        static_cast<const RNGestureHandlerDetectorShadowNode &>(
+            sourceShadowNode);
+    previousLayoutMetrics_ = sourceDetectorNode.getLayoutMetrics();
+
     initialize();
   }
 
   void layout(LayoutContext layoutContext) override;
 
  private:
   void initialize();
+
+  std::optional<LayoutMetrics> previousLayoutMetrics_;
 };
 
 } // namespace facebook::react